VUE3+element plus 实现表格行合并

基础实现方法

通过给el-table传入span-method方法可以实现合并行或列,该方法的参数包含当前行row、当前列column、当前行号rowIndex和当前列号columnIndex四个属性15。该方法可以返回包含rowspan和colspan的数组或对象,例如:

复制代码

javascriptCopy Code

const spanMethod = ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 0) { return { rowspan: 4, colspan: 1 } // 合并4行1列 } }

动态合并相同数据行

对于需要根据数据相同性合并的场景,可先预处理数据生成合并映射表5:

  1. 遍历数据,记录需要合并的行数和起始位置
  2. 在span-method中根据映射表返回合并配置
复制代码

javascriptCopy Code

const spanPropGroup = (data) => { let rowSpansMap = new Map() // 生成合并映射逻辑... return rowSpansMap }

完整示例代码

<template>

<el-table :data="tableData" :span-method="objectSpanMethod">

<el-table-column prop="id" label="ID" width="180" />

<el-table-column prop="name" label="姓名" />

<el-table-column prop="amount" label="金额" />

</el-table>

</template>

<script setup>

import { ref } from 'vue'

const tableData = ref([

{ id: '1', name: '王小虎', amount: '100' },

{ id: '1', name: '王小虎', amount: '200' },

{ id: '2', name: '张三', amount: '300' },

{ id: '2', name: '张三', amount: '400' }

])

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {

if (columnIndex === 0) {

if (rowIndex % 2 === 0) {

return { rowspan: 2, colspan: 1 }

} else {

return { rowspan: 0, colspan: 0 }

}

}

}

</script>

  1. 使用setup语法糖简化代码结构
  2. span-method实现每隔两行合并一次
  3. 返回rowspan:0表示隐藏被合并的单元格

复杂合并场景

对于需要根据特定字段值合并的场景(如相同订单号合并),需先预处理数据生成合并规则4。典型实现包括:

  1. 遍历数据识别连续相同值
  2. 记录合并起始位置和行数
  3. 在span-method中应用预处理结果

注意事项

  1. 合并行时需确保被合并行数据一致性1
  2. 复杂合并建议先对数据进行分组排序
  3. 性能优化:大数据量时应减少span-method计算量
相关推荐
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据8 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年9 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una10 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年10 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js10 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ11 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办11 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao11 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript