vue3使用elementPlus进行table合并处理

elementPlus中table合并部分列

虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示

const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到

//table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

定义一个方法进行数据处理：

const getData = ()=>{
		let temp = [],
			companyRow,
			firmRow
		tableData.forEach((item,index)=>{
			temp.push(item)
			companyRow = !companyRow ? Object.assign(item, {companySpan: 0}) : companyRow
			companyRow.companySpan++
			firmRow = !firmRow ? Object.assign(item, {firmSpan: 0}) : firmRow
			firmRow.firmSpan++
			
			if(item.company_name != tableData[index + 1]?.company_name){
				companyRow = null
				firmRow = null
			}else{
				if(item.firm_name !== tableData[index+ 1]?.firm_name){
					firmRow = null
				}
			}
		})
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后是tableSpan的方法定义：

const tableSpanMethod = ({row,column,rowIndex,columnIndex})=>{
		if(column.property ===  'company_name'){
			return row.companySpan ? [row.companySpan, 1] : [0,0]
		}
		if(column.property == 'firm_name'){
			return row.firmSpan ? [row.firmSpan, 1] : [0,0]
		}
	}
1
2
3
4
5
6
7
8