對el-tree進行一些操作

有時我們需要使用到el-tree，即樹形控件，但大多數時候我們是需要對它進行一些樣式及數據的改變的。

 

操作：

1.在label前添加指定圖標：

<span class="custom-tree-node" slot-scope="{ node, data }">
  <div class="word_style">
    <span class="label_style">
      <img src="@/assets/images2/wenjianjia.svg" v-if="!node.expanded">
      <img src="@/assets/images2/wenjian_01.svg" v-else>
      <span>{{ node.label }}</span></span>
  </div>
</span>

 

2.在選擇當前節點展開或是收起時，顯示的圖標不同：

同上1，根據node.expanded判斷，看是true還是false，確定當前節點是展開還是收起，以此顯示不同圖標。

node中包含當前選擇節點的所有信息；

 

3.控制tree的展開或是收起：

el-tree
  ref="treeThis"
</tree>

this.$refs.treeThis.store._getAllNodes().map((item) => {
  item.expanded=false;
})

通過對指定的樹的ref遍歷，設置該樹的每個節點的expanded屬性均為false即可控制該樹收起，設為true即可控制該樹展開。

 

4.當頁面中使用到多個el-tree時，需要采用手風琴模式， 即當展開其中一個樹時，其他的tree均收起：

此時若是tree是遍歷顯示的，則他們的ref值是一樣的，此時的ref為一個數組，通過對應的index獲取即可。

// 其他機構中除去當前選擇的，其他均收起
let treeOther_data = this.$refs.treeOther.filter((item1,index1) => index1 != index);
treeOther_data.map((item1) => {
  item1.store._getAllNodes().map((item2) => {
    item2.expanded=false;
  })
})

 

5.@node-click綁定的方法默認只能接收3個參數（data，node，value），若是想要再傳遞自己需要的參數(index)：

@node-click="(value)=> handleNodeClickOther(index, value)"

此時既可以取到該方法原有的參數，也可以取到自己另外傳遞的參數。

像下面這樣不行，這樣只能取到自己傳遞的參數，他原有的參數就取不到了。

@node-click="handleNodeClickThis(index)"

　

注意：

1.參考鏈接：

https://blog.csdn.net/ZHANGWEI19930118/article/details/85871024，

https://segmentfault.com/q/1010000011595496