Element UI table el-table 表格合并行合并的行数不一样

RosaChampagne

已于 2022-08-04 08:34:15 修改

阅读量854

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 elementui

于 2022-07-26 18:05:57 首次发布

本文链接：https://blog.csdn.net/RosaChampagne/article/details/125998679

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

表格是要分页显示的，所以进行了分页处理

<template>
  <div class="process-table-wrapper">
    <div class="page" v-for="(tableData, idx) in tableList" :key="idx">
      <el-table :data="tableData" border :span-method="(params) => onMergeRow(params, idx)">
        <el-table-column prop="category" label="测试列" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="volume" label="年龄" align="center" />
      </el-table>
    </div>
  </div>
</template>

相关的js代码

import _ from 'lodash';

export default {
  name: 'Table',
  data() {
    return {
      rowIndexList: [],
      tableData: [
        {
          category: 'test',
          name: 'Marco',
        },
        {
          category: 'test',
          name: 'Bob',
        },
        {
          category: 'test',
          name: 'Alice',
        },
        {
          category: 'test',
          name: 'Alisa',
        },
        {
          category: 'test',
          name: 'Jorge',
        },
        {
          category: 'test',
          name: 'William',
        },
        {
          category: 'other',
          name: 'Cynthia',
        },
        {
          category: 'other',
          name: 'Jeff',
        },
        {
          category: 'other',
          name: 'Drew',
        },
      ],
      tableList: [],
    }
  },
  created() {
    this.tableList = _.chunk(this.tableData, 35);
    this.tableList.forEach((tableItem, index) => {
      const groupList = Object.values(_.groupBy(tableItem, 'category') || []);
      const indexArr = _.fill(Array(tableItem?.length), 0);
      groupList.forEach((item, idx) => {
        if (idx > 0) {
          const arr = _.cloneDeep(groupList).splice(0, idx).map((item) => item.length);
          const sum = arr.reduce((prev, curr) => prev + curr);
          indexArr[sum] = item.length;
        } else {
          indexArr[idx] = item.length;
        }
      });
      this.rowIndexList[index] = indexArr;
    });
  },
  methods: {
    onMergeRow({ columnIndex, rowIndex }, idx) {
      if (columnIndex === 0) {
        if (this.rowIndexList[idx][rowIndex]) {
          return {
            rowspan: this.rowIndexList[idx][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};