Demo
githup地址
核心方法
elTable對于合并行和合并列提供了span-method方法。
/**
* 參數(shù)：row：當(dāng)前行撞叨； column：當(dāng)前列金踪； rowIndex：當(dāng)前行號(hào)；columnIndex：當(dāng)前列號(hào)牵敷；
* 返回值：rowspan colspan：表格中的標(biāo)題和單元格的屬性热康， 這兩個(gè)屬性接受一個(gè)沒有單位的數(shù)字值，數(shù)字決定了它們的寬度或高度是幾個(gè)單元格劣领。
*/
function span-method({ row, column, rowIndex, columnIndex }) {
return {
rowspan: '',
colspan: '',
}
}
行合并
未命名文件 (1).png
核心代碼
/**
* 合并行
* @param data 列表的每一行數(shù)據(jù)
* @param labelList 表頭數(shù)據(jù)集合
* @returns 返回值為一個(gè)二維數(shù)組姐军，對應(yīng)每一個(gè)表格元素的rowSpan值
*/
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游標(biāo)
let rowArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
labelList.forEach((item, index) => {
rowArr[index] = [];
for (let i = 0; i < data.length; i++) {
if (i == 0) {
// 第一行作為初始數(shù)據(jù)
rowArr[index][i] = 1;
poi = 0;
} else {
// 當(dāng)前行和前一行的item.prop值相同
if (data[i][item.prop] === data[i - 1][item.prop]) {
// 游標(biāo)對應(yīng)的結(jié)果數(shù)組值加1
rowArr[index][poi] += 1;
// 結(jié)果數(shù)組當(dāng)前項(xiàng)為0，即rowspan為0
rowArr[index].push(0);
} else { // 當(dāng)前行和前一行的item.prop值不相同
rowArr[index].push(1);
poi = i;
}
}
}
});
return rowArr
};
列合并
未命名文件 (2).png
核心代碼
/**
* 合并列
* @param data 列表的每一行數(shù)據(jù)
* @param labelList 表頭數(shù)據(jù)集合
* @returns 返回值為一個(gè)二維數(shù)組尖淘，對應(yīng)每一個(gè)表格元素的colSpan值
*/
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游標(biāo)
let columnArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
data.forEach((item, index) => {
columnArr[index] = [];
for (let i = 0; i < labelList.length; i++) {
if (i === 0) {
columnArr[index][i] = 1;
poi = 0;
} else {
// 當(dāng)前列和前一列的值相同
if (item[labelList[i].prop] === item[labelList[i - 1].prop]) {
columnArr[index][poi] += 1;
// 結(jié)果數(shù)組當(dāng)前項(xiàng)為0奕锌，即colspan為0
columnArr[index].push(0);
} else {
//當(dāng)前列和前一列的值不同
columnArr[index].push(1);
poi = i;
}
}
}
});
return columnArr
};
合并加條件限制
當(dāng)我們將合并行和合并列組合起來時(shí)得到效果和預(yù)期有點(diǎn)差異。
未命名文件 (6).png
條件限制代碼
1.定義需要合并的行和列的字段
// 合并的行的prop字段
const mergeRow = ref({
school: true,
grade: true,
class: true,
});
// 合并的列的prop字段
const mergeColumn = ref({
scoreMath: true,
scoreChina: true,
scoreEnglish: true,
});
2.獲取合并行/合并列的函數(shù)中增加限制條件
const getRowArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游標(biāo)
let rowArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
labelList.forEach((item, index) => {
rowArr[index] = [];
for (let i = 0; i < data.length; i++) {
if (i == 0) {
// 第一行作為初始數(shù)據(jù)
rowArr[index][i] = 1;
poi = 0;
} else {
// 當(dāng)前行和前一行的item.prop值相同
if (data[i][item.prop] === data[i - 1][item.prop] && props.mergeRow && props.mergeRow[item.prop]) {
// 游標(biāo)對應(yīng)的結(jié)果數(shù)組值加1
rowArr[index][poi] += 1;
// 結(jié)果數(shù)組當(dāng)前項(xiàng)為0村生，即rowspan為0
rowArr[index].push(0);
} else {
// 當(dāng)前行和前一行的item.prop值不相同
rowArr[index].push(1);
poi = i;
}
}
}
});
return rowArr;
};
const getColArr = (data: Array<tableDataIF>, labelList: Array<labelListIF>) => {
let poi: number = 0; // 游標(biāo)
let columnArr: Array<number[]> = []; // 結(jié)果數(shù)組 二維數(shù)組
data.forEach((item, index) => {
columnArr[index] = [];
for (let i = 0; i < labelList.length; i++) {
if (i === 0) {
columnArr[index][i] = 1;
poi = 0;
} else {
// 當(dāng)前列和前一列的值相同
if (item[labelList[i].prop] === item[labelList[i - 1].prop] && props.mergeColumn && props.mergeColumn[labelList[i].prop]) {
columnArr[index][poi] += 1;
// 結(jié)果數(shù)組當(dāng)前項(xiàng)為0惊暴，即colspan為0
columnArr[index].push(0);
} else {
//當(dāng)前列和前一列的值不同
columnArr[index].push(1);
poi = i;
}
}
}
});
return columnArr;
};
未命名文件 (5).png
