iview tree 绑定数据

官方文档 ：https://www.iviewui.com/components/tree

效果图

 

  1 主体分析

<Tree ref="tree" :data="treeData" :load-data="loadData" :render="renderContent" :on-select-change="loadData"></Tree>

:load-data=loadData 异步加载数据的方法

:on-select-change="loadData" 点击树节点时触发

:data="treeData 生成tree的数据

:render="renderContent" 自定义渲染的内容

2 代码分析

//树型图标
renderContent (h, { root, node, data }) {
  return h('span', {
    style: {
      display: 'inline-block',
      width: '100%'
    }
  }, [
// 判断图标显示样式
    h('span', [
      h('img', {
          attrs: {
            src:data.parentId=='-1'?require('@/assets/images/tree/computer.png'):

require('@/assets/images/tree/computer1.png')

            size: 18,
            color: data.parentId=='-1' ? '#70A7B8' :'#70A7B8',
          },
        }
      ),

  // 点击莫一行文字的时候显示
      h('span',{

        style: {
          cursor:'pointer'
        },
        class: "a",
        on:{
  
          click:(e)=>{
              this.showDetial(data.pathId)
          }
        }
      }, data.title)
    ]),
  ]);
},

//异步加载数据
loadData (item, callback) {
  let resourceId = this.con_rid
  let attrId = this.con_id
    getSourceListApi({
      resourceId:resourceId,
      attrId:attrId,
      parentId:item.pathId,
    }).then(res => {
      this.loading=false
      res.data.pathList.map(item => {
        item.keyName = item.pathName
        item["title"] = item.pathName
        item["children"] = []
        item["loading"] = false
      })
      callback(res.data.pathList);
    })
},