对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

 

posted @ 2020-05-21 19:19  苏小落  阅读(5731)  评论(0编辑  收藏  举报