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

合计的数据是后台传的，所以用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] = '--'
        break;
        case "levelOne":   //这是是根据prop来判断是那一列的数据
        sums[index] = this.getAllTotalData.levelOneTotal //sums[index]是固定写法  this.getAllTotalData.levelOneTotal 表示的是每一空格是要写什么内容,this.getAllTotalData就是后台的数据
       break;
        case "levelTwo":
        sums[index] = this.getAllTotalData.levelTwoTotal
       break;
       case "levelThree":
        sums[index] = this.getAllTotalData.levelThreeTotal
        break;
        case "levelFour":
        sums[index] = this.getAllTotalData.levelFourTotal
        break;
        case "intentionNum":
        sums[index] = this.getAllTotalData.intentionNumTotal
        break;
        case "clueNum":
        sums[index] = this.getAllTotalData.clueNumTotal
        break;
        case "conversionRate":
        sums[index] = this.getAllTotalData.conversionRateTotal
        break;
        case "highQuality":
        sums[index] = this.getAllTotalData.highQualityTotal
        break;
        case "pubishNum":
        sums[index] = this.getAllTotalData.pubishNumTotal
        break;
        case "buyCount":
        sums[index] = this.getAllTotalData.buyCountTotal
        break;
        default:
        break;
        }
       });
       return sums;
    }

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