vue2 el-table有分页 合计固定在最后一行

Vue2 中的 Element UI (`el-table`) 提供了内置的分页功能，如果你想让表格的总和固定在最后一页并且总是显示在最后一行，可以结合 `el-pagination` 和一些自定义处理来实现。以下是一个简单的步骤：

1. 首先，在模板上设置 `el-table` 和 `el-pagination`：

   <template>
     <div>
       <el-pagination :total="totalCount" :current-page.sync="currentPage" @current-change="handleCurrentChange"></el-pagination>
       <el-table :data="tableData" style="width: 100%">
         <!-- ...表头... -->
         <el-row>
           <el-col>合计</el-col>
           <el-col>{{ totalSum }}</el-col>
         </el-row>
         <!-- ...表体数据... -->
       </el-table>
     </div>
   </template>

2. 确保你在组件的数据属性中维护总数据 (`tableData`) 和分页状态 (`totalCount`, `currentPage`):

   data() {
     return {
       tableData: [], // 初始化为空数组
       totalCount: 0,
       currentPage: 1,
       totalSum: 0, // 初始总和
       //...
     };
   },

3. 当分页改变时，更新 `totalSum` 并重新计算表格数据（假设你有一个函数 `calculateTotalSum()` 来计算总和）：

   methods: {
     handleCurrentChange(page) {
       this.currentPage = page;
       if (page === 1) { // 如果是第一页，需要重新计算总和
         this.totalSum = calculateTotalSum(this.tableData);
       }
     },
     //...
   },
   created() {
     // 计算初始总和
     this.totalSum = calculateTotalSum(this.tableData);
   },
   computed: {
     // 如果数据量很大，也可以选择在计算时只返回当前页的数据，而不是整个列表
     formattedTableData() {
       const start = (this.currentPage - 1) * this.currentPerPage;
       const end = start + this.currentPerPage;
       return this.tableData.slice(start, end);
     },
     currentPerPage: {
       get() {
         return Math.min(this.totalCount, this.$el.scrollWidth / this.$refs.table.offsetWidth); // 根据屏幕宽度动态设置每页显示的行数
       },
       set(value) {
         this.currentPage = Math.ceil(this.totalCount / value);
       }
     }
   },

4. 使用 `formattedTableData` 替换 `tableData` 作为实际渲染的数据，避免每次都遍历整个列表。

这样，每次分页切换时，你会看到总和固定在最后一页的最后一行。