使用el-table合并表格时,使用span-method方法进行合并,需要传递额外参数
span-method方法
默认原生的是这4个属性
当不传递参数时,具体实现代码
<el-table :data="tableData" :span-method="arraySpanMethod">
<!-- 省略 -->
</el-table>
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
但是当有如下的场景
我这里的项目中,每一个巡检单均是一个表格数组,所有的数组都存储在一个对象tabList中,所以这里对表格合并的时候需要传递一个下标值index来表明是第几个数组
具体实现代码
<el-table
ref="table" :data="item.tableData" max-height="250" :row-class-name="tableRowClassName"
:span-method="(row,column,rowIndex,columnIndex)=>{return arraySpanMethod({row,column,rowIndex,columnIndex},index)}"
style="margin-top:15px">
<!-- 省略 -->
</el-table>
// 表格合并最后一行第2,3列
arraySpanMethod({row, column, rowIndex, columnIndex}, index) {
console.groupCollapsed("arraySpanMethod")
console.log(row, column, rowIndex, columnIndex, index)
// 注意这里使用时需要用row, 默认的4个属性都在row对象中
// 可以打印查看
const len = this.tabList[index].tableData.length
if (row.rowIndex === len - 1) {
if (row.columnIndex === 1) {
return {
rowspan: 1,
colspan: 2
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
console.groupEnd()
}