el-table合并行以及解决合并索引列序号错乱的问题

el-table合并单元格_el-table 合并-CSDN博客

image.png

合并行

所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单

<template>
    <div class="table">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="grade" label="年级"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="subjects" label="科目"></el-table-column>
            <el-table-column prop="score" label="成绩"></el-table-column>
        </el-table>
    </div>
</template>

span-method是el-table上属性，其值是一个函数，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下

      tableData: [
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "语文",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "数学",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "语文",
          score: 70,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "数学",
          score: 80,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "语文",
          score: 60,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "数学",
          score: 60,
        },
      ],
      mergeObj: {}, // 用来记录需要合并行的下标
      mergeArr: ["time", "grade", "name", "subjects", "score"], // 表格中的列名

首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）

在mounted中调用数据初始化数据的方法，如下：

  mounted() {
    this.getSpanArr(this.tableData);
  },

    // getSpanArr方法
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        });
      });
    },

数据处理好之后就可以调用objectSpanMethod方法了，如下：

    // objectSpanMethod方法
    // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1];
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
image.png

合并行完整的代码如下：

<template>
  <div class="table">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column prop="grade" label="年级"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="subjects" label="科目"></el-table-column>
      <el-table-column prop="score" label="成绩"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      tableData: [
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "语文",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "数学",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "语文",
          score: 70,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "数学",
          score: 80,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "语文",
          score: 60,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "数学",
          score: 60,
        },
      ],
      mergeObj: {},
      mergeArr: ["time", "grade", "name", "subjects", "score"],
    };
  },
  methods: {
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等
              count = index; // 记录当前位置
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        });
      });
    },
    // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1];
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
  },
  mounted() {
    this.getSpanArr(this.tableData);
  },
};
</script>

问题一：序号列如何合并？？

image.png

1.1. 在序号这一列添加一个prop属性prop="index" 

      <el-table-column
        label="序号"
        prop="index"
        type="index"
      ></el-table-column>

1.2. mergeArr增加合并列属性index 

  mergeArr: ["index", "time", "grade", "name", "subjects", "score"],

1.3. getSpanArr增加如下代码

    getSpanArr(data) {
      /**
       * 代码省略....
       *  */
      // 等待mergeObj处理完，序号列这一项合并情况，只需要和相邻的下一项time合并情况一致即可
      this.mergeObj["index"] = this.mergeObj["time"];
    },

问题二：合并之后的序号不对

image.png

1.1. 在序号这一列添加一个prop属性:index="customIndex" 

      <el-table-column
        label="序号"
        prop="index"
        :index="customIndex"
        type="index"
      ></el-table-column>

1.2. 添加一个数据源indexObj

 // 用于记录索引项对应的实际序号
 indexObj: {},

1.3. methods做出如下调整

    getSpanArr(data) {
      /**
       * 代码省略....
       *  */
      // 等待mergeObj处理完，序号列这一项合并情况，只需要和相邻的下一项time合并情况一致即可
      this.mergeObj["index"] = this.mergeObj["time"];
      // 处理合并后序号匹配不上的问题
      this.handleIndexObj();
    },
    // 处理indexObj
    handleIndexObj() {
      let num = 0;
      this.mergeObj["index"].forEach((item, index) => {
        if (item !== 0) {
          num++;
          this.indexObj[index] = num;
        }
      });
    },
    // 自定义序号
    customIndex(index) {
      return this.indexObj[index];
    },
image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容