ElementUI表格列相同值自動合併單元格( 多列 )

上篇文章寫了如何在處理單列相同數據時讓相同的項進行自動合併, 若是有多列合併的需求咱們也應該能夠從容應對...
(產品: 大家看我幹嗎?)

廢話很少說 上代碼

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="數值 1（元）">
      </el-table-column>
      <el-table-column prop="amount2" label="數值 2（元）">
      </el-table-column>
      <el-table-column prop="amount3" label="數值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>
</div>

JS

var Main = {
    data() {
      return {
        tableData6: [{
          name: '部門1',
          type: 0,
          amount1: '跟單員1',
          amount2: '成衣工廠1',
          amount3: 10
        }, {
          name: '部門1',
          type: 0,
          amount1: '跟單員1',
          amount2: '成衣工廠2',
          amount3: 12
        }, {
          name: '部門1',
          type: 0,
          amount1: '跟單員1',
          amount2: '成衣工廠3',
          amount3: 9
        }, {
          name: '部門1',
          type: 0,
          amount1: '跟單員2',
          amount2: '成衣工廠1',
          amount3: 17
        }, {
          name: '部門1',
          type: 0,
          amount1: '跟單員2',
          amount2: '成衣工廠2',
          amount3: 15
        },{
          name: '部門1',
          type: 0,
          amount1: '跟單員2',
          amount2: '成衣工廠3',
          amount3: 10
        }, {
          name: '部門1總計',
          type: 1,
          amount1: '部門1跟單員',
          amount2: '',
          amount3: 12
        },{
          name: '部門2',
          type: 0,
          amount1: '跟單員3',
          amount2: '成衣工廠1',
          amount3: 10
        }, {
          name: '部門2',
          type: 0,
          amount1: '跟單員3',
          amount2: '成衣工廠2',
          amount3: 12
        }, {
          name: '部門2',
          type: 0,
          amount1: '跟單員3',
          amount2: '成衣工廠3',
          amount3: 9
        }, {
          name: '部門2',
          type: 0,
          amount1: '跟單員3',
          amount2: '成衣工廠1',
          amount3: 17
        }, {
          name: '部門2',
          type: 0,
          amount1: '跟單員4',
          amount2: '成衣工廠2',
          amount3: 15
        },{
          name: '部門2',
          type: 0,
          amount1: '跟單員4',
          amount2: '成衣工廠3',
          amount3: 10
        }, {
          name: '部門2總計',
          type: 1,
          amount1: '部門2跟單員',
          amount2: '',
          amount3: 12
        }],
        arr1:[],
        arr2:[]
      };
    },
    created() {
        this.setdates(this.tableData6)
    },
    methods: {
        setdates(arr) {
          var obj = {},
              k, arr1 = [];
          for(var i = 0, len = arr.length; i < len; i++) {
              k = arr[i].name;
              if(obj[k])
                  obj[k]++;
              else
                  obj[k] = 1;
          }
          console.log(obj)
          //保存結果{el-'元素'，count-出現次數}
          for(var o in obj) {
              for(let i=0;i<obj[o];i++){
                  if(i===0){
                    this.arr1.push(obj[o])
                }else{
                    this.arr1.push(0)
                }
              }
          }
          console.log(this.arr1);
          var obj2 = {},
                  j,arr2=[];
          for(var i = 0, len = arr.length; i < len; i++) {
              k = arr[i].amount1;
              if(obj2[k])
                  obj2[k]++;
              else
                  obj2[k] = 1;
          }
          console.log(obj2)
          //保存結果{el-'元素'，count-出現次數}
          for(var o in obj2) {
              for(let i=0;i<obj2[o];i++){
                  if(i===0){
                    this.arr2.push(obj2[o])
                }else{
                    this.arr2.push(0)
                }
              }
          }
          console.log(this.arr2);
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 && this.tableData6[rowIndex].type == 0) {
            let _row = this.arr1[rowIndex]
          let _col = this.arr1[rowIndex] > 0 ? 1 : 0
          return [_row,_col]
        }else if(columnIndex === 0 && this.tableData6[rowIndex].type == 1){
                return [1,3]
        }else if (columnIndex === 1 && this.tableData6[rowIndex].type == 1){
                return [0,0]
        }else if (columnIndex === 2 && this.tableData6[rowIndex].type == 1){
                return [0,0]
        }else if (columnIndex === 1 && this.tableData6[rowIndex].type == 0){
            let _row = this.arr2[rowIndex]
          let _col = this.arr2[rowIndex] > 0 ? 1 : 0
          return [_row,_col]
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

最終效果

Fiddle代碼預覽地址https://jsfiddle.net/Tomatoro...
可能須要翻(程序員必備)