PageHelper.StartPage方法失效。element-ui 分页修改current-page后，视图上还是没改变

最新推荐文章于 2024-04-20 15:29:40 发布

原创最新推荐文章于 2024-04-20 15:29:40 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

在使用 Element-UI 的分页组件时，遇到PageHelper.StartPage方法未正常工作的问题。当尝试点击页码改变`current-page`属性时，视图并未更新。解决方案是在绑定`current-page`时使用`.sync`修饰符，确保参数能正确传入并更新分页状态。

Integer pageSize = queryPageBean.getPageSize();
Integer pageNum = queryPageBean.getCurrentPage();
String queryString = queryPageBean.getQueryString();

Integer currentPage = (pageNum-1)*pageSize;//当前页计算成limit需要的数值

List<Cash> page = cashMapper.findCashListByPage(currentPage, pageSize,queryString);

手动将参数计算，重新传入sql语句

Mapper.xml文件中sql如下：

<!--分页查询提现列表-->
<select id="findByPage" parameterType="Map" resultType="com.chuang.pojo.Cash">
    SELECT * FROM t_cash
    <if test="queryString != null and queryString.length > 0">
        where username = #{queryString}
    </if>
    limit #{currentPage},#{pageSize}
</select>




<el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
</el-pagination>

element-ui配置完成分页后，点击页码数字，current-page并没有变化，请求传进去的参数还是原来的。

加上".sync"后生效，成功传入参数

<el-pagination
        class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
</el-pagination>