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

最新推荐文章于 2024-09-18 11:01:49 发布

肖肖肖丽珠

最新推荐文章于 2024-09-18 11:01:49 发布

阅读量9.6w

点赞数 8

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33769914/article/details/81302116

版权

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

摘要由CSDN通过智能技术生成

效果图

接口数据。是一个三层循环的数组。先是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++){
                          if(this.data[i].eventtype[j].ischecked==1){
                              this.checkAll.push(this.data[i].eventtype[j].eventtypeid)