el-table 合并相同值单元格

三好市民徐先生

已于 2024-07-04 14:27:39 修改

阅读量367

点赞数 5

文章标签： vue elementui

于 2024-07-04 14:22:05 首次发布

本文链接：https://blog.csdn.net/qq_43664930/article/details/137631173

版权

思路

先对table数据进行排序，让相同name的数据挨在一起，然后使用el-table的span-method进行合并

一、问题1

default-sort 默认排序失效

1. 原因

default-sort 生效时数据还没有渲染进table

2. 尝试办法

nextTick()等待数据渲染结束，使用table的sort()方法手动排序，但是使用的vue3 setup，读取不到this
给table绑定ref，但是也读不到

3. 解决办法

从接口接受数据后，直接用sort()给数据排序了

二、问题2

怎么进行数据合并

从接口获取到的数据，直接进行排序，使相同name的数据排在一起

//获取到数据，进行排序
 tableData.value.sort((a, b) => { return a.ecuDid - b.ecuDid })

<template>中table传入span-method方法，绑定合并行或列的计算方法：ecuNumSpanMethod函数

<el-table v-else="page1 === 'upgradeVehicleParts'" id="reportParts" :data="tableData" border style="width: 100%" :span-method="ecuNumSpanMethod">
	<el-table-column label=" 数量" align="center">
		<el-table-column label="名称" prop="ecuName"></el-table-column>
		<el-table-column label="地址" prop="ecuDid"></el-table-column>
		<el-table-column label="编号" prop="ecuNum"></el-table-column>
		<el-table-column label="数量" prop="count"></el-table-column>
	</el-table-column>
</el-table>

ecuNumSpanMethod 函数

const ecuNumSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}) => {
    if (columnIndex === 0 || columnIndex === 1) {     
        const currentValue = row[column.property];
        const preRow = tableData.value[rowIndex-1];
        //上一行这一列的数据
        const preValue = preRow ? preRow[column.property] : null;
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if(currentValue === preValue){
            return{rowspan:0,colspan:0}
        }else{
            let rowspan = 1
            // 计算应该合并的行数
            for (let i = rowIndex + 1; i < tableData.value.length; i++){
                const nextRow = tableData.value[i]
                const nextValue = nextRow[column.property]
                if (nextValue === currentValue){
                    rowspan++
                }else{
                    break
                }
            }
            return { rowspan, colspan: 1 }
        }
    }
}

三、span-method工作原理

这个方法中会从上至下，从左至右遍历每一个单元格。在每一个单元格中执行span-method绑定的函数（ecuNumSpanMethod ），下图是遍历单元格下标（rowIndex，columnIndex）
函数返回值解析return {rowspan，colspan}，表示当前单元格变成rowspan行，colspan列。rowspan默认向下合并，colspan默认向右合并。剩下的单元格视觉上会顺位移动，但是用index取值还是变化前。

四、代码思路

把第一行第二列合并成两行一列

if(columnIndex === 1 && rowIndex === 0){
      return {
        rowspan: 2,
        colspan: 1,
      }
    }

在这里插入图片描述把第二行第二列隐藏

if(columnIndex === 1 && rowIndex === 0){
      return {
        rowspan: 2,
        colspan: 1,
      }
    }
if(columnIndex === 1 && rowIndex === 1){
return {rowspan:0,colspan:0}
}