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计算量
相关推荐
huangql5204 小时前
UniApp + Vite + Vue3 + TypeScript 项目中 ESLint 与 Prettier 的完整配置指南
vue.js·typescript·团队开发·代码规范
fxshy4 小时前
Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑
javascript·vue.js·elementui
北慕阳4 小时前
自存19-48
javascript·vue.js·elementui
Never_Satisfied4 小时前
在JavaScript / HTML中,`onclick`事件触发多个函数
开发语言·javascript·html
Misnice7 小时前
React渲染超大的字符串
前端·javascript·react.js
二十雨辰15 小时前
vite如何处理项目中的资源
开发语言·javascript
洛可可白16 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
四月_h17 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate18 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端