el-table——可合并单元格的表格

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :span-method="colSpanMethod"
    > </el-table>
   //需要的合并效果：data
          spanArrs: {
            amount1: [], // 合并单元格的参数
            amount2: []
          }

　　　　const amount2 = this.getSpanArr(tableData, 'amount2')

　　　　const spanArrs = {

　　　　　　// amount1:amount1,

　　　　　　amount2: amount2

　　　　}

// 合并列函数:methods
    colSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.spanArrs[column.property] && columnIndex < 1) { // 2
        const _row = this.spanArrs[column.property][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    // 计算合并个数:key代表需要合并的参数
    getSpanArr (data, key) {
      let spanArr = []
      let spanIndex = null
      if (data == null) {
        return []
      } else {
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1)
            spanIndex = 0
          } else {
            if (data[i][key] === data[i - 1][key]) {
              spanArr[spanIndex] += 1
              spanArr.push(0)
            } else {
              spanArr.push(1)
              spanIndex = i
            }
          }
        }
        return spanArr
      }
    },
    // 排序：可以让后台返回排序后的内容，避免合并后内容不对应
    sortBy (attr, rev) {
      if (!rev) {
        rev = 1
      } else {
        rev = (rev) ? 1 : -1
      }
      return function (a, b) {
        a = a[attr].toLowerCase()
        b = b[attr].toLowerCase()
        if (a < b) {
          return rev * -1
        }
        if (a > b) {
          return rev * 1
        }
        return 0
      }
    },

 

转载于:https://www.cnblogs.com/wheatCatcher/p/11170073.html