vue+element tree各項功能代碼詳解

前提自不必多說，新手先自學再來。

一、單選（且只能選最後一項）

•  show-checkbox：將此刪去，自動變單選
•  @node-click="handleNodeClick"：此爲點擊各節點實時變化的方法
• :render-content="renderContent"：此爲回顯到樹上的文字編輯方法（可以加圖標） 
• :highlight-current="true"：此爲高亮顯示當前項（如果設置了默認值，但無此屬性的話不會高亮顯示） 
• default-expand-all：此爲默認展示全部

 

二、多選

• show-checkbox：多選
• 屬性check-strictly：默認false，父子關聯，否則不關聯
• this.$refs.tree.getCheckedKeys(true);  ：此爲獲取所有選中節點的id組合
• 此組件多選時最好不要引用實時監聽，監聽次數太多，在數據巨大時不合適，加個按鈕一次性獲取即可（見上條）
• :default-checked-keys="nowKeys" ：此爲默認選擇
• this.$refs.tree.getCheckedKeys(true) ：此爲只選擇子節點
• this.$refs.tree.getCheckedKeys() ：此爲選擇全部選中節點

 

三、功能延伸（高級）

• 加不同圖標
• 鼠標移動-顯示全部
• 將無用信息刪除

 

四、舉個例子

1、單選（鼠標移上去即可顯示全部內容）

<el-tree :data="treeDatas" node-key="id" ref="tree" :props="defaultProps" default-expand-all
          :highlight-current="true" :render-content="renderContent" @node-click="handleNodeClick"></el-tree>

data() {
      return {
        treeDatas: [],
}
}

getTree() {
        this.treeDatas = [];
        var id = localStorage.getItem("id");
        orgTree(id).then(response => {
            if (response.data.code == 0) {
              this.treeDatas.push(response.data.data);
//因爲名字對不上，需要把返回數據的參數名改一遍
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/subArea/g, 'children'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/areaName/g, 'name'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/areaId/g, 'id'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/orgName/g, 'name'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/outletList/g, 'children'))
              //賦予默認值
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.outletId);
        });
            
            } else if (response.data.code !== 0) {
              this.$message.error(response.data.msg);
            }
          })
          .catch(err => {
            this.$message.error('系統錯誤');
          });
      },
      handleNodeClick(value){
//處理當前值爲最後一級時纔會執行以下方法；通過判斷參數存不存在來判斷
        if (value.pollutionSourceId != undefined) {
        this.outletId=value.id;  
         this.getAllList()
        }
      },
//對樹上的名稱進行編輯
renderContent: function (h, {
        node,
        data,
        store
      }) {
        if (data.pollutionSourceId == undefined && data.userName == undefined && data.children.length!=0) {
          return ( < span > < i class = 'el-icon-folder-opened'
            style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
          }
          if (data.pollutionSourceId != undefined) {
            return ( < span > < i class = 'el-icon-office-building'
              style = "color: #409EFF;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
            }
//刪除沒用的信息，不回顯
            if (data.pollutionSourceId == undefined && data.userName != undefined) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
            }
//刪除沒用的信息，不回顯
            if (data.pollutionSourceId == undefined && data.userName == undefined && data.children.length==0) {
              const parent = node.parent;
              const children = parent.data.children || parent.data;
              const index = children.findIndex(d => d.id === data.id);
              children.splice(index, 1);
            }
          },

 

 

2、多選（鼠標移上去即可顯示全部內容）

<el-tree :data="treeDatas" show-checkbox node-key="id" ref="tree" :props="defaultProps" default-expand-all
          :default-checked-keys="nowKeys" :render-content="renderContent"></el-tree>

data() {
      return {
        treeDatas: [],
}
}

 

 

getTree() {
        this.treeDatas = [];
        var id = localStorage.getItem("id");
        orgTree(id).then(response => {
            if (response.data.code == 0) {
              this.treeDatas.push(response.data.data);
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/subArea/g, 'children'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/areaName/g, 'name'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/areaId/g, 'id'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/orgName/g, 'name'))
              this.treeDatas = JSON.parse(JSON.stringify(this.treeDatas).replace(/outletList/g, 'children'))
//取第一個，賦值
              this.outletId = localStorage.getItem("outletId")
              this.nowKeys.push(this.outletId)
              this.getEquipments();
            } else if (response.data.code !== 0) {
              this.$message.error(response.data.msg);
            }
          })
          .catch(err => {
            this.$message.error('系統錯誤');
          });
      },
renderContent: function (h, {
        node,
        data,
        store
      }) {
        if (data.pollutionSourceId == undefined && data.userName == undefined && data.children.length!=0) {
          return ( < span > < i class = 'el-icon-folder-opened'
            style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
          }
          if (data.pollutionSourceId != undefined) {
            return ( < span > < i class = 'el-icon-office-building'
              style = "color: #409EFF;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
            }
            if (data.pollutionSourceId == undefined && data.userName != undefined) {
              const parent = node.parent;
              const children = parent.data.children || parent.data;
              const index = children.findIndex(d => d.id === data.id);
              children.splice(index, 1);
            }
            if (data.pollutionSourceId == undefined && data.userName == undefined && data.children.length==0) {
              const parent = node.parent;
              const children = parent.data.children || parent.data;
              const index = children.findIndex(d => d.id === data.id);
              children.splice(index, 1);
            }
          },