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>

效果图

相关推荐
麦麦大数据3 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco6 小时前
js常见开发学习
javascript
麦麦大数据6 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110167 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin
!win !7 小时前
分享二个实用正则
javascript·正则表达式
xw57 小时前
分享二个实用正则
javascript·正则表达式
刘新明19898 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节