详解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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JavaScript实现弹出窗口效果
Dec 09 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 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
django实现类似触发器的功能
2019/11/15 Python
Django实现内容缓存实例方法
2020/06/30 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
学生自我鉴定
2013/12/18 职场文书
十佳青年事迹材料
2014/08/21 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Python实现滑雪小游戏
2021/09/25 Python
python_tkinter事件类型详情
2022/03/20 Python