dom结构
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
data定义
data() {
return {
spanArr: [] // 合并表格
rowCols: ['DLLX_Text'], // 相同需要合并的字段
}
},
methods方法
methods: {
// 获取数据 并且处理
getData() {
this.spanArr = mergeTableRow(
this.opts.tableList,
this.rowCols
)
}
// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let index = this.rowCols.findIndex((v) => v === column.property)
if (index !== -1 && column.property === this.rowCols[index]) {
if (index === -1) {
index = 0
}
const _row = this.spanArr[index][rowIndex]
const _col = _row ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
}
合并方法
// table 表格合并 通用方法
// list table数据
// arr 需要合并的数据列的 prop 数组
const mergeTableRow = (list, arr) => {
let pos = 0
const len = []
const spanArr = []
arr.forEach((col, cIndex) => {
// 列 第几需要合并的个元素
const rows = []
list.forEach((row, rIndex) => {
// 多少行数据 最大可合并行数
if (!cIndex) {
len.push(1)
}
if (!rIndex) {
rows.push(1)
pos = rIndex
} else {
// 是否与上一行 元素值相同
if (list[rIndex][col] === list[rIndex - 1][col]) {
rows[pos] += 1
rows.push(0)
// 更新第一个元素相同值的个数
if (!cIndex) {
len[rIndex] = rows[pos]
}
// 超出最大个数 重新赋值
if (rows[pos] > len[rIndex]) {
rows[pos] -= 1
pos = rIndex
rows[pos] += 1
}
} else {
rows.push(1)
pos = rIndex
}
}
})
spanArr.push(rows)
})
return spanArr
}