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
      }
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM