在使用element-plus表格的时候为了数据的美观性,需要将单元格合并,此代码严格来说只能算是行合并,这个代码的好处就是不会因为合并导致数据的列串了
效果图
接下来是代码,使用了setup语法糖
<script setup>
import { ref } from "vue";
//模拟数据
const data = ref([
{
id: 1,
column1: "合并列",
column2: "测试数据1",
column3: "测试数据2",
},
{
id: 2,
column1: "合并列",
column2: "测试数据3",
column3: "测试数据4",
},
{
id: 3,
column1: "合并列1",
column2: "测试数据5",
column3: "测试数据6",
},
{
id: 4,
column1: "合并列2",
column2: "测试数据7",
column3: "测试数据8",
},
{
id: 5,
column1: "合并列2",
column2: "测试数据9",
column3: "测试数据10",
},
{
id: 6,
column1: "合并列2",
column2: "测试数据11",
column3: "测试数据12",
},
{
id: 7,
column1: "合并列2",
column2: "测试数据13",
column3: "测试数据14",
},
]);
//合并函数
//根据column1的值是否一致合并行并将数据上下居中
function merge({ rowIndex, columnIndex }) {
//根据列索引判断是否需要合并
// 1为第一列 可向后拼接(从0开始),即2是第三列
if (columnIndex === 1) {
const currentRow = data.value[rowIndex];
const rowCount = data.value.filter(
(item) => item.column1 === currentRow.column1
).length;
const firstIndex = data.value.findIndex(
(item) => item.column1 === currentRow.column1
);
//如果当前行索引等于第一个索引,则合并行
if (rowIndex === firstIndex) {
//返回合并行的范围
return {
rowspan: rowCount,
colspan: 1,
};
//否则返回不合并
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
return {
rowspan: 1,
colspan: 1,
};
}
<script>
<!-- :span-method="merge" 调用函数 -->
<el-table
align="center"
:data="data"
border
style="width: 100%"
:span-method="merge"
>
<el-table-column label="ID" align="center" width="150" prop="id" />
<el-table-column
label="合并列"
align="center"
width="150"
prop="column1"
/>
<el-table-column label="值" align="center" width="150" prop="column2" />
<el-table-column label="值" align="center" width="150" prop="column3" />
</el-table>