ElementUI表格列相同值自动合并单元格( 多列 )

上篇文章写了如何在处理单列相同数据时让相同的项进行自动合并, 如果有多列合并的需求我们也应该可以从容应对...
(产品: 你们看我干嘛?)

废话不多说 上代码

HTML

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 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...
可能需要翻(程序员必备)