需求：
- 带复选框的树形table结构
- 勾选了子级，父级也会勾选；勾选父级，父级内部所有子级/孙子级都会被勾选
- 取消同理
核心代码：
- 树形table结构
<el-table
:data="tableData.list"
@selection-change="selectChange"
border
stripe
size="mini"
header-cell-class-name="tableHeader"
row-key="id"
:tree-props="{ children: 'children' }"
:default-expand-all="true"
@select="handleSelect"
@select-all="handleSelectAll"
ref="multipleTable"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="code" label="编码" width="160"> </el-table-column>
<el-table-column prop="name" label="名称" width="120"> </el-table-column>
<el-table-column label="操作" width="130">
<template slot-scope="scope">
<el-button small="small" type="text" @click="editOne('add', scope.row)">新增</el-button>
<el-button small="small" type="text" @click="editOne('edit', scope.row)">编辑</el-button>
<el-button
v-if="!scope.row.children"
small="small"
type="text"
@click="deleteOne('one', scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
- 勾选逻辑
handleSelectAll() {
const isAllSelected = this.$refs.multipleTable.store.states.isAllSelected
let _handleSelectAll = data => {
data.forEach(item => {
this.$refs.multipleTable.toggleRowSelection(item, isAllSelected)
_handleSelectAll(item.children || [])
})
}
_handleSelectAll(this.tableData.list)
},
handleSelect(selection, current) {
// 判断selection中是否存在current,若是存在那么就代表是被勾选上了,若是不存在代表是取消勾选了
const isChecked = !!selection.find(item => item.id === current.id)
// 如果当前项被取消勾选
if (!isChecked) {
// 那么其所有的祖先也应该被取消勾选
this.uncheckedParents(selection, current)
// 那么其所有的后代也应该被取消勾选
this.toggleCheckedChildrens(selection, current, false)
} else {
// 如果当前项被勾选
// 那么若同一组的元素都被勾选了,那么父元素将也被勾选,依次往上类推
this.checkedParents(selection)
// 那么其所有的后代都要被勾选
this.toggleCheckedChildrens(selection, current, true)
}
},
uncheckedParents(selection, item) {
let _uncheckedParents = data => {
return data.find(element => {
if (element.id === item.id) {
return true
} else if (_uncheckedParents(element.children || [])) {
this.$refs.multipleTable.toggleRowSelection(element, false)
for (let i = selection.length - 1; i >= 0; i--) {
if (selection[i].id === element.id) {
selection.splice(i, 1)
break
}
}
return true
} else {
return false
}
})
}
_uncheckedParents(this.tableData.list)
},
toggleCheckedChildrens(selection, item, isChecked) {
let _toggleCheckedChildrens = data => {
data.find(element => {
this.$refs.multipleTable.toggleRowSelection(element, isChecked)
if (isChecked && !selection.find(item => item.id === element.id)) {
selection.push(element)
} else if (!isChecked && selection.find(item => item.id === element.id)) {
for (let i = selection.length - 1; i >= 0; i--) {
if (selection[i].id === element.id) {
selection.splice(i, 1)
break
}
}
}
_toggleCheckedChildrens(element.children || [])
})
}
_toggleCheckedChildrens(item.children || [])
},
checkedParents(selection) {
let _checkedParents = element => {
const children = element.children
if (children && children.length) {
const allChildrenChecked = children.every(child => {
return _checkedParents(child)
})
if (allChildrenChecked) {
this.$refs.multipleTable.toggleRowSelection(element, true)
if (!selection.find(item => item.id === element.id)) {
selection.push(element)
}
}
}
return selection.find(item => item.id === element.id)
}
this.tableData.list.forEach(element => {
_checkedParents(element)
})
},
