el-table 動態行合並

本文主要舉個項目中真實實例，方便各位跟我一樣在實際項目開發中碰到的需求功能的開發。（可直接拿來使用的）

餓了么table組件官方實例：http://element-cn.eleme.io/#/zh-CN/component/table，在實際開發過程中，官方實例根本無法滿足需求，實際需求一般都是動態的合並而不是固定怎么合並的，所以這時就需要我們對其進行處理。

大致思路就是：先將查詢出的列表數據分出哪幾列哪幾行需要進行合並並且合並多少行或多少列，這些數據記錄放進一個空數組中，合並的時候再根據這個數組進行相應的合並。

.vue文件：

<template>
  <section class="search-table">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamic-table" label-width="0">
      <el-table :data="dynamicValidateForm.domains" :span-method="objectSpanMethod" v-loading.body="listLoading" 
        element-loading-text="拼命加載中" border fit highlight-current-row>
        <el-table-column label="序號" type="index" align="center" width="60%" />
        <el-table-column label="指標" prop="NAME" min-width="15%" />
        <el-table-column label="分值" prop="SCORE" min-width="8%" />
        <el-table-column label="考核內容" prop="CONTENT" min-width="15%" />
        <el-table-column label="扣分標准" prop="STANDARD" min-width="52%" />
 
        <el-table-column label="扣分" prop="MINUS_SCORE" min-width="10%">
          <template slot-scope="scope">
            <el-form-item :prop="'domains.' + scope.$index + '.MINUS_SCORE'" 
              :rules="[{pattern: validator('number'), message: '請輸入數字', trigger: 'blur'} ]">
              <nv-input v-model.number="scope.row.MINUS_SCORE" :disabled="!isView" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </section>
</template>

vue.js(script)文件：

<script>
import { getProjectDeductDatas } from "./api";
export default {
  name: "ProjectDeduct",
  props: {},
  data() {
    return {
      list: [],
      listLoading: true,
      dynamicValidateForm: {
        domains: []
      },
      spanArr: [], // 一個空的數組，用於存放每一行記錄的合並數
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0
    };
  },
 
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    // 合並單元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === 3) {
        const _row = this.contentSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 獲取列表數據
    getList() {
      const self = this;
      const { SCORE_ID, searchForm } = self;
      self.listLoading = true;
      getProjectDeductDatas({
        SCORE_ID: scoreId,
        NAME: searchForm.NAME
      })
        .then(({ data }) => {
          self.listLoading = false;
          this.dynamicValidateForm.domains = data || [];
 
          // 設定一個數組spanArr/contentSpanArr來存放要合並的格數，同時還要設定一個變量pos/position來記錄
          this.spanArr = [];
          this.contentSpanArr = [];
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
              this.contentSpanArr.push(1);
              this.position = 0;
            } else {
              // 判斷當前元素與上一個元素是否相同(第1和第2列)
              if (data[i].INDEX_ID === data[i - 1].INDEX_ID) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
              // 判斷當前元素與上一個元素是否相同(第3列)
              if (data[i].CONTENT === data[i - 1].CONTENT) {
                this.contentSpanArr[this.position] += 1;
                this.contentSpanArr.push(0);
              } else {
                this.contentSpanArr.push(1);
                this.position = i;
              }
            }
          }
        })
        .catch(err => {
          self.listLoading = false;
          console.log(err);
        });
    }
  },
  watch: {}
};
</script>

最終效果：

 

 親測有效，原文鏈接：https://blog.csdn.net/davis_23/article/details/84784911