element ui table元件自定義合計欄,後臺給的資料
阿新 • • 發佈:2018-11-23
合計的資料是後臺傳的,所以用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