vue element-ui中table合計指定列求和例項
阿新 • • 發佈:2020-11-04
注意點:
1. <el-table> 中 加:summary-method="getSummaries"
2. <el-table-column> 中要加 prop
// 房間號的合計去掉 getSummaries (param) { const { columns,data } = param const sums = [] columns.forEach((column,index) => { if (index === 0) { sums[index] = '總計' } else if (index === 5 || index === 6) { const values = data.map(item => Number(item[column.property])) if (!values.every(value => isNaN(value))) { sums[index] = values.reduce((prev,curr) => { const value = Number(curr) if (!isNaN(value)) { return prev + curr } else { return prev } },0) } else { sums[index] = 'N/A' } } else { sums[index] = '--' } }) return sums }
效果圖
補充知識:vue+elementUI的表格最後一行合計自定義顯示
1.在看了elementUI的文件後重要的倆個屬性是 show-summary :summary-method="getSummaries" getSummaries這個是自定義方法函式的方法。
HTML的程式碼:
show-summary :summary-method="getSummaries的屬性要加上,還有一個很重要的一點就是要 必須要在el-table-column中必須是prop來傳值"
<el-table :key='tableKey' :data="listData" show-summary :summary-method="getSummaries" v-loading="listLoading" border fit highlight-current-row style="width:100%;margin-top:8px" :header-cell-style="{background:'oldlace'}">> <el-table-column prop="equipmentType" align="center" label="裝置型別" min-width="50"> </el-table-column> <el-table-column prop="equipmentName" align="center" label="裝置名稱" min-width="50"> </el-table-column> <el-table-column prop="equipmentCode" align="center" label="裝置編號" min-width="50"> </el-table-column> <el-table-column prop="openRate" align="center" label="開機率" min-width="50"> </el-table-column> <el-table-column prop="planWorkTime" align="center" label="計劃工作時間" min-width="50"> </el-table-column> <el-table-column prop="closeTime" align="center" label="關機時間(h)" min-width="50"> </el-table-column> <el-table-column prop="machiningTime" align="center" label="加工時間(h)" min-width="50"> </el-table-column> <el-table-column prop="stopTime" align="center" label="停工時間(h)" min-width="50"> </el-table-column> <el-table-column prop="debugTime" align="center" label="除錯時間(h)" min-width="50"> </el-table-column> <el-table-column align="center" label="檢視" min-width="210"> <template slot-scope="scope"> <el-button title="時序圖" type="primary" size="mini" @click="profile(scope.row)" v-show="SXTbatshow">時序圖</el-button> <el-button title="狀態時長統計圖" type="danger" size="mini" @click="cartogram(scope.row)">狀態時長統計圖</el-button> <el-button title="狀態佔比圖" type="success" size="mini" @click="diagram(scope.row)">狀態佔比圖</el-button> </template> </el-table-column> </el-table>
在script要寫的程式碼:
// 表格總計的時間 getSummaries(param) { const { columns,data } = param; /* console.log(1234) console.log(param) */ const sums = []; columns.forEach((column,index) => { if (index === 0) { sums[index] = '總計'; return; } //this.closeList等等是後臺返回的總的資料,然後取值到這裡 switch(column.property) { case "closeTime": sums[index] = this.closeList + ' h' break; case "machiningTime": sums[index] = this.machiningTimeList + ' h' break; case "stopTime": sums[index] = this.stopTimeList + ' h' break; case "debugTime": sums[index] = this.debugTimeList + ' h' break; default: break; } }); return sums; },
效果圖:
以上這篇vue element-ui中table合計指定列求和例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。