前言:
有些业务需求是需要table进行行合并的,下面根据其他博客的方法整理了下通用方法,如下:
通用方法:
/**在工具类util.js中定义通用方法
* table合并行通用 */
// eslint-disable-next-line space-before-function-paren
export default mergeTableRow(config) {
let data = config.data
const {
mergeColNames, // 需要合并的列
firstMergeColNames, // 受影响的列
firstMerge // 以哪列为基础进行合并(基准列)
} = config
if (!mergeColNames || mergeColNames.length === 0) {
return data
}
mergeColNames.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
// 区分需要合并行的key值
const rowVal = v[firstMerge] + '-' + v[m]
// 需要合并行的第二行以及之后行会走if
// m === firstMerge 判断需要合并的列是否是基准列,如果是则只满足前面的条件,如果不是则需满足前面+后面的条件
if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span'].rowspan === 0)) {
// 判断受影响的列是否是需要合并的列
const flag = firstMergeColNames.filter((f) => {
return f === m
}).length !== 0
// 判断需要合并的列是否是基准列
const mcFlag = mergeColNames.filter((mc) => {
return mc === firstMerge
}).length === 0
// 判断基准列只有一行的时候,直接赋值rowspan和colspan为1
if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)) {
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
} else {
// 判断基准列或其他需要合并列有多行时,第一行rowspan++
data[mList[rowVal]['index']][m + '-span'].rowspan++
// 需要合并行除了第一行之后其他行设置rowspan和colspan为0
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
mList[rowVal]['num']++
mList[rowVal]['newIndex']++
}
} else { // 需要合并列第一行走else
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1
}
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
调用方式:
1,首先需要在el-table中加入方法:span-method=‘objectSpanMethod’
<el-table
:data="tableData"
style="width: 100%"
class="tableBox"
:span-method='objectSpanMethod'
:cell-style="changeCellStyle">
<!-- <el-table-column label="入库编号" type="index" width="80" align="center">
<template slot-scope="scope">
<span>{{ (scope.$index + 1).toString().padStart(2, "0") }}</span>
</template>
</el-table-column> -->
<!-- 普通列 -->
<el-table-column
prop="purchaseDate"
label="入库时间"
min-width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="articleTypeName"
label="物品类型"
min-width="150"
align="center"
>
</el-table-column>
</el-table>
2,其次在methods中写objectSpanMethod方法逻辑
methods:{
//合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column['property'] + '-span'
if(row[span]){
return row[span]
}
},
}
3,然后再调用页面引入通用方法mergeTableRow
import {mergeTableRow} from '@/assets/js/unit.js'
4,在数据接口中调用此通用方法
data () {
return {
tableData:[] //页面需要展示的数据
}
},
created () {
this.getListData();
},
methods:{
getListData () {
this.$axios.接口(接口参数).then(res => {
if (res.code === '0') {
this.pages.total = res.data.total
this.tableData = mergeTableRow({
data: res.data.records,
mergeColNames: ['articleTypeName','purchaseDate','fullName','deptName'], // 需要合并的列,默认合并列相同的数据
firstMergeColNames: ['purchaseDate','fullName','deptName'], // 受影响的列,只合并以firstMerge为首的同类型数据
firstMerge: 'articleTypeName' // 以哪列为基础进行合并,一般为第一列
})
} else {
this.$message({
message: res.message,
type: 'error'
})
}
})
},
}
至此全部操作已完成,效果图如下: