vue + element-UI 表格 底部 合計總數

效果圖

 

 

 

html

必須要加上prop

          <el-table :summary-method="getSummaries" show-summary stripe :data="bankData" border max-height="500px" highlight-current-row > <el-table-column align="center" prop="date"label="英文姓名" > <template slot-scope="scope"> <span >@{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column align="center" prop="name" label="國籍" > <template slot-scope="scope"> <span >@{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column align="center" prop="amount1" label="國aa籍" > <template slot-scope="scope"> <span >@{{ scope.row.amount1 }}</span> </template> </el-table-column> </el-table> 

js

           bankData: [{
                            date: '1',
                            name: '1',
                            amount1: '2',
                          }, {
                            date: '2',  
                            name: '1',
                            amount1: '2',
                          },
                          {
                            date: '31',
                            name: '1',
                            amount1: '2',
                          },    
                          ],

方法

  getSummaries(param) { // 上面自定義 內容 const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = '總價'; return; } const values = data.map(item => Number(item[column.property])); console.log(values) 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); sums[index] += ' 元'; } else { sums[index] = 'N/A';//當不是number數字是返回的內容 } }); console.log(sums); // 先看輸出格式，看最終要返回什么數據 return sums; }, 

 

  

鏈接：https://www.jianshu.com/p/9dc0e32143d2