效果:点击第一列的某一项,展开第二列;点击第二列的某一项,展开第三四列
<template>
<div>
<h1>动态表格</h1>
<div class="two-table">
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="180">
<template slot-scope="scope">
<a href="#" @click="cancelDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.id}}</a>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<a v-if="scope.row.nameFlag == 1" href="#" @click="addSecondDialog(scope.row)" style="color:blue;cursor:pointer">{{scope.row.name}}</a>
<div v-if="scope.row.nameFlag != 1" >{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="amount1" label="数值 1(元)"></el-table-column>
<el-table-column prop="amount2" label="数值 2(元)"></el-table-column>
<el-table-column prop="amount3" label="数值 3(元)"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>export default {
data() {
return {
// 当前行是否已展开
containsId: [],
containsIdAndName: [],
addData: [
{
id: "12987122",
name: "王大虎第二级1",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王大虎第二级2",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
],
addSecondData: [
{
id: "12987122",
name: "王大虎111111111",
amount1: "111",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王大虎1",
amount1: "222",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王大虎1",
amount1: "333",
amount2: "3.2",
amount3: 10,
}
],
// 模拟后台返回数据
tableData: [
{
id: "12987122",
name: "王大虎1",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "129871221",
name: "王大虎2",
amount1: "165",
amount2: "4.43",
amount3: 12,
},
{
id: "129871222",
name: "王二虎3",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
id: "12987123",
name: "王二虎4",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "12987124",
name: "王小虎5",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
{
id: "12987125",
name: "王小虎6",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
// 需要合并项的列
needMergeArr: [
{
colName: "id",
mergeCheckNames: ["id"],
},
{
colName: "name",
// mergeCheckNames: ["id", "name"],
mergeCheckNames: ["id", "name"],
},
],
rowMergeArrs: {}, // 包含需要一个或多个合并项信息的对象
};
},
methods: {
arraySpanMethod({row, column, rowIndex, columnIndex}) {
let needMerge = this.needMergeArr.some((item) => {
return item.colName === column.property;
});
if (needMerge === true) {
return this.mergeAction(column.property, rowIndex, column);
}
},
mergeAction(val, rowIndex, colData) {
let _row = this.rowMergeArrs[val].rowArr[rowIndex];
let _col = _row > 0 ? 1 : 0;
return [_row, _col];
},
rowMergeHandle(arr, data) {
if (!Array.isArray(arr) && !arr.length) return false;
if (!Array.isArray(data) && !data.length) return false;
let needMerge = {};
arr.forEach((mergeItem) => {
// 创建合并管理对象
needMerge[mergeItem.colName] = {
rowArr: [],
rowMergeNum: 0,
};
let currentMergeItemData = needMerge[mergeItem.colName];
// 进行合并管理对象数据的遍历整理
data.forEach((item, index) => {
if (index === 0) {
currentMergeItemData.rowArr.push(1);
currentMergeItemData.rowMergeNum = 0;
} else {
let currentRowData = data[index];
let preRowData = data[index - 1];
if (this.colMergeCheck(currentRowData, preRowData, mergeItem.mergeCheckNames)) {
currentMergeItemData.rowArr[currentMergeItemData.rowMergeNum] += 1;
currentMergeItemData.rowArr.push(0);
} else {
currentMergeItemData.rowArr.push(1);
currentMergeItemData.rowMergeNum = index;
}
}
});
});
return needMerge;
},
colMergeCheck(currentRowData, preRowData, mergeCheckNames) {
if (!Array.isArray(mergeCheckNames) && !mergeCheckNames.length) return false;
let result = true;
for (let index = 0; index < mergeCheckNames.length; index++) {
const mergeCheckName = mergeCheckNames[index];
if (currentRowData[mergeCheckName] !== preRowData[mergeCheckName]) {
result = false;
break;
}
}
return result;
},
//单元格整行点击事件
cancelDialog (row) {
debugger
// 当前行已展开,不在执行
if (this.containsId.includes(row.id)) {
return;
}
// 模拟后端接口返回数据
// this.addData
for (let i = 0; i < this.tableData.length; i++) {
if (row.id == this.tableData[i].id) {
for (let j = 0; j < this.addData.length; j++) {
var data = {};
Object.assign(data, this.addData[j])
data.id = row.id;
data.nameFlag = 1;
this.tableData.splice(i+1, 0,
data);
}
this.containsId.push(row.id);
break;
}
}
// 处理数据,如有分页需要,此行放在加载数据成功之后
this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
},
// 第二级点击
addSecondDialog (row) {
debugger
// 当前行已展开,不在执行
if (this.containsIdAndName.includes(row.id + row.name + "")) {
return;
}
// 模拟后端接口返回数据
// this.addData
for (let i = 0; i < this.tableData.length; i++) {
if (row.id == this.tableData[i].id && row.name == this.tableData[i].name) {
for (let j = 0; j < this.addSecondData.length; j++) {
var data = {};
Object.assign(data, this.addSecondData[j])
data.name = row.name;
this.tableData.splice(i+1, 0,
data);
}
this.containsIdAndName.push(row.id + row.name + "");
break;
}
}
// 处理数据,如有分页需要,此行放在加载数据成功之后
this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
},
},
mounted() {
// 处理数据,如有分页需要,此行放在加载数据成功之后
this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
},
};
</script>