首页 > 其他 > 详细

对el-tree进行一些操作

时间:2020-05-21 19:48:55      阅读:90      评论:0      收藏:0      [点我收藏+]

有时我们需要使用到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进行一些操作

原文:https://www.cnblogs.com/5201314m/p/12932790.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!