©2020-2024 ioDraw All rights reserved
1. el-tablede的span-method属性
<el-table :data="pointData" :span-method="spanMethod" border style="width:
100%" >
2.data中定义spanMethod
data(){ return{ spanMethod: () => { }, } }
3.引入getRowspanMethod
import { getRowspanMethod } from './public/use-span-method'
4.use-span-method.js中的内容
/** * 合并相同数据，导出合并列所需的方法(只适合el-table) * @param {Object} data * @param {Object}
rowspanArray */ export function getRowspanMethod(data, rowspanArray) { /** *
要合并列的数据 */ const rowspanNumObject = {}; //初始化 rowspanNumObject rowspanArray.map(
item => { rowspanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0,
1); rowspanNumObject[`${item}-index`] = 0; }); //计算相关的合并信息 for (let i = 1; i <
data.length; i++) { rowspanArray.map(key => { const index = rowspanNumObject[`${
key}-index`]; if (data[i][key] === data[i - 1][key]) { rowspanNumObject[key][
index]++; } else { rowspanNumObject[`${key}-index`] = i; rowspanNumObject[key][i
] = 1; } }); } //提供合并的方法并导出 const spanMethod = function({ row, column, rowIndex,
columnIndex}) { if (rowspanArray.includes(column['property'])) { const rowspan
= rowspanNumObject[column['property']][rowIndex]; if (rowspan > 0) { return {
rowspan: rowspan, colspan: 1 } } return { rowspan: 0, colspan: 0 } } return {
rowspan: 1, colspan: 1 } }; return spanMethod; }
5.处理表格数据合并行
getPointData () { //表格数据this.pointData,['title1', 'title2', 'title3',
'title4']需要合并的列 this.spanMethod = getRowspanMethod(this.pointData, ['title1',
'title2', 'title3', 'title4']) },
6.获取数据时调用方法
this.getPointData ()
效果如下：
示例数据： pointData: [{ title1: '北京', title2: '变配', title3: '电压A', title4: '1' }, {
title1: '北京', title2: '变配', title3: '电压B', title4: '2' }, { title1: '北京',
title2: '变配', title3: '电压C', title4: '3' }, { title1: '上海', title2: '变配电',
title3: '电压C', title4: '4' },],