2020-12-01ElementUI的tree实现单选，再次点击取消选中

Posted 2023-03-20

参考技术A

上面事件通过调用事件 check-change ,每次节点选中状态发生改变时都会回调，会一直调用 setCheckedKeys([]) 方法，所以会一直选中节点，再次点击不会取消。
将 @check-change 事件改成使用 @check 事件。当第二次点击节点的时候，判断 check 事件的第二个属性 树目前的选中状态对象 。

如果 checked.checkedKeys 为空，说明是取消选中，那么调用 setCheckedKeys([]) 置空就行了。
如果 checked.checkedKeys 不为空，说明是选择别的节点，那么保持单选状态，也是将点击节点的 id 传给 setCheckedKeys([]) 方法。

elementUI el-tree setCheckedKeys使用nextTick出现的问题

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading \'setCheckedKeys\')"
TypeError: Cannot read properties of undefined (reading \'setCheckedKeys\')
elementUI使用el-tree做数据回显使用setCheckedKeys时报setCheckedKeys为undefined

1. 确保使用this.$nextTick(()=>)
this.$nextTick的作用是修改数据后立刻得到更新的DOM

2. 确保DOM初始化之后再nextTick
   当el-tree嵌在el-dialog中，或是使用v-if去控制一个块儿的展示时，确保先将DOM初始化后再进行nextTick

<el-dialog :title="title" :visible.sync="open"  append-to-body>
  <el-tree ref="menu" 
           node-key="id"
           :data="menuTree" 
           :check-strictly="!form.menuCheckStrictly" 
           :empty-text="$t(\'system.role.pleaseWait\') || \'加载中，请稍后\'" 
           :props="defaultProps"
           show-checkbox></el-tree>
</el-dialog>

getCheckedMenuByRoleId(roleId).then(res => 
  this.open = true // 正确做法，打开dialog时才会进行DOM初始化
  this.$nextTick(() => 
    this.$refs.menu.setCheckedKeys(res.data)
  )
  // this.open = true // 错误做法，还未进行DOM初始化就进行nextTick
)

前端小白一枚，如有错误请指正~

参考:
https://vue3js.cn/interview/vue/nexttick.html#一、nexttick是什么