element-ui的el-table使用树状数据是，全选时没有选中子节点数据

心止不住的痛

于 2024-04-09 17:08:08 发布

阅读量257

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/m0_53942074/article/details/137559587

版权

<el-table
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        height="100%"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @select="selectTr" 
        @select-all="selectAll"
border>
<el-table-column type="selection" width="56"></el-table-column>
<el-table-column prop="name" label="任务"></el-table-column>
<el-table-column prop="product" label="制作人"></el-table-column>
</el-table>

数据里面添加一个判断符

data(){
         return{
            isAllSelect:false
         }
      },

然后就是方法部分

 methods:{
           // 全选/取消选操作
            selectAll() {
                this.isAllSelect = !this.isAllSelect;
                let data = this.tableData;
                this.toggleSelect(data,this.isAllSelect,'all');
            },
            //选择某行
            selectTr(selection,row){
                this.$set(row,'isChecked',!row.isChecked);
                this.$nextTick(()=>{
                    this.isAllSelect = row.isChecked;
                    this.toggleSelect(row,row.isChecked,'tr');
                });
            },
			//递归子级
            toggleSelect(data,flag,type){
                if(type === 'all'){
                    if(data.length > 0){
                        data.forEach(item=>{
                            this.toggleSelection(item, flag);
                            if(item.children && item.children.length > 0){
                                this.toggleSelect(item.children,flag,type)
                            }
                        })
                    }
                }else {
                    if(data.children && data.children.length > 0){
                        data.children.forEach(item =>{
                            item.isChecked = !item.isChecked;
                            this.$refs.multipleTable.toggleRowSelection(item, flag);
                            this.toggleSelect(item,flag,type);
                        })
                    }
                }
            },
            //改变选中
            toggleSelection(row, flag) {
                this.$set(row,'isChecked',flag);
                this.$nextTick(()=>{
                    if (flag) {
                        this.$refs.multipleTable.toggleRowSelection(row, flag);
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                });
            }

     }