在vue项目里面使用element的pagination分页技术总结

最新推荐文章于 2024-06-18 08:22:01 发布

原创最新推荐文章于 2024-06-18 08:22:01 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI的el-pagination组件时，避免`current-change`事件触发，只响应`size-change`，并演示了如何设置初始每页数据量msgSize和监听其变化。

在main.js中引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

html：

<el-pagination
        :total="total"
        :page-size="msgSize"
        background
        :page-sizes="[2, 3, 5, 10, 50, 100]"
        :pager-count="5"
        :current-page="msgPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

js：

需要定义的数据：data

data() {
    return {
      total:0,
      tableData:null,
      msgPage:0,
      msgSize:5 
    }
  },

函数：

methods: {
    handleSizeChange(val) {
      this.msgSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.msgPage = val;
      this.getList();
    },
    getList() {
      if (this.msgPage < 0) this.msgPage = 1;
      let param = {
        token: sessionStorage.getItem('token'),
        pageNum: this.msgPage,
        pageSize: this.msgSize,
      }
      getAllPaper(param).then(response => {
        console.log("param",param)
        if (response.data.code == '100') {
          this.tableData = response.data.data.list
          this.total = response.data.data.total

        }
      })
    },
  }

注意点：

msgSize:5影响了每页多少条数据的初始值，当msgSize:5时，初始就是5条，

参考文章：element-ui中el-pagination分页组件，切换每页显示数量时，有时候数据不显示或获取到的数据为空；只想触发size-change事件不触发current-change事件