vue单独的多选框(el-checkbox)控制树结构(el-tree)全选、半选、反选

皓月当空hy

已于 2023-08-03 15:00:54 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-27 16:30:17 首次发布

本文链接：https://blog.csdn.net/qq_33911541/article/details/128065431

本文介绍了如何在Vue项目中使用el-checkbox控制el-tree组件实现全选、半选和反选功能。关键步骤包括在数据初始化时获取树结构数据，根据权限设置节点选中状态，以及利用el-tree的setCheckedNodes方法实现全选和反选操作。

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

全选：

半选：

反选：

结构代码：

<el-checkbox v-model="checkecd" :indeterminate="indeterminate" @change="checkedAll">全部</el-checkbox>
<el-tree :props="props" :data="treeDate" ref="tree" accordion show-checkbox node-key="id"         
         :expand-on-click-node="false" @check-change="handleCheckChange">
</el-tree>

el-tree参数介绍：

：prop:指定节点标签为节点对象的某个属性值(label、c