详解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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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
用PHP读注册表
2006/10/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python正则表达式指南 推荐
2018/10/09 Python
用Django写天气预报查询网站
2018/10/21 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python中取绝对值简单方法总结
2020/07/24 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
药学专业大专生的自我评价
2013/12/12 职场文书
大学英语专业求职信
2014/06/21 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL