el-table自定义合并列
通过给table传入
span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
一、el-table元素挂载span-method
<el-table v-if="show" border size='small' :max-height="maxHeightA" class="attendance-report" :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :span-method="abilitySpanMethod">
二、在methods实现函数
methods: {
abilitySpanMethod({ row, column, rowIndex, columnIndex }) {
if (
columnIndex == 0
) {
//要合并的在第几列
const _row = this.tableCombine().one[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
tableCombine() {
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0
this.tableData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
spanTwoArr.push(1)
} else {
if (item.deptName === this.tableData[index - 1].deptName) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return {
one: spanOneArr,
two: spanTwoArr,
}
}
}