elementui 的 tree 组件如何用代码改变某个节点的展开状态

问题: 项目中需要在不点击树节点的情况下让树节点展开,在官方文档里面,只提供了一个默认展开的属性(default-expanded-keys),这个属性接收一个数组,数组里面就是要默认展开的项,但是这个只在最开始有用,后面要想某个节点展开就没有办法了。

解决方式: 官方没有提供展开节点的方法,就只有自己想办法了,我这里是给每一个节点都设置一个id,通过这个 id 拿到dom元素,然后执行click方法模拟点击效果。代码如下:

html部分代码:

<el-tree
  :data="treeData"
>
  <span :id="data.id" class="custom-tree-node"  slot-scope="{node,data}">
    <span style="line-height:32px;">{{node.label}}</span>
  </span>
</el-tree>

js部分代码:

data(){
  return {
	treeData:[
	  {
		id:1,
		label:'节点1',
		children:[
		  {
		  	id:2,
		  	label:'节点1-1',
		  },
		  {
		  	id:3,
		  	label:'节点1-2'
		  }
		]
	  }
	]
  }
}
mounted(){
  docoument.getElementById('1').click();
}

这样,就可以看到节点1是自动展开的了,在需要改变某个节点展开状态时,通过 document.getElementById(id).click() 的方法就可以实现。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值