使用element-ui二次封装table组件（支持合并单元格，

使用vue+elementui封装table。
组件中提供了含有分页的表格，支持filter，支持render，支持按钮列（按钮可自定义不展示条件），展开行，合并单元格，支持点击行自定义事件，支持单元格内容超出宽度自动显示...。
使用的方式有两种：
①使用slot插槽自定义表格内容
②使用data和prop将表格内容传递到表格组件

下面给出合并单元格的代码，完整代码见：传送门

// 初始化需要合并的单元格
    initMergeRow: function() {
      if (this.mergeRowKeys.length === 0) {
        return
      }
      this.mergeRowKeys.forEach((key) => {
        const rowAndColumn = []
        let pos = 0
        for (var i = 0; i < this.data.length; i++) {
          if (i === 0) {
            // 如果是第一条记录（即索引是0的时候），向数组中加入１
            rowAndColumn.push(1)
            pos = 0
          } else {
            if (this.data[i][key] === this.data[i - 1][key]) {
              // 如果属性值相等就累加，并且push 0
              rowAndColumn[pos] += 1
              rowAndColumn.push(0)
            } else {
              // 不相等push 1
              rowAndColumn.push(1)
              pos = i
            }
          }
        }
        this.multiColumnCount[key] = rowAndColumn
      })
    },
    // 合并单元格函数
    mergeRow: function({ row, column, rowIndex, columnIndex }) {
      // 行合并
      if (this.mergeRowKeys.includes(column.property)) {
        if (this.multiColumnCount[column.property][rowIndex]) {
          const rowNum = this.multiColumnCount[column.property][rowIndex]
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      // 列合并
      if (this.mergeColIndex && this.mergeColIndex.length > 0) {
        var num = 1
        // 当前列的index在columnList中对应的index值，如果表格还需要展示复选框，则需要将index 再 减去1
        const notOperationIndex = this.columnList[this.columnList.length - 1].operations && this.columnList[this.columnList.length - 1].operations.length > 0 ? this.columnList.length - 2 : this.columnList.length - 1
        const endIndex = this.mergeColIndex.length > 1 ? this.mergeColIndex[1] : notOperationIndex
        // 如果当前列不在columnList中或者当前列超出了需合并列的index，则不进行任何操作
        if (columnIndex < 0 || columnIndex > endIndex) {
          return [1, 1]
        }
        // 如果当前列与前一列值相同，则进行合并，将单元格隐藏
        if (columnIndex > 0 && row[this.columnList[columnIndex].prop] === row[this.columnList[columnIndex - 1].prop]) {
          return [0, 0]
        }
        for (let i = columnIndex + 1; i <= endIndex; i++) {
          // 若值与前一单元格值相等，则需合并单元格的值++
          if (row[this.columnList[i].prop] === row[this.columnList[i - 1].prop]) {
            num++
          } else {
            // 如果值不相等则返回合并单元格范围
            return [1, num]
          }
        }
        return [1, num]
      }
    },

使用方式

table属性

columnList 属性详述

pageable 属性详述

operations 属性详述

作用域插槽