思路:element中el-tabel有提供span-method方法合并行或者列,可以参考下element文档(https://element.eleme.cn/#/zh-CN/component/table)。所以我们想办法构造每条数据的row,col合并的数量就行。
table代码
<el-table
ref="table"
:data="list"
style="width: 100%;"
:span-method="objectSpanMethod"
size="mini" >
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column label="firstClsf" align="center" max-width="80">
<template slot-scope="scope">{{ scope.row.firstClsf }}</template>
</el-table-column>
<el-table-column label="secondClsf" align="center" max-width="80">
<template slot-scope="scope">{{ scope.row.secondClsf}}</template>
</el-table-column>
<el-table-column label="bizName" align="center" min-width="90">
<template slot-scope="scope">{{ scope.row.bizName }}</template>
</el-table-column>
<el-table-column label="txnId" align="center" min-width="90">
<template slot-scope="scope">{{ scope.row.txnId }}</template>
</el-table-column>
</el-table>
js
export default {
data () {
return {
firstClsfIndexArr: [], // 存放firstClsf列每一行记录的合并数 控制firstClsf的合并
firstClsfIndexRecode: 0, // firstClsfIndexArr的索引
secondClsfIndexArr: [], // 存放secondClsf列每一行记录的合并数 控制secondClsf列的合并
secondClsfIndexRecode: 0, // secondClsfIndexArr的索引
bizNameIndexArr: [], // 存放bizName列每一行记录的合并数 控制第三列的合并 以此类推 每多控制一列,多创建两个变量
bizNameIndexRecode: 0,
}
},
mounted () {
// 方便大家测试,数据定死了。后获取数据赋值就好
this.list = [
{ firstClsf: '1', secondClsf: '3', bizName: 'ee', txnId: '23', caseName: 'ndkkf', txnTime: '2021-2-13', remark: 'ss' },
{ firstClsf: '2', secondClsf: '3', bizName: 'rf', txnId: '33', caseName: 'hhhhh', txnTime: '2021-2-18', remark: '3ee' },
{ firstClsf: '2', secondClsf: '4', bizName: 'ee', txnId: '34', caseName: 'hhhhh', txnTime: '2021-2-18', remark: '3ee' }]
this.getSpanArr(this.list)
},
methods: {
getSpanArr (data) { // 获取
// firstClsfIndexArr/secondLevelIndexArr来存放要合并的格数,同时还要设定一个变量firstLevelIndexPos/secondLevelIndexPos来记录
this.firstClsfIndexArr = []
this.secondClsfIndexArr = []
this.bizNameIndexArr = []
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.firstClsfIndexArr.push(1)
this.firstClsfIndexRecode = 0
this.secondClsfIndexArr.push(1)
this.secondClsfIndexRecode = 0
this.bizNameIndexArr.push(1)
this.bizNameIndexRecode = 0
} else {
// 判断当前元素与上一个元素是否相同(第2列)
if (data[i].firstClsf === data[i - 1].firstClsf) {
this.firstClsfIndexArr[this.firstClsfIndexRecode] += 1
this.firstClsfIndexArr.push(0)
} else {
this.firstClsfIndexArr.push(1)
this.firstClsfIndexRecode = i
}
// 判断当前元素与上一个元素是否相同(第3列)
if (data[i].secondClsf === data[i - 1].secondClsf) {
this.secondClsfIndexArr[this.secondClsfIndexRecode] += 1
this.secondClsfIndexArr.push(0)
} else {
this.secondClsfIndexArr.push(1)
this.secondClsfIndexRecode = i
}
// 判断当前元素与上一个元素是否相同(第4列)
if (data[i].bizName === data[i - 1].bizName) {
this.bizNameIndexArr[this.bizNameIndexRecode] += 1
this.bizNameIndexArr.push(0)
} else {
this.bizNameIndexArr.push(1)
this.bizNameIndexRecode = i
}
}
}
},
objectSpanMethod ({ row, column, rowIndex, columnIndex }) { // 框架自带合并方法
if (columnIndex > 3) {
return
}
// 下面用的三元表达式的嵌套
const _row = columnIndex === 1 ? this.firstClsfIndexArr[rowIndex] : columnIndex === 2 ? this.secondClsfIndexArr[rowIndex] : this.bizNameIndexArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
},
}
}