在实际工作中,通常数据都是后台接口返回的,有时需要对数据进行合并,可利用el-table的span-method方法,结合数据处理,进行合并,如下实例
html
<el-table
:data="dataTable"
border
row-key="id"
:span-method="objSpanMethod"
></el-table>
javascript
// 默认接受的参数{当前行的值,当前列的值,行的下标,列的下标}
// mergeArr:是表格的字段名集合,["name","age","sex"...]
// mergeObj: 是合并信息数据的对象
objSpanMethod({row,column,rowIndex,columnIndex}) {
// 判断列的属性
if( mergeArr.indexOf(column.property) !== -1 ) {
// 判断值是不是为0
if (mergeObj[column.property][rowIndex]) {
return [mergeObj[column.property][rowUndex],1]
} else {
// 如果为0,则为需要合并的行
return [0,0]
}
}
}
javascript
// 处理数据
getSpanArr(data) {
mergeArr.forEach((key,index) => {
// 记录需要合并行的起始位置
let count = 0
// 记录每一列的合并信息
mergeObj[key] = []
data.forEach((item,index) => {
// index === 0 表示数据为第一行,直接push一个1
if (index===0) {
mergeObj[key].push(1)
} else {
// 判断当前行是否与上一行的值相等,如果相等,在count记录的位置其值+1,表示当前行需要合并push一个0,作为占位
if (item[key] === data[index-1][key] {
mergeObj[key][count] += 1
mergeObj[key].push(0)
} else {
count = index
mergeObj[key].push(1)
}
}
})
})
}