el-table——可合并单元格的表格
阅读原文时间:2023年07月10日阅读:3
<el-table  
  v-loading="loading"  
  :data="tableData"  
  border  
  :span-method="colSpanMethod"  
> </el-table>  

//需要的合并效果:data
spanArrs: {
amount1: [], // 合并单元格的参数
amount2: []
}

    const amount2 = this.getSpanArr(tableData, 'amount2')

    const spanArrs = {

      // amount1:amount1,

      amount2: amount2

    }

// 合并列函数:methods
colSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (this.spanArrs[column.property] && columnIndex < 1) { // const _row = this.spanArrs[column.property][rowIndex] const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
},
// 计算合并个数:key代表需要合并的参数
getSpanArr (data, key) {
let spanArr = []
let spanIndex = null
if (data == null) {
return []
} else {
for (let i = 0; i < data.length; i++) { if (i === 0) { spanArr.push(1) spanIndex = 0 } else { if (data[i][key] === data[i - 1][key]) { spanArr[spanIndex] += 1 spanArr.push(0) } else { spanArr.push(1) spanIndex = i } } } return spanArr } }, // 排序:可以让后台返回排序后的内容,避免合并后内容不对应 sortBy (attr, rev) { if (!rev) { rev = 1 } else { rev = (rev) ? 1 : -1 } return function (a, b) { a = a[attr].toLowerCase() b = b[attr].toLowerCase() if (a < b) { return rev * -1 } if (a > b) {
return rev * 1
}
return 0
}
},