zoukankan      html  css  js  c++  java
  • vue 按年份归类table

    效果:

     


    代码:

    <div class="table tableSty" style="margin-top: 20px" v-for="item in stepByYearArr">
                            
      <el-table :data="item" border stripe style=" 99%" :cell-style="tableHeaderColor" :span-method="objectSpanMethod">
          <el-table-column v-for="(keyItem, index) in item[0]" :key="index" :prop="(index)"  align="center" ></el-table-column>
      </el-table>
    </div>
    methods:{
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
              return "color: #4f81bd;font-weight: bold ;";
            }
       },  
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if (rowIndex === 2 || rowIndex === 3) {
              let len = Object.keys(row).length
              if(columnIndex === 0){
                return [1, 1];
              }else if(columnIndex === 1){
                return [1, len];
              }else{
                  return [0, 0];
              }
            }
          },  
    }

    后台返回数据格式:

    封装:

            
             let data = res.data.list
             let serverTr1 = {td0:"月份"}
                  let serverTr2 = {td0:"营收(万)"}
                  let serverTr3 = {td0:"月平均(万)"}
                  let serverTr4 = {td0:"合计(万)"}
                  let sum = 0
                  let avg = 0
                  data.sort(this.compareAsc("month"))
                  for(let i = 0; i < data.length; i++){
                    data[i].monthStr = data[i].month.substring(0,4)
                    sum += data[i].step1OutputValue + data[i].step2OutputValue
                    avg = ((sum/data.length)/10000).toFixed(2)
                    serverTr1["td"+ (i*1+1)] = data[i].month;
                    serverTr2["td"+ (i*1+1)] = ((data[i].step1OutputValue + data[i].step2OutputValue) / 10000).toFixed(2);
                  }
    
    
    
                // 按年
                  let sortDataArr = this.sortArr(data, 'monthStr')
                  let stepByYearArr = []
                  for(let i in sortDataArr) {
                    let trLabel1 = {td1:'月份'}
                    let trLabel2 = {td1:'营收(万)'}
                    let trLabel3 = {td1:'月平均(万)'}
                    let trLabel4 = {td1:'合计(万)'}
                    let trsum = 0
                    let travg = 0
                    for (let j in sortDataArr[i]) {
                      trsum += sortDataArr[i][j].step1OutputValue + sortDataArr[i][j].step2OutputValue
                      travg = ((trsum/sortDataArr[i].length)/10000).toFixed(2)
                    }
    
                    for (let j in sortDataArr[i]) {
                      trLabel1["td"+ (j*1+2)] = sortDataArr[i][j].month
                      trLabel2["td"+ (j*1+2)] = ((sortDataArr[i][j].step1OutputValue + sortDataArr[i][j].step2OutputValue) / 10000).toFixed(2)
                      trLabel3["td"+ (j*1+2)] = travg;
                      trLabel4["td"+ (j*1+2)] = (trsum/10000).toFixed(2);
                    }
                    stepByYearArr.push([trLabel1, trLabel2, trLabel3, trLabel4])
                  }
                  this.stepByYearArr = stepByYearArr

    最后的数据样式:

    好了,大功告成啦

  • 相关阅读:
    CNN comprehension
    Gradient Descent
    Various Optimization Algorithms For Training Neural Network
    gerrit workflow
    jenkins job配置脚本化
    Jenkins pipeline jobs隐式传参
    make words counter for image with the help of paddlehub model
    make words counter for image with the help of paddlehub model
    git push and gerrit code review
    image similarity
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/15525118.html
Copyright © 2011-2022 走看看