Element的Pagination分页sync问题小结

今天用到Element-UI的Pagination分页组件时选择页面大小时和点击分页时，无法动态刷新页面数据,数据如下：

<div class="pagination">
      <el-pagination
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

错误如下：

按官方所说，加.sync，优化如下:

<div class="pagination">
      <el-pagination
      background
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

还是存在问题,当前页面能改变，但页面大小不变，如下所示:

问题解析 ===> Element-ui el-pagination封装之sync多层的问题

最终优化方案：

<div class="pagination">
      <el-pagination
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange"
      ></el-pagination>
</div>
methods: {

    handlePageChange(val) {
      this.currentPage = val
    },
    handlePageSizeChange(val) {
      this.pageSize =val
    }
}

优化结果:

到此这篇关于Element的Pagination分页sync问题小结的文章就介绍到这了,更多相关Element Pagination分页sync内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • Vue中ElementUI分页组件Pagination的使用方法

    Vue中ElementUI分页组件Pagination的使用方法

    Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下 一.概要 ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页. 二.实现 1.基本用法 <div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page

  • Element的Pagination分页sync问题小结

    Element的Pagination分页sync问题小结

    今天用到Element-UI的Pagination分页组件时选择页面大小时和点击分页时,无法动态刷新页面数据,数据如下: <div class="pagination"> <el-pagination background :page-size="pageSize" :current-page="currentPage" :page-sizes='[5, 10, 20, 40]' :total="tableData.l

  • EasyUI Pagination 分页的两种做法小结

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,一种是datagrid默认机制,另一种是利用 Ajax 获取数据并填充 Datagrid,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Con

  • jQuery Pagination分页插件使用方法详解

    本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下 一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo

  • jquery pagination分页插件使用详解（后台struts2）

    jquery pagination分页插件使用详解（后台struts2）

    页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:

  • 利用vue + element实现表格分页和前端搜索的方法

    前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理

  • jQuery pagination分页示例详解

    本文实例为大家分享了jQuery pagination分页示例的具体代码,供大家参考,具体内容如下 前台html <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="v

  • vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#￥%--&*()--\-+={}|<>?:""[].:'',..]/g, '').replace(/\s/g, ""); if (value.

  • vue+element tabs选项卡分页效果

    本文实例为大家分享了vue+element tabs选项卡分页效果的具体代码,供大家参考,具体内容如下 文件目录: 功能展示: 路由配置: { path: '/account', component: ()=> import('../components/home/home.vue'), //布局页面 redirect: '/account/all-account/list', //定向到list路径 name: '账号管理', children: [ { path: '/account/all

  • element table跨分页多选及回显的实现示例

    1.data中定义getRowKeys,记录每行的key值 getRowKeys(row) {    return row.id; }, 2.el-table绑定getRowKeys <el-table     :data="tableData"     @selection-change="handleSelectionChange"     :row-key="getRowKeys" > 3.将selection列的reserve

  • Angular ui.bootstrap.pagination分页

    Angular ui.bootstrap.pagination分页

    本文实例为大家分享了Angular 分页的具体代码,供大家参考,具体内容如下 1.Html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyPagination</title> <link href="//netdna.bootstrapcdn

随机推荐