Use el-table in Vue to implement multiple selection when there are children
Preface:
Element's el-form form provides two functions:
1. Multi-selection (manually add an el-table-column, just set the type attribute to selection)
2. Tree-shaped data function (when the row contains the children field , is regarded as tree data. When rendering tree data, row-key must be specified. Supports asynchronous loading of child node data)
However, element does not specifically combine these two functions. This article combines the two functions. For one.
1. Case
Put the picture directly
2. Usage steps
1. Import the library
Introduce the ElementUI component into main.js:
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2. Use el-form
Use el-form in code that requires a form. The code is as follows (example):
template data
<template>
<el-table
ref="tableRef"
:data="tableData"
@select="rowSelect"
@select-all="selectAll"
@selection-change='selectChange'
row-key="uuid"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
max-height="400"
>
<el-table-column :reserve-selection="true" type="selection" width="50" align="center"></el-table-column>
<el-table-column prop="id" label="序号" width="200"></el-table-column>
<el-table-column prop="tel" label="号码"></el-table-column>
<el-table-column prop="createTime" label="创建时间">
<template slot-scope="props">
<span>{
{
props.row.createTime}}</span>
</template>
</el-table-column>
</el-table>
</template>
script data
<script>
export default {
data() {
return {
tableData: [ // 库中的音频
{
id: 1,
uuid: 1,
tel: '13888888888',
createTime: '2022/06/25 18:24:15',
children: [
{
uuid: 11,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
{
uuid: 12,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
{
uuid: 13,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
]
},
{
id: 2,
uuid: 2,
tel: '13888888888',
createTime: '2022/06/25 18:24:15',
children: [
{
uuid: 21,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
{
uuid: 22,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
{
uuid: 23,
tel: '我是音频名称.MP4',
createTime: '2022/06/25 18:24:15',
},
]
}
]
}
},
methods:{
// 修改选中状态
toggleSelection(rows, flag){
if(rows){
rows.forEach(row => {
this.$refs.tableRef.toggleRowSelection(row, flag)
} )
}else {
this.$refs.tableRef.clearSelection()
}
},
// 选择行
rowSelect(selection, row) {
if(this.chooseNum == 'one'){
// 单选
// selection.indexOf(row)为-1则是取消，其他则为选中
if(selection.length > 0){
for(let i = 0; i < selection.length; i++){
if(selection[i].children){
var isOne = false
selection[i].children.filter(item => {
if(item.uuid == row.uuid){
// 当前选中的子和已选的是同一个父
isOne = true
}
})
if(!isOne){
this.$refs.tableRef.clearSelection()
this.$refs.tableRef.toggleRowSelection(row, true)
}
}
}
}
}
// selection.indexOf(row)为-1则是取消，其他则为选中
// 选中父,则所有的子也被选中
if (selection.indexOf(row) > -1 && row.children) {
this.toggleSelection(row.children, true);
}
// 取消父,则所有的子也被取消
if (selection.indexOf(row) === -1 && row.children) {
this.toggleSelection(row.children, false);
}
// 选中子，父也被选中
if (selection.indexOf(row) > -1 && !row.children) {
for(let i = 0; i < this.tableData.length; i++){
this.tableData[i].children.filter(item => {
if (item.uuid === row.uuid) {
this.$refs.tableRef.toggleRowSelection(this.tableData[i], true)
}
});
}
}
// 取消子，父的子如果全被取消，父也被取消
if (selection.indexOf(row) === -1 && !row.children) {
var k = -1, isAllChoose = false
// 找到父组件
for(let i = 0; i < this.tableData.length; i++){
this.tableData[i].children.filter(item => {
if (item.uuid === row.uuid) {
k = i
}
});
}
for(let j = 0; j < this.tableData[k].children.length; j++){
// 当前的父 还有子没被取消
if(selection.indexOf(this.tableData[k].children[j]) != -1){
isAllChoose = true
}
}
if(!isAllChoose){
this.$refs.tableRef.toggleRowSelection(this.tableData[k], false)
}
}
},
// 全选
selectAll(selection) {
var flag = false; // 默认 为全不选
selection.forEach(item => {
if (item.children) {
flag = true;
this.toggleSelection(item.children, true);
}
});
if (!flag) {
this.toggleSelection();
}
},
selectChange(val){
console.log(val);
},
},
}
</script>
Summarize
1. Start with the select method of el-table to make judgments about the selection and cancellation of father and son.2. Start with the select-all method of el-table to cancel all check options.