vue table动态合并, 自定义合并,参照合并,组合合并

复制代码
<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="area" label="区域" align="center">
      </el-table-column>
      <el-table-column prop="province" label="省份" align="center" />
      <el-table-column prop="month_1" label="一月" align="center" />
      <el-table-column prop="month_2" label="二月" align="center" />
      <el-table-column prop="month_3" label="三月" align="center" />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        // 一年级
        {
          area: "华北",
          province: "北京",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "华北",
          province: "北京",
          month_1: "200",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "华北",
          province: "山西",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "华北",
          province: "辽宁",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "东北",
          province: "吉林",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "东北",
          province: "黑2",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "东北",
          province: "黑2",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "东北",
          province: "黑2",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "西北",
          province: "黑2",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "西北",
          province: "西二",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
        {
          area: "西北",
          province: "西三",
          month_1: "100",
          month_2: "张三",
          month_3: "90"
        },
      ],
    };
  },
  methods: {
    /**
     * 分析每一列,找出相同的
     * @param data
     */
    setTabelRowSpan(tableData, fieldArr, effectMerge = {}) {
      let lastItem = {}
      fieldArr.forEach((field, index) => {
        let judgeArr = fieldArr.slice(0, index + 1)
        if (effectMerge[field]) {
          judgeArr = [...effectMerge[field], field]
          
        }
        tableData.forEach(item => {
          item.mergeCell = fieldArr
          const rowSpan = `rowspan_${field}`
          // 判断是否合并到上个单元格。
          if (judgeArr.every(e => lastItem[e] === item[e] && item[e] !== '')) {
            // 判断是否所在行的列对应的值全部相同,并且此列的值不为空
            // 是:合并行
            item[rowSpan] = 0
            lastItem[rowSpan] += 1
          } else {
            // 否:完成一次同类合并。lastItem重新赋值,进入下一次合并计算。
            item[rowSpan] = 1
            lastItem = item
          }
        })
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.mergeCell.includes(column.property)) {
        const rowspan = row[`rowspan_${column.property}`]
        if (rowspan) {
          return { rowspan: rowspan, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    }
  },
  mounted() {
    // 需要参照合并的列
    const effectMerge = {
      month_1: ['area'],
      month_3: ['area']
    }
    const arr = ['area', 'province', 'month_1', 'month_2', 'month_3']
    this.setTabelRowSpan(this.tableData, arr, effectMerge)
}
</script>
<style lang="scss" scoped></style>

效果图

相关推荐
Mintopia13 分钟前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
Mintopia26 分钟前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
一枚前端小能手43 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖44 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号1 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
小高0071 小时前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手1 小时前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript
毕设源码-郭学长1 小时前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙1 小时前
初识Vue
前端·javascript·vue.js
干就完了12 小时前
js数组方法,其实也就这么多东西,一篇全搞懂
前端·javascript