element + table 行列合并

如图,实现通过判断数据,动态的合并列数据

<template>
  <div class="merge-cell">
    <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"/>
      <el-table-column prop="name" label="Name"/>
      <el-table-column prop="amount1" label="Amount 1"/>
      <el-table-column prop="amount2" label="Amount 2"/>
      <el-table-column prop="amount3" label="Amount 3"/>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import type {TableColumnCtx} from 'element-plus';
interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}
interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
const tableData: User[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987122',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 9,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
  {
    id: '129871212',
    name: 'Tom1',
    amount1: '539',
    amount2: '4.1',
    amount3: 151,
  },
  {
    id: '129871213',
    name: 'Tom2',
    amount1: '539',
    amount2: '4.1',
    amount3: 152,
  },
  {
    id: '129871213',
    name: 'Tom3',
    amount1: '539',
    amount2: '4.1',
    amount3: 152,
  }
]
const objectSpanMethod = ({
      row, // 行
      column, // 列
      rowIndex, // 行的下标
      columnIndex  // 列的下标
    }: SpanMethodProps) => {
  // 只判断第一列和第二列
  if (columnIndex === 0 || columnIndex === 1) {
    // 获取当前单元格的值
    const currentValue = (row as any)[column.property];

    // 获取上一行相同列的值
    const preRow: any = tableData[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.length; i++) {
        const nextRow: any = tableData[i];
        const nextValue = nextRow[column.property];
        if (nextValue === currentValue) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
 }
}
</script>
相关推荐
活宝小娜26 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点28 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow29 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o30 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
赢乐3 小时前
使用Element UI实现前端分页,前端搜索,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量
前端分页·element ui·跨页选择·el-table表格·限制多选数量·切换分页保留数据·前端搜索过滤
会发光的猪。4 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客4 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo5 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式