el-table 行合并示例

本文介绍如何在 Vue 中使用 el-table 实现动态行合并,包括单个表格和循环表格两种情况。示例代码展示如何根据数据动态合并行,并提供了计算合并数的不同逻辑。文中还提到了一种新的合并逻辑更新,对于处理复杂表格数据合并具有参考价值。
摘要由CSDN通过智能技术生成

页面实现行合并的情况还是比较常见的,但实现起来却有一点点难。官网的例子有,不过人家的合并逻辑是从第一行开始两行两行合并,不能根据数据动态合并,感觉参考意义不太大。实际需求一般都是根据表数据动态来进行合并的,也会有更复杂的情况,比如循环表格的。

以下的例子中,表格数据是放在页面的假数据,hbxh 值相同时,表示需要合并

示例一:单个表格

单个表格的比较简单,知道合并方法的使用基本就好弄了

<template>
  <div>
    <el-form
      ref="testForm"
      :model="testForm"
      style="height: 600px;"
    >
      <el-row
        style="padding: 10px"
      >
        <el-table
          :data="testForm.tableData"
          :span-method="colSpanMethod"
          border
          style="width: 100%;"
        >
          <el-table-column prop="hbxh" label="合并序号" width="100" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="地址" />
        </el-table>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
     
  data() {
     
    return {
     
      spanArr: [], // 用于存放每一行记录的合并数
      testForm: {
     
        tableData: [
          {
     
            hbxh: '1',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
     
            hbxh: '2',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
     
            hbxh: '2',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
     
            hbxh: '3',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
     
            hbxh: '4',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
     
            hbxh: '4',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
     
            hbxh: '4',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ] // 测试数据
      },
    }
  },
  created() {
     
    this.getSpanArr(this.testForm.tableData)
  },
  methods: {
     
    getSpanArr(data) {
     
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
     
        if (i === 0) {
     
          this.spanArr.push(1);
          this.pos = 0;
        } else {
     
          // 判断当前对象的指定属性值与上一个对象的指定属性值是否相等
          if (data[i].hbxh === data[i - 1].hbxh) 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值