在页面load的时候,对表格渲染的数据进行处理:(这里我穿了两个参数,一个是需要合并的数组,一个是表格行的字段属性。)可以理解成对数组进行标记。
const getSpanArr = (data: any[], name: string) => {
for (let i = 0; i < data?.length; i++) {
if (i === 0) {
spanArr.value.push(1);
pos.value = 0;
} else {
if (data[i][name] === data[i - 1][name]) {
spanArr.value[pos.value] += 1;
spanArr.value.push(0);
} else {
spanArr.value.push(1);
pos.value = i;
}
}
}
};
调用:(这里我传了两个参数,productTable是我表格绑定的数据,title是我要合并的行。)
const load = async () => {
getSpanArr(productTable.value, "title");
};
对表格渲染的数据处理好后,开始计算每一行的每一列他需要占的行数,并记录下拉(我这里传了个参数,是表格的第几列需要合并,可以传一个数组)
const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {
if (columnIndexArray.includes(A.columnIndex)) {
const _row = spanArr.value[A.rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
};
最后,在el-table中使用 :span-method="((A:any) => objectSpanMethod({ A }, [0, 5])) as any"
<el-table
border
:data="cartTable"
:span-method="((A:any) => objectSpanMethod({ A }, [0, 5])) as any"
>
封装好的代码::
import { ref } from "vue";
export function spanTableRow() {
const spanArr = ref<number[]>([]);
const pos = ref();
const getSpanArr = (data: any[], name: string) => {
for (let i = 0; i < data?.length; i++) {
if (i === 0) {
spanArr.value.push(1);
pos.value = 0;
} else {
if (data[i][name] === data[i - 1][name]) {
spanArr.value[pos.value] += 1;
spanArr.value.push(0);
} else {
spanArr.value.push(1);
pos.value = i;
}
}
}
};
const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {
if (columnIndexArray.includes(A.columnIndex)) {
const _row = spanArr.value[A.rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
};
return {
getSpanArr,
objectSpanMethod,
};
}