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);    })},

原文地址：https://www.cnblogs.com/supershare/p/11792120.html