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

image.png

合并行

所謂的合并行就是將多行相同的數(shù)據(jù)變成一行來顯示，直接上代碼，頁面的布局比較簡單

<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上屬性，其值是一個函數(shù)，objectSpanMethod方法是用來處理合并行的返回值，tableData數(shù)據(jù)如下

      tableData: [
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "語文",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年二班",
          name: "小明",
          subjects: "數(shù)學",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "語文",
          score: 70,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "數(shù)學",
          score: 80,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "語文",
          score: 60,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "數(shù)學",
          score: 60,
        },
      ],
      mergeObj: {}, // 用來記錄需要合并行的下標
      mergeArr: ["time", "grade", "name", "subjects", "score"], // 表格中的列名

首先需要對數(shù)據(jù)就行處理，就是比較當前行與上一行的值是否相等（如果是第一行數(shù)據(jù)，直接將值賦值為1）

在mounted中調(diào)用數(shù)據(jù)初始化數(shù)據(jù)的方法，如下：

  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表示數(shù)據(jù)為第一行，直接 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
            }
          }
        });
      });
    },

數(shù)據(jù)處理好之后就可以調(diào)用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: "數(shù)學",
          score: 80,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "語文",
          score: 70,
        },
        {
          time: "2020-08-10",
          grade: "三年一班",
          name: "小雷",
          subjects: "數(shù)學",
          score: 80,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "語文",
          score: 60,
        },
        {
          time: "2020-08-11",
          grade: "三年三班",
          name: "小花",
          subjects: "數(shù)學",
          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表示數(shù)據(jù)為第一行，直接 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. 添加一個數(shù)據(jù)源indexObj

 // 用于記錄索引項對應的實際序號
 indexObj: {},

1.3. methods做出如下調(diào)整

    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