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