dom部分:
<el-table ref="myTable" :data="tableData" row-key="id"
:tree-props="{children: 'children'}"
@selection-change="handleSelectionChange"
@select-all="handleSelectAllChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
data部分:
export default {
data() {
return {
// 表格数据
tableData:[
{
id:'1',
children:[
{id:'a1'}
]
},
{
id:'2',
children:[
{id:'a2'}
]
},
],
// 勾选数据
multipleSelection: [],
// 是否全选
isCheckedAll : false
}
},
methods: {
/* 处理tree表格全选--开始 */
handleSelectionChange(selection) {
this.multipleSelection = selection.map((obj) => obj)
},
/**
* 切换全部select的change方法
*/
handleSelectAllChange(selection) {
this.toggleAllSelection(selection)
},
// 表格全选的 勾选 与 取消 的逻辑
toggleAllSelection(selectedData) {
this.isCheckedAll = !this.isCheckedAll
if(this.isCheckedAll) {
selectedData.forEach((subRow) => {
this.toggleSelection(subRow['children'])
})
} else {
this.$refs['myTable'].clearSelection()
}
},
/**
* 回调函数
* 设置全部勾选上的方法
*/
toggleSelection(rows) {
if(!rows.length) {
return
}
rows.forEach((row) => {
// 如果为父数据 直接勾选
if(!this.rowHasSelected(row)) {
this.$refs['myTable'].toggleRowSelection(row)
}
// 如果存在子数据 则回调
if(row['children']) {
this.toggleSelection(row['children'])
}
})
},
/**
*判断是否为父级的id
*/
rowHasSelected(row) {
let index = this.multipleSelection.find(item => {
return item.id === row.id
})
return index?true:false
},
/* 处理tree表格全选--结束 */
}
}
ps: 该逻辑勾选父数据,不会影响该条数据的子数据勾选和取消。