Vue中使用el-table表格在有children的情况下实现多选
前言：
element的el-form表单提供了两个功能：
1、多选（手动添加一个el-table-column，设type属性为selection即可）
2、树形数据功能（当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载）
但是这两个功能，element没有专门将其合，本文章就是将两个功能合二为一。
一、案例
直接放上图
二、使用步骤
1.引入库
在main.js中引入ElementUI组件：
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2.使用el-form
在需要表单的代码中使用el-form，代码如下（示例）：
template的数据
<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的数据
<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>
总结
1、从el-table的select方法着手，对父子的选中和取消做判断2、从el-table的select-all方法着手，用于取消全部的勾选项