zoukankan      html  css  js  c++  java
  • 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
          }
        },
  • 相关阅读:
    阿里云CDN缓存加速学习总结
    阿里云SLB学习总结
    zabbix3.2安装
    drf中的增删改查接口
    drf中二次封装Response
    drf常用模块
    Django—auth模块
    csrf跨站请求伪造与CBV装饰器
    Django—cookie与session
    Django—中间件(待更新)
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/11170073.html
Copyright © 2011-2022 走看看