<el-table
ref="table"
row-key="id"
:stripe="false"
:is-number="false"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:loading="loading"
@select-all="handleSelectAllChange"
@selection-change="handleSelectionChange"
:data="tableData"
:columns="columns"
></el-table>
// 方法
data() {
return {
isCheckedAll : false
}
}
/* 处理tree表格全选--开始 */
handleSelectionChange(selection) {
// this.$refs.vuetree.setCheckedNodes(this.vuetree);
this.ids = selection.map((obj) => obj.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
handleSelectAllChange(selection) {
this.toggleAllSelection(selection)
},
toggleAllSelection(selectedData) {
this.isCheckedAll = !this.isCheckedAll
if(this.isCheckedAll) {
selectedData.forEach((subRow) => {
this.toggleSelection(subRow['children'])
})
} else {
this.$refs['table'].clearSelection()
}
},
toggleSelection(rows) {
if(!rows.length) {
return
}
rows.forEach((row) => {
if(!this.rowHasSelected(row)) {
this.$refs['table'].toggleRowSelection(row)
}
if(row['children']) {
this.toggleSelection(row['children'])
}
})
},
rowHasSelected(row) {
let index = this.ids.indexOf(row.id)
return ~index
},
/* 处理tree表格全选--结束 */
注意：每次加载table数据时需要将isCheckedAll 重置为false
