Vue3写法 指定列进行合并
使用el-table官方文档在表格中增加span-method方法
<template>
<el-table
:span-method="objectSpanMethod"
>
</el-table>
</template>
js部分vue3写法
export default {
setup(){
const state = reactive({
data:[
{value:"香香",lable:"1"},
{value:"香香",lable:"2"},
{value:"香香",lable:"3"}
],
posArr: [],
pos: "",
});
// 合并方法
function search(){
state.posArr = [];
state.pos = "";
for (var i = 0; i < state.data.length; i++) {
if (i === 0) {
state.posArr.push(1);
state.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
const list = state.data;
if (list[i].lable === list[i - 1].lable) {
state.posArr[state.pos] += 1;
state.posArr.push(0);
} else {
state.posArr.push(1);
state.pos = i;
}
}
}
}
// 表格指定列合并
function objectSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex == 0) {
const _row = state.posArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
}
}
}