详解vue修改elementUI的分页组件视图没更新问题


Posted in Javascript onNovember 13, 2020

今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页。

今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处。

然后想了想,想起了.sync这个语法糖,让数据进行双向绑定。

直接上修改的代码看看

<el-pagination
  :current-page.sync="currentPage"
  :page-sizes="[10, 30, 50]"
  :page-size="pageSize"
  :total="total"
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
refresh () {
 this.handleCurrentChange(1)
 this.currentPage = 1
}

具体原因我想了一下,可能是因为修改this.currentPage,分页组件没办法通知父组件视图更新,所以添加了.sync修饰符使得子组件能和父组件进行沟通,从而实现双向绑定,父组件获取到更新后的值重新渲染页面。

element-ui 接口返回有数据但是视图没有更新

前言:一般情况下,接口有数据返回,但相应的视图不更新,只会有两种情况:
1.在这个数据要更新之前有报错或者有不严谨的判断。
2.vue 对象、数组不能深层监听。

一、排查有无不严谨的判断和报错。

二、vue 对象不允许在已创建的的实例上动态添加新的根级响应式属性 。(参考vue官网)
如果非要这么做的话,我们可以使用 this.$set()。

this.$set() 可以接收三个参数 1. 要绑字的数据。 2. 要添加或修改的属性名称。 3. 要赋的值

this.$set(this.projectList, 'projectName', 'chenxuemin')

三、手动更新视图

它可以影响到本实例及本实中的 slot 插槽内容

this.$forceUpdate() // vm.$forceUpdate()

到此这篇关于详解vue修改elementUI的分页组件视图没更新问题的文章就介绍到这了,更多相关vue element分页组件视图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
You might like
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
基于Python代码编辑器的选用(详解)
2017/09/13 Python
详解Python3注释知识点
2019/02/19 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
车间主管岗位职责
2013/11/14 职场文书
创先争优承诺书
2015/01/20 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
入团申请书格式
2019/06/20 职场文书
Python Parser的用法
2021/05/12 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis