vue+Element 表格合并

在请求到表格数据,对数据进行循环,得到需要合并的字段

setDates(arr) {
  const obj = {};
  let k;
  this.arr1 = []
  for (let i = 0, len = arr.length; i < len; i++) {
    k = arr[i].cloudDevName; //需要合并的字段
    if (obj[k]) obj[k]++;
    else obj[k] = 1;
  }
  //保存结果{el-'元素',count-出现次数}
  for (const o in obj) {
    for (let i = 0; i < obj[o]; i++) {
      if (i === 0) {
        this.arr1.push(obj[o]);
      } else {
        this.arr1.push(0);
      }
    }
  }
},

利用表格的span-method方法来进行合并

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex===5 || columnIndex === 6) {
    const _row = this.arr1[rowIndex];
    const _col = this.arr1[rowIndex] > 0 ? 1 : 0;
    return [_row, _col];
  }
},

效果图:

vue+Element 表格合并_第1张图片

你可能感兴趣的:(vue,element,vue.js,javascript,elementui)