element-ui tree组件笔记集

实现单选

文档地址：https://element-plus.org/zh-CN/component/tree.html

element-ui的tree组件只有复选功能，没有单选，但项目里需要每次只选一个

解决办法是：使用check方法，在这个方法里，给tree组件重新赋值，代码如下：

<el-tree
  ref="roomTreeRef"
  node-key="id"
  show-checkbox
  :highlight-current='true'
  default-expand-all
  :data="allRoomList"
  label="label"
  @check="handleRoomCheckClick"
/>

function handleRoomCheckClick(e) {
  // 清空之前选择的
  roomTreeRef.value.setCheckedKeys(['-1'])
  form.value.roomList = [e.id]
  // 重新赋值
  roomTreeRef.value.setCheckedKeys([e.id])
}

备注

setCheckedKeys赋值的时候，传递的是数组，而且里面必须有值，不然会报错

设置、取消选择状态

1、先设置node-key属性

2、选中：treeRef.value.setCurrentKey(2)。2为对应的node-key值

setCurrentKey方法可以传入数组，一次性进行多个选中

取消：treeRef.value.setCurrentKey(null)