在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用
/**
*
* @param {*} table vue对象, Element-ui Table 插件
* @param {*} colMap 数组, 需要合并的列名,如: ['c1','c2','c2']
* @param {*} isSpanRow 布尔,是否合并行
* @param {*} isSpanCol 布尔,是否合并列
* @returns 二维数组,Table的显示结果
*
* mergeCell(this.$refs.dTable, ['c1', 'c2', 'c3'], true, true)
*/
var mergeCell = function(table, colMap, isSpanRow = true, isSpanCol = true) {
var list = table.tableData
// table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序
// 即你不能知道第一列右则的列是那个.
// 需要通过table.columns建立显示的顺序
var columns = []
for (const item of table.columns) {
// console.log(item);
columns.push(item.property)
}
// 结果应是一个二维数组
// 先充填数据,使用其成为全显示的数组
var result = []
for (let row = 0, rowLen = list.length; row < rowLen; row++) {
const ss = []
for (let col = 0, colLen = columns.length; col < colLen; col++) {
ss.push([1, 1])
}
result.push(ss)
}
// 合并行
if (isSpanRow) {
result = mergeRow(list, columns, colMap, result)
// console.log(result);
}
// 合并列
if (isSpanCol) {
result = mergeCol(list, columns, colMap, result)
// console.log(result);
}
return result
}
var mergeRow = function(list, columns, colMap, result) {
for (const item of colMap) {
const p = {
colKey: item,
col: columns.indexOf(item),
row: 0,
val: ''
}
for (let row = 0, rowLen = list.length; row < rowLen; row++) {
if (p.val === list[row][p.colKey]) {
result[p.row][p.col][0] += 1
result[row][p.col][0] = 0
} else {
p.row = row
p.val = list[row][p.colKey]
}
}
}
return result
}
var mergeCol = function(list, columns, colMap, result) {
for (let row = 0, rowLen = list.length; row < rowLen; row++) {
const p = {
col: 0,
row: row,
val: ''
}
for (let col = 0, colLen = columns.length; col < colLen; col++) {
if (!colMap.includes(columns[col])) {
p.col = col
p.val = list[row][columns[col]]
continue
}
if (p.val === list[row][columns[col]]&&result[p.row][p.col][0]==result[p.row][col][0]) {
// console.log(result[row][col]);
result[p.row][p.col][1] += 1
result[p.row][col][1] = 0
} else {
p.col = col
p.val = list[row][columns[col]]
}
}
}
return result
}
export default mergeCell