效果图：
代码部分：
<template>
<div>
<el-table
ref="multipleTable"
:data="listTreeData"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
default-expand-all
:tree-props="{
children: 'children'
}"
>
<el-table-column width="105">
<template slot="header" slot-scope="scope">
<span>全选</span>
<el-checkbox
v-model="selecteds"
style="padding-left: 10px"
@change="checkAllIn(scope)"
/>
</template>
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.selected"
style="padding-left: 10px"
@change="checkChange(scope.row)"
/> </template
></el-table-column>
<el-table-column prop="label" label="名字" header-align="center" align="center" />
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
listTreeData: [
{
id: 1,
label: '一级 1',
parentId: 0,
selected: false,
children: [
{
id: 4,
label: '二级 1-1',
parentId: 1,
selected: false,
children: [
{
id: 9,
parentId: 4,
selected: false,
label: '三级 1-1-1'
},
{
id: 10,
parentId: 4,
selected: false,
label: '三级 1-1-2'
}
]
},
{
id: 7,
parentId: 1,
selected: false,
label: '二级 1-2'
}
]
},
{
id: 2,
label: '一级 2',
parentId: 0,
selected: false,
children: [
{
id: 5,
parentId: 2,
selected: false,
label: '二级 2-1'
},
{
id: 6,
parentId: 2,
selected: false,
label: '二级 2-2'
}
]
}
],
selecteds: '', // 全选按钮是否选中
menuData: [], // 数据的二维数组形式
curParentId: '', // 当前选中节点的父id
childrenArr: [] // 当前选中节点的孩子数组
}
},
mounted () {
this.treeToArr(this.listTreeData)
},
methods: {
// 把树结构的数据变成二维数组
treeToArr (data) {
data.forEach((item) => {
this.menuData.push(item)
if (item.children && item.children.length > 0) {
this.treeToArr(item.children)
}
})
},
// 全选复选框
checkAllIn () {
this.$refs.multipleTable.data.forEach((items) => {
this.$set(items, 'selected', this.selecteds)
if (items.children && items.children.length > 0) {
this.deepCheck(items.children, this.selecteds)
}
})
},
// 递归查找符合条件的数据
deepCheck (data, val) {
data.forEach((item) => {
this.$set(item, 'selected', val)
if (item.children && item.children.length > 0) {
this.deepCheck(item.children, val)
}
})
},
// 处理树表中子带父的情况
handlerSonToParent (row) {
if (this.curParentId !== row.parentId) {
this.childrenArr.length = 0
this.menuData.forEach((item) => {
if (item.parentId === row.parentId) {
this.childrenArr.push(item)
}
})
}
this.curParentId = row.parentId
const filter = this.childrenArr.filter((i) => i.selected)
if (filter.length === this.childrenArr.length) {
this.menuData.forEach((item) => {
if (item.id === this.curParentId) {
this.$set(item, 'selected', true)
}
})
} else {
this.menuData.forEach((item) => {
if (item.id === this.curParentId) {
this.$set(item, 'selected', false)
}
})
}
},
// 复选框触发的事件
checkChange (row) {
// 父选子的情况
if (row.children) {
if (row.selected) {
row.children.forEach((item) => {
this.$set(item, 'selected', true)
if (item.children && item.children.length > 0) {
this.deepCheck(item.children, true)
}
})
this.$set(row, 'selected', true)
} else {
row.children.forEach((item) => {
this.$set(item, 'selected', false)
if (item.children && item.children.length > 0) {
this.deepCheck(item.children, false)
}
})
}
}
// 子带父的情况
if (row.selected) {
this.handlerSonToParent(row)
} else {
this.handlerSonToParent(row)
}
}
}
}
</script>
<style>
</style>
说明：代码中的数据以及字段可根据实际情况修改，此处仅作为例子参考。