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)
// The first step is to judge selected true: selected, false, unchecked
if (selected) {
// In the second step, the parent Table is selected and all child Tables are selected (all integrated together, and then duplicates are removed)
this.selectedRowKeysFather.push(record.id)
this.selectedRowKeysChild = Array.from(new Set([...setChildArr, ...this.selectedRowKeysChild]))
} else {
// In the second step, the parent Table is unselected, and all child Tables are unselected (for childSelectedRowKeys, filter out the keys of all child Tables under the unselected parent Table)
this.selectedRowKeysFather.splice( this.selectedRowKeysFather.findIndex(item => item === record.id), 1)
this.selectedRowKeysChild = this.selectedRowKeysChild.filter(item => !setChildArr.some(e => e === item))
}
// The third step is to determine whether the length of all sub-options is selected.
this.checkAllSelected()
},
onSelectAll: (selected, selectedRows, changeRows) => {
//Add the keys under the changed child Table under the parent Table to setChildArr
let setChildArr = []
console.log('change',changeRows)
changeRows.forEach(e => {
setChildArr = [...setChildArr, ...e.studentList.map(item => item.id)]
})
// The first step is to judge selected true: select all, false: cancel all selection
if (selected) {
// Step 2: Select the parent Table, select all child Tables, and set the SelectedRowKeys of the child Table.
this.selectedRowKeysFather = Array.from(new Set([...this.selectedRowKeysFather, ...changeRows.map(item => item.id)]))
this.selectedRowKeysChild = Array.from(new Set([...this.selectedRowKeysChild, ...setChildArr]))
} else {
// Step 2: Uncheck the parent Table, uncheck all child Tables, and set the SelectedRowKeys of the child Table.
this.selectedRowKeysFather = []
this.selectedRowKeysChild = []
}
}
};
},
rowSelectionChild() {
return {
hideSelectAll: true,
selectedRowKeys:this.selectedRowKeysChild,
onSelect: (record, selected, selectedRows) => {
// record: selected row data selected: whether the current row is selected true/false selectedRows: selected row If you select a grouped row, the previous data will become [undefined, undefined, {…}]
// 1. Set the sub-Table to manually select/cancel the callback of a row onSelect
// 1.1 Determine selected true: selected, add the key value to childSelectedRowKeys, false: unchecked, remove the key value from childSelectedRowKeys
if (selected) {
this.selectedRowKeysChild.push(record.id)
} else {
this.selectedRowKeysChild.splice(this.selectedRowKeysChild.findIndex(item => item === record.id), 1)
}
// 1.1.1 Undefined must be removed, otherwise selectedRows will put the key values selected in other sub-Tables into the array, but the value is undefined, such as: [undefined, 1, uundefined]
selectedRows = selectedRows.filter(item => item !== undefined)
// 1.2 Determine whether the length of selectedRows is the length of the child in data. If they are equal, the parent table will be selected. If not, it will not be selected.
for (const [index, item] of this.dataFather.entries()) {
// 1.2.1 If the currently selected object is in a group, find returns an object without undefined.
if (item.studentList.find(d => d.id === record.id)) {
// 1.2.2 Determine whether the lengths are equal and add the parent’s key
if (item.studentList.length === selectedRows.length) {
this.selectedRowKeysFather.push(item.id)
} else {
// 1.2.3 Not equal Delete the parent key
if (this.selectedRowKeysFather.some(d => d === item.id)) {
this.selectedRowKeysFather.splice(this.selectedRowKeysFather.findIndex(item1 => item1 === item.id), 1)
}
// 1.2.4 First find the key set of data.child data
const setChildArr = item.studentList.map(item => item.id)
// 1.2.5 Update the selection status of the parent row and determine whether the key in the selected row exists in 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() {
// Get the data of the list
this.dataFather = [{id:1,awardName:'asd',awardType:'custom',studentList:[{id:11,className:'aa'}]},{id:2 ,awardName:'asd2',awardType:'custom',studentList:[{id:12,className:'aa2'},{id:13,className:'aa3'}]} ]
//Asynchronous is used here to get the dom node after getting the data. This way we can get all of them, otherwise we can only get one.
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 there is a length, it is an intermediate state
if (this.selectedRowKeysChild.length > 0) {
this.checkboxDomList[0].setAttribute('class', 'ant-checkbox-indeterminate')
// all equal
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)
},