element组件el-table绑定数据时使用分页组件不能更新改变

最新推荐文章于 2024-07-11 00:15:48 发布
最新推荐文章于 2024-07-11 00:15:48 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： second small bug 文章标签： second bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ningjiangjinling/article/details/90521116
版权

使用条件
使用vue和element组件，el-table和分页组件el-pagination
主要问题
在进行点击跳页查询数据的时候除了点击第一页，一旦点击其他页面el-table的表格数据不会发生变化，但是如果在js中输出查询数据会发现查询出来的数据其实就是我们想要的数据，只是el-table表格界面没有及时渲染，从这可以知道这不是后台的问题，是element组件的bug。
问题解决
1.把与el-table绑定的变量清空
2.动态定义属性数组等于后台返回的数据js部分视图
最后把数组的值赋值给el-table即可组件界面部分视图

ningjiangjinling
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select数据过多懒加载的解决(loadmore)
10-16
不过，在处理大量数据时，若直接渲染所有数据项，会导致el-select组件的渲染性能下降，甚至可能导致界面卡顿。为了解决这一问题，可以通过实现懒加载技术来提升用户体验。本文主要介绍el-select组件在数据量过多时...
监听element-ui table滚动事件的方法
10-17
当使用Element-UI的`el-table`组件时，监听滚动事件可以帮助我们实现无限滚动加载，即用户滚动到表格底部时自动加载下一页数据。 ### 方法 1. **设置表格基础结构** 首先，我们需要创建一个包含`el-table`的Vue模板...
解决el-table数据变化，视图不更新的问题
Cocoon_Xu的博客
05-09 833
今天在项目上要实现一个在表格里使用el-radio实现单选功能，遇到一个问题是选择不同行内的单选框时，其他行的radio状态不更新，如图：（左侧是正常效果，右侧为bug图）在网上查找类似问题，还尝试使用了this.$set()方法，这个方式看介绍是对数据进行响应式，就是解决直接改动数组并不能驱动视图更新的问题，但还是不生效，不知道怎么回事？此前，我尝试使用了this.$nextTick()方式，不生效，如果数据更新是异步进行的（例如通过API请求），确保更新数据后，使用Vue的。方法来等待DOM更新。
element-ui 分页刷新无效问题
m0_37964290的博客
08-01 2396
element-ui 分页刷新无效问题
element-ui el-table表格实时刷新数据和自动循环滚动指令插件
最新发布
LWuXin的博客
07-11 1385
自动滚动功能的详细行为，包括滚动的启动、速度、暂停和循环机制。这样的配置允许开发者根据具体的应用场景和用户体验需求，精细地调整滚动效果。
vue 修改双向绑定 或者触发事件新增内容时 数据值已经改变但是页面没有更新
weixin_43292953的博客
08-14 1240
修改数据后 添加 如下两行代码： this.$forceUpdate()//强制更新 this.tableData= JSON.parse(JSON.stringify(this.tableData));//tableData数据更新----（this.tableData 数据值，此时是更新了整个table表） 亲测有效，可以尝试下 ...
el-table里加入了el-select双向绑定失效问题
weixin_43588661的博客
07-19 898
今天遇到一个问题在el-table里加入el-select之后下拉选中值没变化，给el-select添加了change事件发现el-select绑定的值其实已经改变了，但是页面没刷新，确认了双向绑定失效了。不得其解，查了资料需要在el-table-column加一个key才能解决，于是加了key，又能双向响应了，但是其中的原理不太了解，资料只给了解决方法没给问题原理求解。
elementUI中table多选切换时，之前选的数据丢失如何解决,Error in callback for watcher “data“: “Error: [ElTable] prop row-k
weixin_42248417的博客
02-24 2453
elementUI中table多选切换时，之前选的数据丢失如何解决,Error in callback for watcher "data": "Error: [ElTable] prop row-k
elementui el-pagination分页组件查询的时候当前页不更新
前端开发工程师博客
04-26 1493
elementui el-pagination分页组件查询的时候当前页不更新 <mypagination v-if="pageshow" :currentPage.sync="pageNum" :pagesize="pageSize" :pagetotal="pageTotal" @pagefunc="pageFunc"></mypagination> 1.需要在data函数里面定义个pageshow 2.在搜索改变页码的时候加上如下代码 seach() {
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在模板中使用这个变量时，你需要使用Vue的属性绑定语法（即使用冒号":"开头），这样可以确保当tableHeight变量更新时，表格的高度也会相应地更新： ```html <el-table :data="tableData" :height="tableHeight" ...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
基于Vue+element-ui 的Table二次封装的实现
10-18
总的来说，Vue+Element-UI的Table二次封装是通过组合Vue的组件系统、数据绑定、事件处理、API调用来实现的。这样的封装让代码更加模块化，提高了代码复用率，同时也方便了团队协作和代码维护。在实际项目中，根据...
element ui 分页后表格不刷新
Bitter的博客
11-09 1671
背景：点击分页，可以获取到当前分页对应的数据。但是表格就是无法重新刷新。我试过:key，进行组件的强制刷新，但是仍然无法实现。 解决： 在获取到分页对应的数据后，对table绑定的数组，进行清空，重新赋值的处理。 不要直接赋值，不要直接赋值，不要直接赋值。如果直接赋值，表格无法对分页的数据重新渲染。 methods: { //这个是改变分页后获取当前分页对应数据的方法。我是用的截取数组的方法 handleCurrentChange(pagechange){ this.initp
el-table绑定的数组里面的对象值进行修改时，视图没有更新
茂茂的博客
04-20 2643
其中，array是绑定到el-table的数组，index是需要修改的对象在数组中的索引位置，propertyName是需要修改的属性名称，newValue是新的属性值。其中，findIndex()方法用于查找满足条件的元素在数组中的索引位置，item是数组中的每个元素，item.id表示对象的id属性值，2表示要查找的id值。其中，第一个参数是数组对象，第二个参数是对象在数组中的索引位置，第三个参数是一个新的对象，它继承了原始对象的所有属性，但是将age属性值改为20。
解决el-table数据发生了变化，但是页面显示的数据不更新问题
qq_46103732的博客
06-06 3784
解决el-table数据发生了变化，但是页面显示的数据不更新问题。 通过修改绑定在 table 上面的 key 值，可以触发 el-table 的重新渲染，首先给表格绑定一个key： 在数据发生变化后更新key的值：
【解决】Element UI表格Table组件，点击翻页后之前选中的数据仍保留，勾选中的样式也会回显
qq_34179819的博客
10-11 990
2.经过以上两个属性的操作，发现在第一页勾选的数据在跳转到其他页时，可以得到在第一页时勾选的值，在@selection-change方法既handleSelectionChange方法内可以拿到。，勾选的数据倒是可以保留，但是不会回显：也就是说我从其他页再跳回第一页时，之前勾选的第一页的数据还在，但是页面的勾选框显示未勾选状态。使用Element UI的表格Table组件，在第一页选中的数据，跳转到第其他页再返回第一页时，选中的数据消失。4.继续查看文档，又发现。
el-table表格数据变化，页面不更新问题
weixin_42122618的博客
07-28 757
el-table表格数据变化，页面不更新问题。
element 分页器数据不刷新bug解决方案
qq_42919799的博客
11-15 1856
使用Element 分页器开发遇到的一个问题，这里记录下，也希望能帮到其他人 问题描述 例：在第一页中搜索’张三’，页面中展示4条数据，切换页码到第 5 页，搜索关键字 ‘张三’，页码显示 ‘共4条’ 但是在页面中没有数据展示，查看控制台，接口中也显示返回了4条数据。 解决方法 <el-button @click="pageIndex = 1;getDataList();">查询</el-button> 只需要在 搜索 按钮上加上 pageIndex = 1;,注意，一定要加在调
element table多选只能选中当前页数据_element-ui里的el-table 前端分页
05-19
如果你使用的是 element-ui 的 el-table 组件，并且开启了前端分页，那么默认情况下多选只能选中当前页的数据。 这是因为 el-table 组件默认只渲染当前页的数据，而不是全部数据。如果你想要在多个页面之间进行多选...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值