基于element 实现table树状表格的选中的处理，以及后续对数据的处理

基于element 实现table树状表格的选中的处理

参考文章 https://blog.csdn.net/qq_38939028/article/details/103306207
基于这篇文章，增加了第四种情况，以及选中后续对数据的处理

全文一共三个需求的实现。具体看标题

table树状表格的选中的处理

要处理的情况有4种

1. 选中父元素，父元素下面的子元素全部选中。
2. 取消选中父元素，父元素下面的子元素全部取消。
3. 选中子元素，父元素勾选。
4. 取消选中子元素，当取消选中父元素下所有子元素时，父元素也取消。

用到的事件有下面三个，要注意select 和 select-all 是在你手动点击table选中的时候才会触发，而selection-change 是table的是否选中的状态只要发生改变都会触发。

同时也要注意select 和 select-all两个事件的参数具体是什么 这对后续的情况判断很重要。

table绑定的事件以及js代码

handleSelectionChange(val){
   
                this.anotherArr = val;
                // console.log(val,"val===========");
                // console.log("执行了几次");
        },
        toggleSelection(rows, flag) {
   
            console.log(rows,"rows");
            if (rows) {
   
                console.log("选则行");
                rows.forEach(row => {
   
                    let that = this;
                    that.$nextTick(() => {
   
                        //异步
                        that.$refs.tableRef.toggleRowSelection(row, flag)
                    });

                    console.log("3333333333====:", row, flag);
                    // this.handleSelectionChange2
                });
            } else {
   
                console.log("清空选择")
                this.$refs.tableRef.clearSelection();
            }
        },
//这里的情况判断是根据我table表的数据结构来判断的，这个要根据你的数据结构自行更改

        rowSelect(selection,row){
   
            //已经选中的全部数据和当前选中的数据
            console.log(selection,"selection=================");
            console.log(row,"row=====================");
            //当选中的是父元素的时候
            if (selection.indexOf(row) > -1 && row.skuList) {
   
                this.toggleSelection(row.skuList, true);
            }
            //取消选中父元素的时候
            if (selection.indexOf(row) === -1 && row.skuList) {
   
                this.toggleSelection(row.skuList, false);
            }
            //当选中子元素的时候
            if (selection.indexOf(row) > -1 && row.skuList === undefined) {
   
                let s = this.flist.filter(item => {
   
                    //选中行的productId和父的productId相同
                    if (item.productId === row.productId) {
   
                        return item;
                    }
                });
                //将row所在行父元素选中
                this.toggleSelection(s, true);
            }
            //当取消选中子元素的时候
            //这个是我参考的文章没有的情况
            if (selection.indexOf(row) === -1 && row.skuList === undefined) {
   
                console.log("取消选中子元素");
                 //每次取消选中子元素都会将num 置为0；
                let num = 0;
                //循环当前选中的数据，判断选中的子元素与当前选中的所有元素的productId是否相等，相等则num+1 ;
                for(let i = 0 ; i < selection.length; i ++){
   
                    if(selection[i].productId === row.productId ){
   
                        num++
                    }
                }
                //循环结束后如果num = 1 则说明父元素下面的所有子元素都已经取消选中，
                if (num == 1) {
   
                    let s = this.flist.filter(item => {
   
                        if (item.productId === row.productId) {
   
                            return item
                        }
                    })
                    this.toggleSelection(s, false);
                }
            }
        },
        //全选后执行的函数
        selectAll(selection) {
   
            // console.log("selectAll==========================")
            console.log("执行了吗")
            console.log(selection,"selection")