1. 程式人生 > >element ui table元件自定義合計欄,後臺給的資料

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] = '--'   
        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