vue+Element實現tree樹形數據展示

組件： Element（地址：http://element.eleme.io/#/zh-CN/component/tree）：Tree樹形控件

<el-tree ref="expandMenuList" class="expand-tree"
         :data="setTree"
         highlight-current
         :props="defaultProps"
         :expand-on-click-node="false"
         :render-content="renderContent"
         @node-click="handleNodeClick">
</el-tree>

renderContent：內容渲染     props：數據配置     node-click:節點被點擊時的回調

1）請求方式：Vue-resource

export const list = flag=> {
  return http.post(`/Search/list`, flag).then(res => res.data)
}

2）通過后台接口獲取數據

getDataList(){
  this.loading = true;   //element loading加載
  list({
   
  }).then(res => {
    this.loading = false;
    if (res.status) {
      this.setTree= res.data
    } 
    else {
      this.$alert(res.message, "錯誤", {
        confirmButtonText: "確定"
      });
    }
  });
}

　3）返回數據：parentId等於0的是父級，id等於parentId的是子級

[
    {
        "id":13,
        "parentId":0,
        "order":1,
        "name":"truck",
    },
    {
        "id":16,
        "pluginId":null,
        "parentId":0,
        "order":1,
        "name":"sca",
    },
    {
        "id":17,
        "pluginId":6,
        "parentId":16,
        "order":1,
        "name":"abcf",
    }
]

4）轉換為json樹形結構  （方法放在methods里面）

methods: {
    getListData() {
        let dataArray = [];
        this.datas.forEach(function (data) {
        if(data.enabled==true){
             let parentId = data.parentId;
              if (parentId == 0) {
                 let objTemp = {
                    id: data.id,
                    name: data.name,
                    order: data.order,
                    parentId: parentId,
                 }
                 dataArray.push(objTemp);
              }
           }
       })
       this.data2treeDG(this.datas, dataArray)
    }，
     data2treeDG(datas, dataArray) {
          for (let j = 0; j < dataArray.length; j++) {
               let dataArrayIndex = dataArray[j];
               let childrenArray = [];
               let Id = dataArrayIndex.id;
               for (let i = 0; i < datas.length; i++) {
                    let data = datas[i];
                    if(data.enabled==true){
                          let parentId = data.parentId;
                          if (parentId == Id) {//判斷是否為兒子節點
                          let objTemp = {
                             id: data.id,
                             name: data.name,
                             order: data.order,
                             parentId: parentId,
                         }
                       childrenArray.push(objTemp);
                    }
                }
         }
           dataArrayIndex.children = childrenArray;
           if (childrenArray.length > 0) {//有兒子節點則遞歸
                  this.data2treeDG(datas, childrenArray)
           }
      }
     this.setTree = dataArray;
     return dataArray;
   }, 
}

5）格式化后的樹形結構數據（setTree）：

[
 {
        
        "id":44,
        "name":"掃描w2",
        "order":1,
        "parentId":0,
        "children":[
            {
               
                "id":125,
                "name":"plplupluppluplplupl",
                "order":2,
                "parentId":44,
                "children":[
                "id":44,
                           "name":"plplupluppluplplupl",
                           "order":2,
                           "parentId":44
                ]
            },
            {
                "id":124,
                "name":"pluginplugin",
                "order":2,
                "parentId":44,
                "children":[

                ]
            }
        ]
    }
]

　6）渲染

methods: {
      showOrEdit(data) {
      debugger;
           if (this.isEdit) {
                  return <input type="text" style="width:80px" value={data.Name} on-blur={ev => this.edit_sure(ev, data)}/>
            }
            else{
                 return <span>{data.Name}</span>
            }
       },
       renderContent(h, {node, data, store}) {
            if(data.enabled==true&&data.parentId==0){
              return (
              <span>
                 <span>
                     { this.showOrEdit(data) }
                 </span>
                 <span style="margin-left: 15px;">
                      <i class="el-icon-plus" on-click={ () => this.NodeAdd(node, data) }></i>
                </span>
              </span>)
           }
           else if(data.enabled==true&&data.parentId!=0){
            return (
              <span>
                 <span>
                     { this.showOrEdit(data) }
                </span>
             </span>)
            }
           else {
              return (
               <span>
                 <span style="color: red;">
                     { this.showOrEdit(data) }
                 </span>
               </span>)
             }
       }
  }
}