如何自定义iview树形下拉内的内容

1.使用render函数给第一层父级定义

  1. 使用树形结构中的render函数来定义子组件
复制代码
renderContent(h, {root, node, data}) {
      return data.children.length==0? h('span', {
        style: {
          display: 'inline-block',
          width: '400px',
          lineHeight: '32px'
        }
      }, [
        h('span', [
          h('Icon', {
            type: 'ios-paper-outline',
            style: {
              marginRight: '8px'
            }
          }),
          h('span', {
            style: {
              display: 'inline-block',
            }
          },data.name)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
          }
        }, [

          h('Input', {
            props: {
              type: 'text',
              value: data.price //使用data中的key
            },
            style: {
              display: 'inline-block',
              marginRight: '8px',
              width: '100px'
            },
            onClick: () => {
            }
          }),
          h('span', data.unit)
        ])
      ]):h('span', {
        style: {
          display: 'inline-block',
          marginRight: '8px',
          width: '400px',
        }
      }, [
        h('span', [
          h('Icon', {
            type: 'ios-paper-outline',
            style: {
              marginRight: '8px'
            }
          }),
          h('span', {
            style: {
              display: 'inline-block',
            }
          },data.name)
        ])])
    }

3.呈现结构

相关推荐
顽强d石头16 天前
viewDesign里的table内嵌套select动态添加表格行绑定内容丢失
数据库·mysql·view design
lyz24685924 天前
iview表单提交验证时,出现空值参数被过滤掉不提交的问题解决
view design
学了就忘24 天前
iView Table 组件跨页选择功能实现文档
view design
zzlyx992 个月前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
lyz2468593 个月前
iview table组件中修改按钮时 要注意是否真的修改了值
view design
花伤情犹在3 个月前
uView UI 在 UniApp 中的集成与配置
uni-app·view design
小茗同学阿5 个月前
如何实现分片上传功能:基于 Vue 和 iView 上传组件的详细教程
前端·vue.js·view design
初遇你时动了情5 个月前
解决uview ui赋值后表单无法通过验证
view design
Э时间行者于我6 个月前
iview upload clearFiles清除回显视图
前端·view design
行思理6 个月前
iView-admin2.0 新手教程(一)
macos·node.js·view design·iview admin