ElementUI之封装分页表格，数据实现多条件查询，刷新返回第一页，修改刷新后仍留在当前页

Paginate.vue

<template>
    <div class="pagination">
        <div class="total">共 <span style="color: #409EFF;font-weight: bolder">{{total}}</span> 条数据,当页有 <span  style="color: #409EFF;font-weight: bolder">{{currentDataLength}}</span> 条数据。</div>
        <!--v-if="total != 0" 解决刷新分页插件后，内容保留在当前页，但是页码不在 让分页组件在created之后加载-->
        <el-pagination
                background
                layout="prev, pager, next,jumper"
                :page-size="$Config.pageSize"
                @current-change="change"
                :current-page.sync="current"
                :total="total"
                v-if="total != 0">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: 'Paginate',
        props: {
            api: String,
            params: Object,
            refresh: Boolean,
            paginateName:String
        },
        data() {
            return {
                total: 0,
                current: 0,
                currentDataLength: 0,
            }
        },
        methods: {
            paginate: function () {
                //参数包含自定义的多条件 和 当前页页码 保证在修改时不会修改完执行刷新操作跳回第一页
                let params = this.params;
                /*params.pageSize = this.$Config.pageSize;*//*可以自定义一页的条数  本例后端没有接收 注释了*/
                params.pageCode = this.current;
                let thisApp = this;

                /*Axios向后端发送请求 并执行回调函数*/
                thisApp.$Api[thisApp.api](params, function (data) {
                    thisApp.total = data.total;
                    thisApp.currentDataLength = (data.list).length;
                    thisApp.$emit('val-change', data.list);
                })
            },
            //点击页码触发事件  每点击一次 就会获取当前页 将当前页存入sessionStorage中
            change: function (page) {
                this.current = page;
                this.setContextData(this.paginateName+"current", this.current);
                //刷新页面内容
                this.paginate();
            },
            //给sessionStorage存值，解决刷新回到第一页的问题
            setContextData(key, value) {
                if (typeof value == "string") {
                    sessionStorage.setItem(key, value);
                } else {
                    sessionStorage.setItem(key, JSON.stringify(value));
                }
            },
            //从sessionStorage取值
            getContextData(key) {
                const str = sessionStorage.getItem(key);
                if (typeof str == 'string') {
                    try {
                        return JSON.parse(str);
                    } catch (e) {
                        return str;
                    }
                }
                return;
            }
        },
        watch: {
            'refresh': {
                handler: function () {
                    //使回到当前页
                    this.current = this.getContextData(this.paginateName+"current") || 1;
                    this.paginate();
                },
                immediate: true,
                // 深度观察
                deep: true
            }
        },
        mounted: function () {
            this.paginate();
        },
        created() {
            //从sessionStorage中取出当前页
            this.current = this.getContextData(this.paginateName+"current") || 1;
        }
    }
</script>
<style lang="less" scoped>
    .pagination {
        padding: 7px;
        border: 1px solid #ebeef5;
        background: #fff;
        text-align: right;
    }

    .total {
        float: left;
        margin-top: 8px;
        margin-left: 10px;
        font-size: 13px;
        color: #606266;
    }
</style>

车辆页面调用分页组件

1. 导入Paginate.vue

   import Paginate from '~/components/Pagination/Paginate.vue';
   

2. components中加入Paginate

    components: {
           Paginate
    },
   

3. 加载分页组件

    <!--分页组件-->
   <Paginate :api="queryApi"
               :params="searchParams"
               :refresh="refresh"
               :paginateName="carPaginate"
               @val-change="changeAllList">
   </Paginate>
   

   • api 为分页组件向后端获取数据的函数名
   • params 为多条件查询的条件数据
   • refresh 重新加载标识
   • paginateName 当前分页的分页名字,为了页码存入session作为标识
   • @val-change 分页组件获取数据后触发（将获取数据赋予当前页）

4. 页面查询多条件数据

    //加载分页列表
    searchParams: {
        carId: '',
        carType: '',
        carColor: '',
        isRenting: '',
        rentPrice: ''
    },
    queryApi: "queryCarList",
    refresh: false,
    huaWeiUrl: 'https://leitianquan.obs.cn-north-4.myhuaweicloud.com/',
    pictureTitle: '号车辆',
   

5. 页面查询函数

   • 重置多条件数据

     //重置查询条件 设置页码为第一页
     resetForm() {
          this.searchParams.carId = '';
          this.searchParams.carType = '';
          this.searchParams.carColor = '';
          this.searchParams.isRenting = '';
          this.searchParams.rentPrice = '';
          // 将session中的页码设置为第一页 （Paginate.vue中获取session中的页码数据）
          sessionStorage.setItem(this.carPaginate+"current", 1);
          this.queryCarList()
     },
     

   • 多条件查询函数

     //点击多条件查询按钮 设置页码为第一页
     searchQuery(){
         sessionStorage.setItem(this.carPaginate+"current", 1);
         this.queryCarList();
     },
     
     //多条件触发查询车辆更新
     queryCarList() {
         this.refresh = !this.refresh;
     },
     
     //根据获取表格值改变当前表格
     changeAllList(carList) {
         this.carList = carList;
     },
     

   • 多条件查询按钮和重置按钮

      <el-button @click="searchQuery" type="success" icon="el-icon-search" size="small"></el-button>
      <el-button @click="resetForm" type="warning" icon="el-icon-refresh"
                        size="small" id="resetBtn"></el-button>