Vue el-tree实现单选效果
场景:今天在做项目的时候,前端业务数据设计到树形展示,并需要单选,打开Element,选中 el-tree 组件,但官方文档中只支持多选,并不支持单选,需要对当前组件进行一定的拓展,以达到满足我们项目中的 要求。解决思路:首先通过组件api 中可以得知,el-tree中有check-change 事件,即当前节点选中状态发生变化时的回调,通过这个我们可以获得当前操作的节点对象。其次,在 el-tr
·
场景:
今天在做项目的时候,前端业务数据设计到树形展示,并需要单选,打开Element,选中 el-tree 组件,但官方文档中只支持多选,并不支持单选,需要对当前组件进行一定的拓展,以达到满足我们项目中的 要求。
解决思路:
首先研读el-tree组件api ,我们可以得知,el-tree中有 check-change 事件,即当前节点选中状态发生变化时的回调,通过这个我们可以获得当前操作的节点对象。
其次,在 el-tree 组件的方法中我们能找到 setCheckedKeys 设置当前所有已选中的节点(PS: 如api所述 使用 setCheckedKeys 时,必须设置 node-key 属性)
通过对上述 check-change 事件和 setCheckedKeys 方法的组合,我们可以通过 check-change 事件获取当前选中的节点对象,并通过 setCheckedKeys 方法设置当前 el-tree组件的选中节点为当前的节点对象,以实现我们的单选效果。
代码示例:
<el-tree
ref="dataTree"
:data="data"
node-key="id"
:props = props
show-checkbox
@check-change="handleCheckChange">
</el-tree>
handleCheckChange(data, checked, indeterminate) {
if (checked) {
this.$refs.dataTree.setCheckedKeys([data.id])
}
},
更多推荐
已为社区贡献4条内容
所有评论(0)