element.ui表格合并单元格

Question

类似这样得表格用element里得表格组件怎么是实现啊，大佬们给提供个思路就行。谢谢了

Answer 1

首先处理一下数据，

// 合并单元格方法
function rowspanFun (data, nameList) {
  for (var i = 0; i < nameList.length; i++) {
    var name = nameList[i]
    var startRow = 0
    var endRow = data.length
    var mergeNum = 1
    if (endRow != 1) {
      for (var j = startRow; j < endRow; j++) {
        if (j == endRow - 1) { // 判断是否是最后一个元素
          if (startRow == endRow - 1) {
            data[j][name + 'Rowspan'] = 1
          }
        } else {
          if (data[startRow][name] == data[j + 1][name]) {
            data[j + 1][name + 'Rowspan'] = 0
            mergeNum = mergeNum + 1
            data[startRow][name + 'Rowspan'] = mergeNum
          } else {
            startRow = j + 1
            if (mergeNum > 1) {
              data[startRow][name + 'Rowspan'] = 1
            } else {
              data[j][name + 'Rowspan'] = 1
            }
            mergeNum = 1
          }
        }
      }
    } else {
      data[0][name + 'Rowspan'] = 1
    }
  }
  return data
}

然后span-method

  setSpans ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      return {
        rowspan: row.nameRowspan ? Number(row.nameRowspan) : 0,
        colspan: row.nameRowspan ? 1 : 0
      }
    }
  }

Answer 2

正常写表格，行内用div分割