最近在做一个关于数据填报的项目，在做的过程中遇到了好多比较复杂的表格需要处理，先看原型图：
第一眼看到这个表格的时候就觉得，这个用element-ui肯定实现不了，只能用html中的Table去实现，这个表格不只一个静态展示，还有很多数据的交互，如果用html中的Table去实现的话会非常复杂，数据联动也很麻烦。所以就想着去找其他框架去实现它，度娘上找了一圈，也没有发现一个合适的框架。直到一个伙伴给了肯定的答案："这种表格element-ui中的table组件就可以实现啊~~~~~~"
刚开始看到这种表格，在想是不是它的数据结构会层层嵌套，然后循环便利实现的，后来自己尝试着模拟了几条数据后发现走不通，后来想到了element-ui table中自带的跨行 跨列的属性，于是开始尝试
话不多说，一步一步的来~~
首先忽略表格的跨行跨列，就按照element-ui正常的表格去实现，有几列就写几个el-table-column,开始写静态
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
数据如下：
[
{
"id": "1671122087890698240",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "xx省",
"tradeName": "长协",
"dataName": "量",
"m1": 11111,
"m2": 11111111,
"m3": 1111111111111111,
"m4": 11111,
"m13": 1111111122244444,
"orderNumber": 0,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698241",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "xx省",
"tradeName": "长协",
"dataName": "价",
"m1": 111111111,
"m2": 1111111111,
"m3": 1111111111,
"m4": 1111111,
"m13": 1111111110.98,
"orderNumber": 1,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698242",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "xx省",
"tradeName": "月前",
"dataName": "量",
"m1": 111111,
"m13": 111111,
"orderNumber": 2,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698243",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "xx省",
"tradeName": "月前",
"dataName": "价",
"m1": 111,
"m2": 1,
"m13": 111,
"orderNumber": 3,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698240",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "售电公司",
"tradeName": "长协",
"dataName": "量",
"m1": 11111,
"m2": 11111111,
"m3": 1111111111111111,
"m4": 11111,
"m13": 1111111122244444,
"orderNumber": 0,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698241",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "售电公司",
"tradeName": "长协",
"dataName": "价",
"m1": 111111111,
"m2": 1111111111,
"m3": 1111111111,
"m4": 1111111,
"m13": 1111111110.98,
"orderNumber": 1,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698242",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "售电公司",
"tradeName": "月前",
"dataName": "量",
"m1": 111111,
"m13": 111111,
"orderNumber": 2,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
{
"id": "1671122087890698243",
"infoDate": "2023-01-01",
"orgId": "102308",
"scopeName": "售电公司",
"tradeName": "月前",
"dataName": "价",
"m1": 111,
"m2": 1,
"m13": 111,
"orderNumber": 3,
"createBy": "0",
"createTime": "2023-06-21 17:34:09"
},
]
现在实现的是一个最原始的表格
接下来我们尝试把第一列中所有显示xx省的合并为1个格，所有显示xx公司的合并为1个格
思路就是看一下tableData中有几个xx省和xx公司，给它计数，然后把计数的属性名和属性值添加到xx省和xx公司的第一行数据中
代码如下：
getCount() {
//计算xx省 和 xx公司的数量
this.tableData.forEach((item) => {
if (item.scopeName == "xx省") {
this.countSheng++;
}
if (item.scopeName == "xx公司") {
this.countDL++;
}
});
//把计算的数量添加到 tableData中
this.$set(this.tableData[0], "count", this.countSheng);
this.$set(
this.tableData[this.tableData.length - this.countDL],
"countD",
this.countDL
);
},
接下来使用el-table中的:span-method="spanMethod" 方法
spanMethod({ row, column, rowIndex, columnIndex }) {
// 第一列
if (columnIndex === 0) {
if (row.count && row.scopeName == "xx省") {
return [this.countSheng, 1];
} else if (row.countD && row.scopeName == "xx公司") {
return [this.countDL, 1];
} else {
// alert(11)
return [0, 0];
}
},
//第二列
if (columnIndex === 1) {
if (
(row.tradeName == "月前" && row.dataName == "量") ||
(row.tradeName == "长协" && row.dataName == "量") ||
(row.tradeName == "月内" && row.dataName == "量") ||
(row.tradeName == "小计" && row.dataName == "量") ||
(row.tradeName == "历史同期" && row.dataName == "量")
) {
return [2, 1];
} else {
return [0, 0];
}
}
},
最后效果：
整体代码没有进行任何封装，代码简单易懂，如果有其他更好的方法欢迎留言
