【开源代码学习--若依】表格分页问题

1 问题引入

Vue官方文档

表格实现了分页，但是点击页码后会将所有数据显示或不刷新页面，观察后台，并没有调用操作。

原因：回调函数出了问题，没有正确传参。

2 分页实现

参考：若依管理系统源码分析-分页的实现以及post请求时的分页

2.1 前端调用

// 一般在查询参数中定义分页变量
queryParams: {
  pageNum: 1,
  pageSize: 10
},
 
// 页面添加分页组件，传入分页变量
<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>
 
// 调用后台方法，传入参数 获取结果
listUser(this.queryParams).then(response => {
    this.userList = response.rows;
    this.total = response.total;
  }
);

2.2 后台逻辑实现

@PostMapping("/list")
@ResponseBody
public TableDataInfo list(User user)
{
    startPage();  // 此方法配合前端完成自动分页
    List<User> list = userService.selectUserList(user);
    return getDataTable(list);
}

3 解决

回调函数进行参数传递：@pagination="handleDynamic(dynamicRow)

<el-table v-loading="dynamicLoading" :data="dynamicList" @selection-change="handleSelectionChange" v-fit-columns>
    <el-table-column label="行为类别" align="center" prop="category" width="140px"/>
    <el-table-column label="危害等级" align="center" prop="hazardLevel" width="140px"/>
    <el-table-column label="危害得分" align="center" prop="hazardScore" width="140px"/>
    <el-table-column label="类目行为代表" align="center" prop="represent" />
</el-table>
<pagination
            v-show="dynamicTotal>0"
            :total="dynamicTotal"
            :page.sync="queryDynamicParams.pageNum"
            :limit.sync="queryDynamicParams.pageSize"
            @pagination="handleDynamic(dynamicRow)"
/>

其中：v-loading 作用为加载动画。

4 其他问题(未解决)

正常情况下，表格页面展示会默认从第一页开始。但是实践过程中会从上次表格页数展示，即使是不同的表格。

X 参考

• 官方文档——表格