对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），若是想要再传递自己需要的参数：

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

此时既可以取到该方法原有的参数，也可以取到自己另外传递的参数。

这样不行，只能取到自己传递的参数，他原有的参数就取不到了。

@node-click="handleNodeClickThis(index)"

注意：

1.参考链接：https://blog.csdn.net/ZHANGWEI19930118/article/details/85871024

对el-tree进行一些操作

猜你喜欢