vue3+antdesign 完成嵌套表格的复选框联动

computed: {
        rowSelectionFather() {
            return {
                // onChange: (selectedRowKeys, selectedRows) => {
                //    this.selectedRowKeysFather = selectedRowKeys
                // },
                selectedRowKeys:this.selectedRowKeysFather,
                onSelect: (record, selected, selectedRows) => {
                    const setChildArr = this.dataFather.find(d => d.id === record.id).studentList.map(item => item.id)
                    // 第一步 判断selected true：选中，false，取消选中
                    if (selected) {
                    // 第二步，父Table选中，子Table全选中（全部整合到一起，然后去重）
                    this.selectedRowKeysFather.push(record.id)
                    this.selectedRowKeysChild = Array.from(new Set([...setChildArr, ...this.selectedRowKeysChild]))
                    } else {
                    // 第二步，父Table取消选中，子Table全取消选中（针对childSelectedRowKeys，过滤掉取消选中的父Table下的所有子Table的key）
                     this.selectedRowKeysFather.splice( this.selectedRowKeysFather.findIndex(item => item === record.id), 1)
                    this.selectedRowKeysChild = this.selectedRowKeysChild.filter(item => !setChildArr.some(e => e === item))
                    }
                    // 第三步， 判断所有子选项长度  是否为全选
                    this.checkAllSelected()

                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                     // 将改变的父Table下的子Table下的key都添加到setChildArr中
                    let setChildArr = []
                    console.log('change',changeRows)
                    changeRows.forEach(e => {
                    setChildArr = [...setChildArr, ...e.studentList.map(item => item.id)]
                    })
                    // 第一步判断selected true：全选，false：取消全选
                    if (selected) {
                    // 第二步：父Table选中，子Table全选中，设置子Table的SelectedRowKeys
                    this.selectedRowKeysFather = Array.from(new Set([...this.selectedRowKeysFather, ...changeRows.map(item => item.id)]))
                    this.selectedRowKeysChild = Array.from(new Set([...this.selectedRowKeysChild, ...setChildArr]))
                    } else {
                    // 第二步：父Table取消选中，子Table全取消选中，设置子Table的SelectedRowKeys
                    this.selectedRowKeysFather = []
                    this.selectedRowKeysChild = []
                    }

                }
            };
        },
        rowSelectionChild() {
            return {
                hideSelectAll: true,
                selectedRowKeys:this.selectedRowKeysChild,
                onSelect: (record, selected, selectedRows) => {
                    //  record：选择的行数据 selected：当前行是否选择 true/false selectedRows:选择的行 如果选择分组的行上个数据会变成[undefined, undefined, {…}]
                    // 1.设置子Table手动选择/取消某行的回调 onSelect
                    // 1.1 判断selected true：选中，将key值添加到childSelectedRowKeys，false：取消选中，将key值从childSelectedRowKeys中移除
                    if (selected) {
                    this.selectedRowKeysChild.push(record.id)
                    } else {
                    this.selectedRowKeysChild.splice(this.selectedRowKeysChild.findIndex(item => item === record.id), 1)
                    }
                    // 1.1.1 必须去除undefined，否则selectedRows会将其他子Table中选中的key值放到数组中，但是值为undefined，如：[ undefined，1，uundefined]
                    selectedRows = selectedRows.filter(item => item !== undefined)

                    // 1.2 判断selectedRows的长度是否为data中child的长度，相等，就将父table选中，不等就不选中
                    for (const [index, item] of this.dataFather.entries()) {
                        // 1.2.1 如果当前选择的在一个分组中   find返回对象  没有undefined
                        if (item.studentList.find(d => d.id === record.id)) {
                            // 1.2.2 判断长度相等  将父级的key加入
                            if (item.studentList.length === selectedRows.length) {
                                this.selectedRowKeysFather.push(item.id)
                            } else {
                                // 1.2.3 不相等 将父级的key进行删除
                                if (this.selectedRowKeysFather.some(d => d === item.id)) {
                                    this.selectedRowKeysFather.splice(this.selectedRowKeysFather.findIndex(item1 => item1 === item.id), 1)
                                }
                                // 1.2.4 先找出data.child的数据的key集合
                                const setChildArr = item.studentList.map(item => item.id)
                                // 1.2.5 更新父级行的选择状态  判断选择的行中是否存在key在setChildArr中
                                setTimeout(() => {
                                    if (setChildArr.some(k => selectedRows.some(j => k === j.id))) {
                                    this.checkboxDomList[index + 1].setAttribute('class', 'ant-checkbox-indeterminate')
                                    } else {
                                    this.checkboxDomList[index + 1].removeAttribute('class', 'ant-checkbox-indeterminate')
                                    }
                                }, 0)
                                this.checkAllSelected()
                                break
                            }
                        }
                    }

                }
            }
        }
    },

 initData() {
            // 获取列表的数据
            this.dataFather = [{id:1,awardName:'asd',awardType:'自定义',studentList:[{id:11,className:'aa'}]},{id:2,awardName:'asd2',awardType:'自定义',studentList:[{id:12,className:'aa2'},{id:13,className:'aa3'}]}]
//这里使用异步 为了拿到数据后再取拿dom节点 这样能拿全  不然只能拿到一个
            setTimeout(() => {
                 const el =   document.querySelector('#tableId')
                console.log(el)
                this.checkboxDomList =  [...el.querySelectorAll('label.ant-checkbox-wrapper span:not(.ant-checkbox-inner)')]
                console.log(this.checkboxDomList)
                // this.checkboxDomList[0].setAttribute('class', 'ant-checkbox-indeterminate')
            },0)
           
        },
 checkAllSelected() {
            const allChildKey = []
            this.dataFather.forEach(item => {
                allChildKey.push(...item.studentList.map(i => i.id))
            })
            setTimeout(() => {
                // 如果有长度 为中间态
                if (this.selectedRowKeysChild.length > 0) {
                    this.checkboxDomList[0].setAttribute('class', 'ant-checkbox-indeterminate')
                // 全部相等
                if (allChildKey.length === this.selectedRowKeysChild.length) {
                    this.checkboxDomList[0].setAttribute('class', 'ant-checkbox-checked')
                } else {
                    this.checkboxDomList[0].removeAttribute('class', 'ant-checkbox-checked')
                    this.checkboxDomList[0].setAttribute('class', 'ant-checkbox-indeterminate')
                }
                } else {
                    this.checkboxDomList[0].removeAttribute('class', 'ant-checkbox-indeterminate')
                }
            }, 0)
        },