如何自定义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.呈现结构

相关推荐
前端张三1 个月前
vue2 + View design 使用inputNumber设置默认值为undefined但展示数据为1且表单校验不通过的原因
前端·vue.js·view design
前端李易安2 个月前
iview Form Input组件按下回车键搜索和禁止触发表单默认事件
view design
D_J_Dragon2 个月前
快速搭建最简单的前端项目vue+View UI Plus
前端·vue.js·view design
不cong明的亚子2 个月前
记一次高版本view-design的组件迁移到自身项目的低版本
vue.js·view design·view ui
lyz2468592 个月前
iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字
view design
Yang_yangyang3 个月前
上传文件,文件类型限制语法,各种媒体视频文件的Content-Type
前端框架·jquery·html5·anti-design-vue·view design
lixh_man3 个月前
iview 2.x table 设置固定列后 中间留白的问题
前端·javascript·view design
前端热爱者4 个月前
vue项目使用iview☞Modal后页面不能滚动的诡异问题
前端·vue.js·view design
Э时间行者于我4 个月前
Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失
vue.js·ui·view design
代码老祖6 个月前
vue+iview tabs context-menu 弹出框怎么修改样式
前端·vue.js·view design