Renderings:
code part:
<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>Select All</span>
<the-checkbox
v-model="selecteds"
style="padding-left: 10px"
@change="checkAllIn(scope)"
/>
</template>
<template slot-scope="scope">
<the-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: 'Level 1',
parentId: 0,
selected: false,
children: [
{
id: 4,
label: 'Level 1-1',
parentId: 1,
selected: false,
children: [
{
id: 9,
parentId: 4,
selected: false,
label: 'Level 3 1-1-1'
},
{
id: 10,
parentId: 4,
selected: false,
label: 'Level 3 1-1-2'
}
]
},
{
id: 7,
parentId: 1,
selected: false,
label: 'Level 1-2'
}
]
},
{
id: 2,
label: 'level 2',
parentId: 0,
selected: false,
children: [
{
id: 5,
parentId: 2,
selected: false,
label: 'Level 2-1'
},
{
id: 6,
parentId: 2,
selected: false,
label: 'Secondary 2-2'
}
]
}
],
selected: '', // Whether the select all button is selected
menuData: [], // two-dimensional array form of data
curParentId: '', // parent id of the currently selected node
childrenArr: [] // array of children of the currently selected node
}
},
mounted () {
this.treeToArr(this.listTreeData)
},
methods: {
// Turn the tree-structured data into a two-dimensional array
treeToArr (data) {
data.forEach((item) => {
this.menuData.push(item)
if (item.children && item.children.length > 0) {
this.treeToArr(item.children)
}
})
},
// select all checkboxes
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)
}
})
},
// Recursively find the eligible data
deepCheck (data, val) {
data.forEach((item) => {
this.$set(item, 'selected', val)
if (item.children && item.children.length > 0) {
this.deepCheck(item.children, val)
}
})
},
// Handle the case where the child has a parent in the tree table
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)
}
})
}
},
// event triggered by the checkbox
checkChange (row) {
// The case where the parent chooses the child
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)
}
})
}
}
// The case where the child takes the parent
if (row.selected) {
this.handlerSonToParent(row)
} else {
this.handlerSonToParent(row)
}
}
}
}
</script>
<style>
</style>
Note: The data and fields in the code can be modified according to the actual situation, and this is only used as an example for reference.