elementUI表格里树形结构嵌套复选框全选全不选功能及子集没全选是父级不勾选子集全选后父级自动勾选

最新推荐文章于 2024-06-25 17:25:51 发布

前端老菜鸟

最新推荐文章于 2024-06-25 17:25:51 发布

阅读量2.7k

点赞数 4

文章标签： js checkbox vue vue.js

本文链接：https://blog.csdn.net/weixin_48050571/article/details/106373936

版权

本文介绍了在Vue.js项目中使用ElementUI实现表格内的树形结构复选框全选和全不选功能。当子集全选时，父级自动勾选；取消子集选中时，父级也会随之取消。通过添加额外的`checked`和`parent`属性到数据中，并利用递归处理数据，实现了父子级复选框的联动效果。

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

第一次在CSDN上面发表文章，还有点小激动。废话不多说，先看一下效果图全部选中的时候，勾选父级子集全部选中
在这里插入图片描述
取消子集的选中，父级默认也取消

在这里插入图片描述
然后就是代码了，先添加checkbox标签，定义事件
由于后端数据里面没有给我返回参数所以，自己处理了一下参数结构，添加了checked和parent两个属性
由于别的地方也用到了请求回来的数据，所以自己深拷贝了一下获取到的数据到新的数组里面进行属性添加，listdata就是自己请求接口获取的数据，进行递归，添加了两个属性赋值给this.listdatapron，需要在data里面定义，大家都知道的基本操作。parent的意义就是为了操作父级复选框才添加的，递归开始的时候最外层父级给个null。

 tabledata(listdata){
   
        let areaSegList = JSON.parse(JSON.stringify(listdata))
            let redactb = function(list,parent){
   
                for(let i =0;i<list.length;i++