fix: 投资记账管理系统，分页统一修复。

src/views/invest/productInfor/index.vue

@@ -34,8 +34,9 @@
         </div>
       </div>
       <div class="content-con" v-loading="loading">
-        <el-table v-loading="loading" :data="productInforList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="productInforList" @selection-change="handleSelectionChange" height="calc(100% - 0.62rem)">
           <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" :index="indexMethod" width="50"></el-table-column>
           <el-table-column label="商品名称" align="center" prop="name" />
           <el-table-column label="商品编码" align="center" prop="code" />
           <el-table-column label="类别" align="center" prop="category">
@@ -60,7 +61,14 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination small background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
+        <el-pagination
+          small
+          background
+          layout="total,sizes, prev, pager, next"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
     </div>
     <!-- 添加或修改商品基础信息对话框 -->
@@ -210,6 +218,18 @@ const handleCurrentChange = (val) => {
   getList()
 }
 
+//每页显示条数改变
+const handleSizeChange = (val) => {
+  queryParams.value.pageSize = val
+  getList()
+}
+// 序号翻页递增
+const indexMethod = (index) => {
+  const nowPage = queryParams.value.pageNum //当前第几页，根据组件取值即可
+  const nowLimit = queryParams.value.pageSize //当前每页显示几条，根据组件取值即可
+  return index + 1 + (nowPage - 1) * nowLimit // 这里可以理解成一个公式
+}
+
 // 多选框选中数据
 function handleSelectionChange(selection) {
   ids.value = selection.map((item) => item.id)