element ui table组件自定义合计栏,后台给的数据

Posted 2021-01-22 antyhouse

合计的数据是后台传的，所以用table组件自定义一行用来合计

                      <el-table
                        border 
                        fit  
                        v-loading.body="listLoading" 
                        element-loading-text="拼命加载中"
                        :data="getChannelData"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        ref="multipleTable"
                        @select-all="getAllCheck"
                        @select="getSomeCheck"
                        :summary-method="getSummaries"
                        show-summary
                        >
                        <el-table-column
                        type="selection"
                        align="center"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        prop="channel"
                        label="渠道"
                        align="center"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="intentionNum"
                        label="生成意向数量"
                        sortable
                        align="center"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="clueNum"
                        label="生成线索数量"
                        sortable
                        align="center"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        prop="conversionRate"
                        label="转化率"
                        align="center"
                        sortable
                        >
                        </el-table-column>
                        <el-table-column
                        prop="levelOne"
                        label="级别A"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="levelTwo"
                        label="级别B"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="levelThree"
                        label="级别C"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="levelFour"
                        label="级别D"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="highQuality"
                        label="优质线索率"
                        align="center"
                        sortable
                        >
                        </el-table-column>
                        <el-table-column
                        prop="pubishNum"
                        label="上架数量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="buyCount"
                        label="购买数量"
                        sortable
                        align="center"
                        >
                        </el-table-column>
                    </el-table>

:summary-method="getSummaries"
show-summary这两个是必要的,上面的是自定义,下面的是显示table栏的作用
接下来的写在method里面就好

getSummaries(param) {   
       const { columns, data } = param;
       const sums = [];
       console.log(this.getAllTotalData,'this.getAllTotalData2')
       columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';    //这里就是显示你要写的啥名字,是合计还是汇总什么 
          return;
        }
        switch(column.property) {  //column.property是prop="highQuality" prop里面的东西,实在不知道可以打印出来是什么
        case "channel":
        sums[index] = '--'   
        case "levelOne":   //这是是根据prop来判断是那一列的数据
        sums[index] = this.getAllTotalData.levelOneTotal //sums[index]是固定写法  this.getAllTotalData.levelOneTotal 表示的是每一空格是要写什么内容,this.getAllTotalData就是后台的数据
        case "levelTwo":
        sums[index] = this.getAllTotalData.levelTwoTotal
        case "levelThree":
        sums[index] =this.getAllTotalData.levelThreeTotal
        case "levelFour":
        sums[index] = this.getAllTotalData.levelFourTotal
        case "intentionNum":
        sums[index] = this.getAllTotalData.intentionNum  
        break;
        case "clueNum":
        sums[index] = this.getAllTotalData.clueNum
        break;
        case "conversionRate":
        sums[index] = this.getAllTotalData.conversionRate
        break;
        case "highQuality":
        sums[index] = this.getAllTotalData.highQuality
        break;
        case "pubishNum":
        sums[index] = this.getAllTotalData.pubishNum
        break;
        case "buyCount":
        sums[index] = this.getAllTotalData.buyCount
        break;
        default:
        break;
        }
       });
       return sums;
    }

参考 https://www.jianshu.com/p/c3826f38e6cd