Demo
githup地址
核心方法
elTable对于合并行和合并列提供了span-method方法。
/**
* 参数：row：当前行； column：当前列； rowIndex：当前行号；columnIndex：当前列号；
* 返回值：rowspan colspan：表格中的标题和单元格的属性， 这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。
*/
function span-method({ row, column, rowIndex, columnIndex }) {
return {
rowspan: '',
colspan: '',
}
}
行合并
未命名文件 (1).png
核心代码
/**
* 合并行
* @param data 列表的每一行数据
* @param labelList 表头数据集合
* @returns 返回值为一个二维数组，对应每一个表格元素的rowSpan值
*/
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游标
let rowArr: Array<number[]> = []; // 结果数组 二维数组
labelList.forEach((item, index) => {
rowArr[index] = [];
for (let i = 0; i < data.length; i++) {
if (i == 0) {
// 第一行作为初始数据
rowArr[index][i] = 1;
poi = 0;
} else {
// 当前行和前一行的item.prop值相同
if (data[i][item.prop] === data[i - 1][item.prop]) {
// 游标对应的结果数组值加1
rowArr[index][poi] += 1;
// 结果数组当前项为0，即rowspan为0
rowArr[index].push(0);
} else { // 当前行和前一行的item.prop值不相同
rowArr[index].push(1);
poi = i;
}
}
}
});
return rowArr
};
列合并
未命名文件 (2).png
核心代码
/**
* 合并列
* @param data 列表的每一行数据
* @param labelList 表头数据集合
* @returns 返回值为一个二维数组，对应每一个表格元素的colSpan值
*/
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游标
let columnArr: Array<number[]> = []; // 结果数组 二维数组
data.forEach((item, index) => {
columnArr[index] = [];
for (let i = 0; i < labelList.length; i++) {
if (i === 0) {
columnArr[index][i] = 1;
poi = 0;
} else {
// 当前列和前一列的值相同
if (item[labelList[i].prop] === item[labelList[i - 1].prop]) {
columnArr[index][poi] += 1;
// 结果数组当前项为0，即colspan为0
columnArr[index].push(0);
} else {
//当前列和前一列的值不同
columnArr[index].push(1);
poi = i;
}
}
}
});
return columnArr
};
合并加条件限制
当我们将合并行和合并列组合起来时得到效果和预期有点差异。
未命名文件 (6).png
条件限制代码
1.定义需要合并的行和列的字段
// 合并的行的prop字段
const mergeRow = ref({
school: true,
grade: true,
class: true,
});
// 合并的列的prop字段
const mergeColumn = ref({
scoreMath: true,
scoreChina: true,
scoreEnglish: true,
});
2.获取合并行/合并列的函数中增加限制条件
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游标
let rowArr: Array<number[]> = []; // 结果数组 二维数组
labelList.forEach((item, index) => {
rowArr[index] = [];
for (let i = 0; i < data.length; i++) {
if (i == 0) {
// 第一行作为初始数据
rowArr[index][i] = 1;
poi = 0;
} else {
// 当前行和前一行的item.prop值相同
if (data[i][item.prop] === data[i - 1][item.prop] && props.mergeRow && props.mergeRow[item.prop]) {
// 游标对应的结果数组值加1
rowArr[index][poi] += 1;
// 结果数组当前项为0，即rowspan为0
rowArr[index].push(0);
} else {
// 当前行和前一行的item.prop值不相同
rowArr[index].push(1);
poi = i;
}
}
}
});
return rowArr;
};
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游标
let columnArr: Array<number[]> = []; // 结果数组 二维数组
data.forEach((item, index) => {
columnArr[index] = [];
for (let i = 0; i < labelList.length; i++) {
if (i === 0) {
columnArr[index][i] = 1;
poi = 0;
} else {
// 当前列和前一列的值相同
if (item[labelList[i].prop] === item[labelList[i - 1].prop] && props.mergeColumn && props.mergeColumn[labelList[i].prop]) {
columnArr[index][poi] += 1;
// 结果数组当前项为0，即colspan为0
columnArr[index].push(0);
} else {
//当前列和前一列的值不同
columnArr[index].push(1);
poi = i;
}
}
}
});
return columnArr;
};
未命名文件 (5).png
