在实际工作中,通常数据都是后台接口返回的,有时需要对数据进行合并,可利用el-table的span-method方法,结合数据处理,进行合并,如下实例
<el-table :data="dataTable"borderrow-key="id":span-method="objSpanMethod"
></el-table>
// 默认接受的参数{当前行的值,当前列的值,行的下标,列的下标}
// 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]}}
}
// 处理数据
getSpanArr(data) {mergeArr.forEach((key,index) => {// 记录需要合并行的起始位置let count = 0// 记录每一列的合并信息mergeObj[key] = []data.forEach((item,index) => {// index === 0 表示数据为第一行,直接push一个1if (index===0) {mergeObj[key].push(1)} else {// 判断当前行是否与上一行的值相等,如果相等,在count记录的位置其值+1,表示当前行需要合并push一个0,作为占位if (item[key] === data[index-1][key] {mergeObj[key][count] += 1mergeObj[key].push(0)} else {count = indexmergeObj[key].push(1)}}})})
}