转载自https://blog.csdn.net/qq_42657934/article/details/134944028
列表数据
// 列表数据
export const columns: BasicColumn[] = [
{
title: '阶段',
align: 'center',
dataIndex: 'projectStage',
},
{
title: '类别',
align: 'center',
dataIndex: 'emissionsType',
},
....
]
js文件定义表格单元格合并公共方法
// 表格合并
export const getSpanArr = (tableData, itemProperty) => {
if (tableData.length === 0) {
return false;
}
const spanArr = [];
let pos;
for (let i = 0; i < tableData.length; i++) {
if (i === 0) {
spanArr.push(1);
pos = 0;
} else {
// 判断当前元素与上一个元素是否相同 相同则加 1
if (tableData[i][itemProperty] && tableData[i][itemProperty] === tableData[i - 1][itemProperty]) {
spanArr[pos] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
pos = i;
}
}
}
return spanArr;
};
组件界面引入
import { ref, computed } from 'vue';
import { getSpanArr } from './jsfile.fun.js';
import { columns } from './jsfile.data.js';
// 表格列设置单元格合并
const newColumns = computed(() => {
// 获取表格数据
const tableDataSource = getDataSource();
// 设置需要合并的列
const needTomergeColumnsIndex = ['projectStage', 'emissionsType'];
let newColumnsData = columns.map((item) => {
if (needTomergeColumnsIndex.includes(item.dataIndex)) {
// 计算合并单元格数量
const spanArr = getSpanArr(tableDataSource, item.dataIndex);
item.customCell = (record, rowIndex, column) => {
// 设置单元格合并数量
return { rowSpan: spanArr[rowIndex] };
};
}
return item;
});
return newColumnsData;
});
还可以这样写