首先先介绍1级数据的情况，一级数据即为后端返回的是一维对象数据，并不是树形结构，通过对象中的相同参数名，进行合并。
2.概念
1.首先我们要知道的知识点：
Element为我们提供了一个合并行或列的计算方法:span-method，该方法接收4个参数Function({ row, column, rowIndex, columnIndex })
row：当前行值,也就是tableData里的值
column：当前列的值,也就是tableData里的值
rowIndex：当前行的序号（从0开始）
columnIndex：当前列的序号（从0开始）
该方法return一个对象{rowspan，colspan}
rowspan：表示合并多少行
colspan：表示合并多少列
如果是(0,0)表示不展示这条数据
2.接着来理清我们的思路
我们这个需求需要实现的是合并列，如果是从0开始的话，我们需要的是合并第0、1、2、4列，其实我们会发现其中第0列和第4列合并的单元格时一致的，第1和2列合并的单元格是一致的。
那怎么知道我们需要合并的列数呢？那就需要通过返回的数据对其进行判断了，由数据推理可得，当id值一致时，表示是同一个产品，当project_id或者是acceptance_id相同时表示是同一个一级项目和允收标准。
3.实现
<template>
<div class="main-content">
<div class="filter-box">
<!-- 头部标题文件 -->
<div class="filter-header">
<div class="filter-header_title">
{{menuStr.title}}
</div>
<el-button type="success" class="operate-btn" size="small" @click="formModalFun()" icon="el-icon-plus">新增</el-button>
</div>
</div>
<div class="main-table">
<!-- 尾部表格部分 -->
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" v-loading.body="listLoading" class-name="tables" border>
<el-table-column prop="name" label="产品名称" align="center"></el-table-column>
<el-table-column prop="project_name" label="一级项目" align="center"></el-table-column>
<el-table-column prop="acceptance_name" label="允收标准" align="center"></el-table-column>
<el-table-column prop="config_name" label="二级项目" align="center"></el-table-column>
<el-table-column label="操作" width="160" align="center">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<el-button type="info" size="small" icon="el-icon-edit" :disabled="scope.row.disable_edit" @click="formModalFun(scope.row.id,scope.row)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="复制配置" placement="top">
<el-button type="info" size="small" icon="el-icon-copy-document" :disabled="scope.row.disable_edit" @click="copyConfigFun(scope.row.id,scope.row)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<el-button type="danger" size="small" icon="el-icon-delete" @click="deleteList(scope.row.id,scope.row.name)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], //用于存放每一行记录的合并数
spanArr2: [],
pos2: 0,
pos: 0,
tableData: [
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id1",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id2",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id3",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id4",
projects_detail_name: "二级项目名称",
},
{
id: "1",
config_name: "配置名称",
name: "商品名称1",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id5",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id1",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id2",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id1",
project_name: "一级项目名称",
acceptance_id: "1",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id3",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id4",
projects_detail_name: "二级项目名称",
},
{
id: "2",
config_name: "配置名称",
name: "商品名称2",
config_id: "配置id",
project_id: "一级项目id2",
project_name: "一级项目名称",
acceptance_id: "2",
acceptance_name: "允收标准名称",
projects_detail_id: "二级项目id5",
projects_detail_name: "二级项目名称",
},
],
};
},
mounted: function () {
tthis.getSpanArr(this.tableData);
},
methods: {
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 初始化【产品名称】存放每一行记录的合并数数组
this.spanArr.push(1);
this.pos = 0;
// 初始化【一级项目】存放每一行记录的合并数数组
this.spanArr2.push(1);
this.pos2 = 0;
} else {
// 【产品名称】
if (data[i].id === data[i - 1].id) {
// 若当前元素与上一个元素是否相同
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
// 【一级项目】
if (data[i].acceptance_id === data[i - 1].acceptance_id) {
// 若当前元素与上一个元素是否相同,则为数组添加0
this.spanArr2[this.pos2] += 1;
this.spanArr2.push(0);
} else {
this.spanArr2.push(1);
this.pos2 = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//【产品名称】和【操作】
// 如果是第0列或者第4列
if (columnIndex === 0 || columnIndex === 4) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
console.log("columnIndex", `rowspan:${_row} colspan:${_col}`);
return {
rowspan: _row,
colspan: _col,
};
}
//【一级项目】和【二级项目】
// 如果是第1列或者第2列
if (columnIndex === 1 || columnIndex === 2) {
const _row = this.spanArr2[rowIndex];
const _col = _row > 0 ? 1 : 0;
console.log("columnIndex", `rowspan:${_row} colspan:${_col}`);
return {
rowspan: _row,
colspan: _col,
};
}
},
deleteList(id, name) {
},
},
};
</script>
二。树形结构合并单元格
<template>
<el-container
style="
border: 1px solid #ccc;
border-radius: 5px;
background-color: #ffffff;
"
>
<el-row>
<!-- 测试表格 -->
<el-table
:data="tableData6"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
<el-table-column prop="gwsn" label="网关" width="180">
</el-table-column>
<el-table-column prop="dsPort" label="串口"> </el-table-column>
<el-table-column prop="dsName" label="仪表名称"> </el-table-column>
<el-table-column
prop="instrumentAddress"
label="仪表地址"
></el-table-column>
</el-table>
</el-row>
</el-container>
// 模拟后台返回的假数据
getTable() {
this.tableData6 = [
{
gwsn: "Anet",
meterUseInfos: [
{
dsPort: "com1",
dsName: [
{ name: "1#" },
{ name: "局放" },
{ name: "噪声传感器1" },
{ name: "噪声传感器2" },
{ name: "烟感1" },
],
instrumentAddress: [
{ address: "1" },
{ address: "2" },
{ address: "3" },
{ address: "4" },
{ address: "5" },
],
},
{
dsPort: "com2",
dsName: [{ name: "三层北" }, { name: "二层南" }],
instrumentAddress: [{ address: "6" }, { address: "7" }],
},
],
time: "2020-11-30 13:00:00",
},
];
this.getIndex();
},
// 测试表格
getIndex() {
let arr = [];
let s = 0;
let table = this.tableData6;
let getTable = [];
table.forEach((item, i, data) => {
window.count = item.meterUseInfos.length;
if (arr.length) {
s = arr[arr.length - 1].row + data[i - 1].meterUseInfos.length;
}
arr.push({
row: s,
index: item.meterUseInfos.length,
});
//遍历遇到哪级出现了数组就遍历
if (item.meterUseInfos && item.meterUseInfos.length) {
item.meterUseInfos.forEach((comItem, index1) => {
if (comItem.dsName && comItem.dsName.length) {
comItem.dsName.forEach((subItem, index2) => {
getTable.push({
gwsn: item.gwsn,
dsPort: comItem.dsPort,
dsName: subItem.name,
count: item.meterUseInfos[index1].dsName.length,
instrumentAddress:
item.meterUseInfos[index1].instrumentAddress[index2]
.address,
});
});
}
});
}
});
this.arr = arr;
this.tableData6 = getTable;
},
//合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// console.log(window.count);
// console.log(this.rowIndex);
console.log(columnIndex);
let dsPortFixed = this.tableData6[0].dsPort;
if (columnIndex === 0) {
if (rowIndex % this.tableData6.length === 0) {
return {
rowspan:
dsPortFixed == row.dsPort
? this.tableData6.length + 1
: this.tableData6.length,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
} else {
if (columnIndex === 1) {
if (rowIndex % 5 === 0) {
return {
rowspan: 5, // 此方法此处的有问题，无法适应多数动态的数据，建议使用第一种，普适性强！！！ 喜欢
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
}
},
?
