el-tree树形列表实现单选效果

前言

今天开发的时候遇到了这样一个业务需求：页面中有一个表示不同公司部门下的员工的树形列表，要求选择员工后录入表单主要负责人字段，因此需要实现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]));