树形表格加复选框后,选中父节点后子节点不自动选中的问题。于是在table上监听点击和全选,根据数据有子节点来手动切换选中与否。
{{ selectArr.map(el => el.id) }}
取消选择
tableData: [{
id: 1,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-31',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-32',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
children: [{
id: 41,
date: '2016-05-31',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 42,
date: '2016-05-32',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}],
selectArr: []
}
select(selection, row){if(selection.some(el=>{return row.id === el.id })){if(row.children){
row.children.map(j=>{this.toggleSelection(j,true)})}}else{if(row.children){
row.children.map(j=>{this.toggleSelection(j,false)})}}},selectAll(selection){// tabledata第一层只要有在selection里面就是全选const isSelect = selection.some(el=>{const tableDataIds =this.tableData.map(j=> j.id)return tableDataIds.includes(el.id)})// tableDate第一层只要有不在selection里面就是全不选const isCancel =!this.tableData.every(el=>{const selectIds = selection.map(j=> j.id)return selectIds.includes(el.id)})if(isSelect){
selection.map(el=>{if(el.children){
el.children.map(j=>{this.toggleSelection(j,true)})}})}if(isCancel){this.tableData.map(el=>{if(el.children){
el.children.map(j=>{this.toggleSelection(j,false)})}})}},selectionChange(selection){this.selectArr = selection
console.log(this.selectArr,'selectArr')},toggleSelection(row, select){if(row){this.$nextTick(()=>{this.$refs.table &&this.$refs.table.toggleRowSelection(row, select)})}},cancelAll(){this.$refs.table.clearSelection()}}