element-ui 实现树的半选中填充数据

置顶

qq_30493389

于 2019-03-15 11:38:11 发布

阅读量3.5k

点赞数 2

分类专栏： element-ui tree vue

本文链接：https://blog.youkuaiyun.com/qq_30493389/article/details/88570152

版权

在Element-UI中，通过id作为key处理树结构数据时遇到半选中节点的问题。利用getCheckedKeys和getHalfCheckedKeys方法获取选中和半选中节点，但在保存数据后，使用setCheckedKeys填充树导致所有子节点被选中。为解决这个问题，提出一种方法，即获取后台返回数据中无父级节点的id来设置正确的半选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui 实现树的半选中填充数据

	<el-tree
       :data="treeData"
       node-key="id"
       default-expand-all
       show-checkbox
       ref="tree"
       :expand-on-click-node="false">
       <div class="custom-tree-node" slot-scope="{ node, data }">
           <span>{
  { data.menuName }}</span>
       </div>
   </el-tree>

1、使用的是id作为key，在有多个字节点的节点下选中几个节点
在这里插入图片描述
如果使用如下方法getCheckedKeys只能获取选中的节点key,而无法获取版选中的节点key

所以官方提供了一个getHalfCheckedKeys 获取半选节点的方法：如下图