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

本文会对平常中遇到对于element-ui处理相同列自动合并的问题进行代码展示,以供为大家提供思路.

HTML

JS

var Main = {
    data() {
      return {
        tableData6: [{
          name: '王小虎',
          type: 0,
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          name: '王小虎',
          type: 0,
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          name: '王小虎',
          type: 0,
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          name: '王小虎',
          type: 0,
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          name: '王小虎总计',
          type: 1,
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },{
          name: '王小虎1',
          type: 0,
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          name: '王小虎1',
          type: 0,
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          name: '王小虎1',
          type: 0,
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          name: '王小虎1',
          type: 0,
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          name: '王小虎1总计',
          type: 1,
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          name: '王小虎2',
          type: 0,
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          name: '王小虎2',
          type: 0,
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          name: '王小虎3',
          type: 0,
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          name: '王小虎4',
          type: 0,
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
        arr1:[]
      };
    },
    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 {
              rowspan: _row,
              colspan: _col
            };
        }else if(columnIndex === 0 && this.tableData6[rowIndex].type == 1){
                return {
              rowspan: 1,
              colspan: 2
            };
        }else if(columnIndex === 1 && this.tableData6[rowIndex].type == 1){
                return {
              rowspan: 0,
              colspan: 0
            };
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

最终效果

Fiddle代码预览地址https://jsfiddle.net/Tomatoro...
可能需要翻(程序员必备)