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>

效果图

相关推荐
猪哥帅过吴彦祖11 分钟前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl
Asort13 分钟前
JavaScript设计模式(十二)——代理模式 (Proxy)
前端·javascript·设计模式
Neil鹏13 分钟前
解决 Vite 代理中的 E RR_CONTENT_DECODING_FAILED 错误:禁用自动压缩的实践
vue.js
tangdou36909865526 分钟前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
Mintopia32 分钟前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
华仔啊33 分钟前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
xiaohua0708day36 分钟前
关于解决js中MediaRecorder录制的webm视频没有进度条的问题
javascript·音视频
程序铺子37 分钟前
如何使用 npm 安装 sqlite3 和 canvas 这些包
javascript·npm·node.js
ttod_qzstudio41 分钟前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
通往曙光的路上42 分钟前
day9_elementPlus2
javascript·vue.js·elementui