需求 比如:
个人查看element-plus文档,去结合使用 [链接](Table 表格 | Element Plus (element-plus.org))
element文档中有“合并行或列”的例子: 多行或多列共用一个数据时,可以合并行或列。
通过给 table 传入span-method
方法可以实现合并行或列, 方法的参数是一个对象,里面包含当前行 row
、当前列 column
、当前行号 rowIndex
、当前列号 columnIndex
四个属性。 该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan
,第二个元素代表 colspan
。 也可以返回一个键名为 rowspan
和 colspan
的对象;
话不多说,上代码!
import type { TableColumnCtx } from 'element-plus';
//举例数据格式
const data = [
{
userName: "营业收费系统",
value1: "中国农业银行",
value2: "2022-03",
detectionTime: "2022-03-04",
},
{
userName: "营业收费系统",
value1: "中国农业银行",
value2: "2022-03",
detectionTime: "2022-03-04",
},
{
userName: "营业收费系统",
value1: "中国农业银行",
value2: "2022-03",
detectionTime: "2022-03-04",
},
{
userName: "营业收费系统",
value1: "中国农业银行",
value2: "2022-03",
detectionTime: "2022-03-04",
}
];
//需要判断的属性组
const spanProps = ['userName', 'detectionTime'];
let rowSpansMap = new Map(); //存需要开始合并的行号,向下合并多少行
/**
* 根据列表数据得出需要合并的行
* @param data 列表数据
*/
const spanPropGroup = (data: any) => {
let oldRow: any = null; //需要合并的行
rowSpansMap = new Map(); //重置Map
oldRow = data[0]; //默认第0行为需要合并的行
rowSpansMap.set(0, 1); //第0行,向下合并一行(其实就是自己单独一行)
let spanRow = 0; //记录需要开始合并的行号
for (let i = 1; i < data.length; i++) {
const item = data[i];
let isSame = true;
//遍历需要判断的属性判断对应值是否全部相等
for (let j = 0; j < spanProps.length; j++) {
const prop = spanProps[j];
//只要有一个属性值不相等则记录新的需要合并的行号
if (item[prop] != oldRow[prop]) {
oldRow = item;
rowSpansMap.set(i, 1);
spanRow = i;
isSame = false;
break;
}
}
//如果所有属性值相同则所需要合并的行数+1
if (isSame) {
let span = rowSpansMap.get(spanRow);
rowSpansMap.set(spanRow, span + 1);
}
}
};
const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }) => {
//采样值1-5列所对应的行不需要合并
if (columnIndex != 3 && columnIndex != 4) {
//根据当前行号从map中获取开始合并的行根据当前行号从map中获取开始合并的行号,向下合并多少行
const span = rowSpansMap.get(rowIndex);
if (span != null) {
return {
rowspan: span, //向下合并span行
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
};
//进行传递数据
spanPropGroup(data);
<template>
<el-table
:data="data"
border
:span-method="objectSpanMethod"
>
<el-table-column type="selection" width="55" />
<el-table-column label="#" width="60" prop="">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column
label="指标组合名称"
align="center"
prop="userName"
show-overflow-tooltip
/>
<el-table-column
label="已使用使用指标"
align="center"
prop="value1"
show-overflow-tooltip
/>
<el-table-column
label="权重"
align="center"
prop="value2"
show-overflow-tooltip
/>
<el-table-column
label="计算状态"
align="center"
prop="detectionTime"
show-overflow-tooltip
/>
<el-table-column label="操作" width="160" resizable>
<template #default="scope">
<el-buttontype="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
这样的效果就达到想要的需求了,细心观察一下代码!