vue2，el-table表格合并

最新推荐文章于 2025-05-23 15:36:45 发布

原创最新推荐文章于 2025-05-23 15:36:45 发布 · 462 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何在Vue2项目中利用el-table组件，根据数据的特定字段（如区域名称）进行表格行合并。通过设置html结构并结合JavaScript处理后端返回的数据，实现了前端动态表格的行合并效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个就是效果图我是根据申报所属区域进行的合并

这一部分的话就是html代码

<el-table ref="addResPaperTable" :data="declareTableList" :span-method="objectSpanMethod" border style="width: 100%;" fit stripe>
        <el-table-column  prop="organizationName" label="医疗机构" minWidth="150px" />
        <el-table-column prop="areaName" label="申报所属区域"  />
        <el-table-column prop="itemType" label="费用类型" />
        <el-table-column prop="standardAmount" label="报销标准" />
        <el-table-column prop="amount" label="金额" />
        <el-table-column prop="ggwsAmount" label="财政报销金额（元）" />
    </el-table>

这个自己看

data () {
    return {
      declareTableList: [],
      GoodName: [],
      spanArr: [], // 二维数组，用于存放单元格合并规则
      position: 0 // 用于存储相同项的开始index
    }
  },

这个的话就是自己请求后端拿到的数据，this.rowspan(0, item.areaName)一定要写，这个是你从接口里拿到的那个要判断的那个字段传过去

这个就是js里的代码

// 合并单元格
    rowspan (idx, prop) {
      this.spanArr[idx] = []
      this.position = 0
      this.GoodName.forEach((item, index) => {
        if (index === 0) {
          this.spanArr[idx].push(1)
          this.position = 0
        } else {
          // 判断里面的某个字段是否重复
          if (this.GoodName[index].areaName === this.GoodName[index - 1].areaName) {
            this.spanArr[idx][this.position] += 1// 有相同项
            this.spanArr[idx].push(0) // 名称相同后往数组里面加一项0
          } else {
            this.spanArr[idx].push(1)// 同列的前后两行单元格不相同
            this.position = index
          }
        }
      })
    },
    objectSpanMethod ({ rowIndex, columnIndex }) {
      // 要合并第几列
      if (columnIndex === 6) {
        const _row = this.spanArr[0][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },