封装方法
const mergeTableRow = (config:any)=> {let data = config.dataconst {mergeColNames, // 需要合并的列firstMergeColNames, // 受影响的列firstMerge // 以哪列为基础进行合并(基准列)} = configif (!mergeColNames || mergeColNames.length === 0) {return data}mergeColNames.forEach((m:any) => {const mList:any = {}data = data.map((v:any, index:any) => {// 区分需要合并行的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:any) => {return f === m}).length !== 0// 判断需要合并的列是否是基准列const mcFlag = mergeColNames.filter((mc:any) => {return mc === firstMerge}).length === 0// 判断基准列只有一行的时候，直接赋值rowspan和colspan为1if ((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为0v[m + '-span'] = {rowspan: 0,colspan: 0}mList[rowVal]['num']++mList[rowVal]['newIndex']++}} else { // 需要合并列第一行走elsemList[rowVal] = {num: 1,index: index,newIndex: index + 1}v[m + '-span'] = {rowspan: 1,colspan: 1}}return v})})return data}const objectSpanMethod = ({ row, column, rowIndex, columnIndex }:any)=> {const span = column['property'] + '-span'if(row[span]){return row[span]}}export { mergeTableRow,objectSpanMethod
}
页面使用
<script setup lang="ts">
import {mergeTableRow,objectSpanMethod} from '../../hook/mergeTableRow.ts' //引入封装的方法
const tableData = ref([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
])
const tableData1 = ref(mergeTableRow({ //处理数据data: tableData.value,mergeColNames: ['name'], // 需要合并的列，默认合并列相同的数据firstMergeColNames: [], // 受影响的列firstMerge: 'name' // 以哪列为基础进行合并，一般为第一列}))
</script><template><div class="app-container"><el-table :data="tableData" border style="width: 100%" :span-method='objectSpanMethod'><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template>
