Element UI el-table合并表格相同值行合并
Vue+Element UI el-table合并表格相同值行合并代码一export function formatRowspanAndColspan(tableData, tableKey) {const newArr = []// 分类检出tempList中的数据push到newArr中for (let i = 0; i < tableData.length;) {...
·
Vue+Element UI el-table合并表格相同值行合并
代码一
export function formatRowspanAndColspan(tableData, tableKey) {
const newArr = []
// 分类检出tempList中的数据push到newArr中
for (let i = 0; i < tableData.length;) {
let count = 0
for (let j = i; j < tableData.length; j++) {
if (tableKey === 'dataType') {
if (tableData[i].dataType === tableData[j].dataType) {
count++
}
}
}
if (tableKey === 'dataType') {
newArr.push({
data: tableData[i].dataType,
num: count
})
}
i += count
}
// 根据此算法,格式化newArr中的数据
for (let k = 0; k < newArr.length; k++) {
if (newArr[k].num > 1 || newArr[k].num === 0) {
for (let w = k; w < newArr[k].num + k - 1; w++) {
newArr.splice(w + 1, 0, {
data: newArr[k].data,
num: 0
})
}
}
}
return newArr
}
代码二
// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// columnIndex代表列,合并表格
const newArr = formatRowspanAndColspan(this.tableData, 'dataType')
// 合并第二列 日期(星期)
if (columnIndex === 2) {
const num = newArr[rowIndex].num
if (num > 1) {
return {
rowspan: num,
colspan: 1
}
} else if (num < 1) {
return {
rowspan: 1,
colspan: num
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)