近期做项⽬,遇到了element ui需要根据数据是否⼀致合并显⽰表格的需求。结合了饿了么的官⽹写出⼀下demo

这个span-method就是合并的关键

 // 

列表⽅法

  objectSpanMethod:function(obj) {

   if (obj.columnIndex === 0 || obj.columnIndex === 1||obj.columnIndex === 2) {

    // 

⼆维数组存储的数据

取出

    var _row = this.spanArr[obj.rowIndex]

    var _col = _row > 0 ? 1 : 0

    return {

     rowspan: _row,

     colspan: _col

    }

   } else {

    return false

   }

  },

    getSpanArr:function(data) {

   var vm = this;

   vm.spanArr = [];

   vm.pos = 0;

   data.forEach(function(item, index){

    //

判断是否是第⼀项

    if (index === 0) {

     vm.spanArr.push(1);

     vm.pos = 0;

    } else {

     //

不是第⼀项时，就根据标识去存储

     if (data[index].scheduleDate === data[index - 1].scheduleDate && data[index].ecourseTimeId === data[index - 1].ecourseTimeId

     && data[index].roomId === data[index - 1].roomId) {

      // 

查找到符合条件的数据时每次要把之前存储的数据

+1

      vm.spanArr[vm.pos] += 1;

      vm.spanArr.push(0);

     } else {

      // 

没有符合的数据时，要记住当前的

index

      vm.spanArr.push(1);

      vm.pos = index

     }

    }

   });

  },

//

此处为数据调⽤，合并单元格

vm.getSpanArr(vm.orderList);

objectSpanMethod

⾥⾯的