前言
今天开发的时候遇到了这样一个业务需求:页面中有一个表示不同公司部门下的员工的树形列表,要求选择员工后录入表单主要负责人字段,因此需要实现el-tree的单选效果,但是el-tree自身并没有直接支持单选的属性,查阅了文档和其他博客后我找到了解决方法。
打开局面
要实现el-tree的单选效果就要用到setCheckedNodes方法(该方法用于设置要勾选的节点),以及check-change回调事件(节点发生变化时调用)
代码实现
html部分
<el-tree
ref="myTree"
:data="data"
node-key="id"
show-checkbox
@check-change="handleCheckedChange">
</el-tree>
js部分
handleCheckedChange(data, checked, indeterminate) {
if (checked) {
this.$refs.dataTree.setCheckedKeys([data.id])
}
},
注意点
如果用的是ts进行开发那么这里的this.$refs.dataTree.setCheckedKeys([data.id])可能会报错,报错结果:any Property 'setCheckedKeys' does not exist on type 'Vue | Element | Vue[] | Element[]'.
解决方法
加类型断言:
(this.$refs.tree as any).setCheckedKeys([data.id]));