elementUI Table的行合并通用方法

有些业务需求是需要table进行行合并的,所以就写了个通用的方法来处理,废话不多说,先上图

首先是内部使用el-table的方法:span-method='objectSpanMethod'

data() {
  return {
    table: [{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT',
      checkMoney: '300.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT1',
      checkMoney: '303.22',
      attention: '检查前空腹',
      appointmentTime: ''
    },{
      id: '1',
      checkRoom: 'CTROOM',
      checkProject: '颈椎MRICT22',
      checkMoney: '340.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 10:30'
    },{
      id: '1',
      checkRoom: 'DR',
      checkProject: '鼻骨',
      checkMoney: '500.22',
      attention: '检查前空腹',
      appointmentTime: '2019-5-29 9:30'
    }]
  };
},
created(){
  // 给table赋值,重新遍历新增rowSpan属性,checkRoom,appointmentTime为table里面需要合并的属性名称
  this.table = mergeTableRow(this.table, ['checkRoom', 'appointmentTime'])
},
methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     const span = column['property'] + '-span'
     if(row[span]){
         return row[span]
     }
  }
}

 

通用合并的方法mergeTableRow,如果相同的数据不在相邻行,请看最下面那个方法

/**
 * 方法一
 *  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal]) {
        mList[rowVal]++
        data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = 1
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

 

如果相同的数据不在相邻行该怎么办呢?那么请看下面的代码,改良过后的,不相邻的数据相互之间不受影响

/**
 * 方法二
 * 改良后(不相邻的数据相互不受影响)
 *  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal] && mList[rowVal].newIndex === index) {
        mList[rowVal]['num']++
        mList[rowVal]['newIndex']++
        data[mList[rowVal]['index']][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

 

注意:由于数据没有进行排序,所以要求后端返回的数据相同的要放在一块,不然会出现错乱行

我在用elementui的时候,有一列数据是数组形式,不知道怎么给他分两 显示 我需要在显示的时候,当adds=2时,其他合并,address分两显示,如图所示,如何把红色和蓝色这两个地址分两显示,其他列合并 ![图片说明](https://img-ask.csdn.net/upload/201904/14/1555218635_413133.jpg) data部分代码如下: ``` tableData3: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', adds: 2, address: ['上海市普陀区金沙江路 1518 弄','上海市普陀区金沙江路 1519 弄'], zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-08', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-06', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-07', name: '王小虎', province: '上海', city: '普陀区', adds: 1, address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] ```
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页