记vue使用Element UI分页出现的问题

最新推荐文章于 2023-12-12 18:12:42 发布

原创

最新推荐文章于 2023-12-12 18:12:42 发布 · 1.5k 阅读

文章标签：

#vue #elementui

在使用Vue和Element UI进行项目开发时，遇到分页与筛选数据的交互问题。当点击分页后再进行筛选，后端返回空数组，原因是筛选函数中未正确处理分页参数。解决方法是确保在筛选时将分页参数page设为0。此外，如果返回数据过多，分页显示会出错，显示的页码与实际不符。通过设置currentPage为1，可以解决此问题。分享这个问题和解决方案，避免同类错误的发生。

最近在整理之前项目代码时，无意间发现了几个隐藏的bug，这bug藏得真深啊~~~

先上代码：

<template>
    <div>
        <el-row class="page_title">
            <el-col :span="24">
                <span>操作日志</span>
                <hr>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" style="line-height:45px">
                <span id="span_sty">日志类型：</span><dictionary selectkey="apiType" @selectfun="selectVal"/>&nbsp;&nbsp;
                <span id="span_sty">用户名：</span><el-input style="width:210px;" @input="setValueNull" placeholder="请输入内容"  v-model="query.username"  clearable @clear="setValueNull"></el-input>&nbsp;&nbsp;
                <span id="span_sty">开始时间：</span>
                <el-date-picker v-model="query.beginTime" value-format='yyyy-MM-dd HH:mm' @change='setValueNull' type="datetime" placeholder="选择日期时间"></el-date-picker>&nbsp;&nbsp;
                <span id="span_sty">结束时间：</span>
                <el-date-picker v-model="query.endTime" value-format='yyyy-MM-dd HH:mm' @change='setValueNull' type="datetime" placeholder="选择日期时间"></el-date-picker>&

最低0.47元/天解锁文章