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>

效果图

相关推荐
江城开朗的豌豆15 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆27 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了27 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆33 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆33 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆34 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆35 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子42 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆1 小时前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山1 小时前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js