element-ui 里面el-checkbox多选框，实现全选单选

最新推荐文章于 2025-07-01 07:41:48 发布

肖肖肖丽珠

最新推荐文章于 2025-07-01 07:41:48 发布

阅读量9.7w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/81302116

这篇博客介绍了如何在Element UI中使用el-checkbox组件实现多级复选框功能，包括全选和单选操作。内容涉及到三层循环的数据结构，通过监听change事件和维护不同级别的选中状态数组来处理选中逻辑。

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

效果图

接口数据。是一个三层循环的数组。先是data -eventtype-operation 每个数据里面有个ischecked的属性用来表示他是否选中

data里面定义了

data:[],
actionids:[],//选择的那个actionid
num1:0,//没选择的计数
num2:0,//选中的计数
checkAllBig: [],
checkAll:[],
checkOne:[],

先获取所有的数据

       getRolePowerList({roleid:this.roleid}).then((res) => {
                   this.data=res.data;
                   for(var i=0;i<this.data.length;i++){//遍历选择的内容
                      if(this.data[i].ischecked==1){
                              this.checkAllBig.push(this.data[i].affairtypeid)
                          }
                      for(var j=0;j<this.data[i].eventtype.length;j++){
               &nb