iView UI --Table组件数据刷新但是页面未刷新

最新推荐文章于 2024-03-18 17:04:22 发布

原创最新推荐文章于 2024-03-18 17:04:22 发布 · 900 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#view design #前端 #前端框架

iView 专栏收录该内容

1 篇文章

订阅专栏

在处理表格选择框时，如果需要根据数据默认选中某些项，可能遇到页面未正确显示已选中的情况。当fromConData中的_checked值为true但选择框未勾选，解决方案是在Table组件中设置key属性为Math.random()，确保每次渲染时表格数据的唯一性，从而解决未刷新问题。

问题：table选择框，获取数据后，根据需求需要默认选中个别选择框，数据打印fromConData中_checked值已经为true了，但是页面上并没有勾选对应选择框

解决：table 中设置 :key="Math.random() 既可解决未刷新问题

<Table :key="Math.random()" @on-selection-change="onSelectionChange" border :columns="fromConColumns" :data="fromConData"></Table>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ms.Juan

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）

weixin_44875212的博客

03-21

2091

el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）

Element-ui中的table组件设置列为type=“expand“时，在Vue中发起异步请求数据时表格无法正常显示

鸭绒的博客

06-24

2698

问题描述：借助官网的示例，但展开项中是一个表格，当点击展开项时会发起一个网络请求去获取表格数据，表格的数据应该是一个数组类型： <template> <el-table :data="tableData" element-loading-text="Loading" style="width:90%;min-height:600px" border fit :st

参与评论您还未登录，请先登录后发表或查看评论

iview UI的Table组件数据刷新但是页面不刷新的问题

S筱潇S四维Smile

11-16

1709

iview UI的Table组件数据刷新但是页面不刷新的问题

iview中遇到table的坑（已经修改了table的数据，但是界面没有更新）

热门推荐

bigdargon的博客

04-18

1万+

修改思路： 1.声明一个临时数组，来接收这个数组 2.再将这个数组清空 3.遍历这个临时数组，在遍历的过程中再添加到这个数组中例如：以上：就完美解决table中的数据更改了，但是界面没有更新的问题（其根本原因是：数据的缓冲所造成的） ...

解决iview UI的Table组件数据刷新但是页面不刷新的问题

我的米饭

12-14

3904

在改变了 Table 绑定的 data 变量的数值后，表格的数据刷新了，但是页面不刷新，之前滚动到的位置仍然在那里，而且如果左右两侧有固定列的时候，会错位，解决方法是给 Table 组件绑定一个 Key 属性： <Table :columns="columns1" :data="data1" :key="Math.random()"></Table> ...

解决View UI (iview)中Table组件data改变但页面不刷新的问题（vue）

Watanaki的博客

12-22

2852

解决View UI (iview)中Table组件data改变但页面不刷新的问题原文链接：https://segmentfault.com/a/1190000022772025 问题：在mouted中从接口获取了数据userLIst，并赋值给Table组件的data，但是页面没有显示数据。解决：分析：在控制台可以打印出userLIst，说明数据确实是有的，但是页面不刷新原因：Vue.js不能检测到对象属性的添加或删除，因为vue.js在初始化实例时将属性转为getter/setter，

iview 不请求接口修改table本地数据不刷新的本质问题以及最简单的解决方法

lyz246859的博客

03-18

692

其实是因为vue的数据更新检测机制，在对象或者数组的情况啊，只是通过赋值，来改变数组的某一项数据，vue的set是无法检测到更新的，因此才会出现这个问题，那要怎么解决呢？如图所示，只需要再table中加上key参数，在你修改了数据需要更新时候，直接tmp++即可。

my-vue-iview-admin:使用vue和iview实现vue-element-admin

04-05

iView提供的组件可以无缝融入到项目中，如使用Modal组件创建弹窗，使用Table组件展示数据等。 6. vuex状态管理对于涉及多个组件共享的数据或状态，my-vue-iview-admin可能使用Vuex进行集中管理。Vuex是Vue.js的一...

iview table列表怎么刷新数据

最新发布

09-08

- 引用[2]：解决了Table组件数据刷新但页面未刷新的问题，通过添加:key="Math.random()"强制刷新。 - 引用[3]：涉及Table组件的渲染、选中事件处理和多选/单选。 - 引用[4]：解决了fixed列错位的问题，提到在计算...

iview-FuncTable组件：Vue2中强大的表格功能实现

- iview原生table事件与属性：iview-FuncTable全面支持iview框架中原生的table组件事件与属性，开发者可以利用这些内置功能来实现更加复杂的需求。 5. 使用方法 - 组件使用示例代码：文档提供了简单的模板代码，...

使用iview+table时,table表格获取页面变量不会更新

juvialoxer的博客

09-04

735

bug显而易见,页面创建时table获取到的this.pageNum是1; 在点击分页后,页面实际的this.pageNum是2,然而table中的this.pageNum依然是1; 原因推测是由于table在创建时就已经缓存了页面变量,如果有哪位大佬知道原因请务必留言解决办法:使用方法更新变量,如 private blur_data(){ return this.pageNum; } ...

iview-table之data更新方法

weiyangg23的专栏

08-21

2622

iview-table之data更新方法今天做一个页面时发现table中使用render时params.row.attr改变时，不会同步更新pagedList.data,于是百度google了一下，并总结出两种方法：一 render: (h, params) => { return h('Input', { props:{ value: this.data[params.index].attr,

VUE iview 交互数据更新了，但页面没有更新数据

wjm0519的博客

10-18

2373

1.场景:在使用iview的Checkbox组件是需要点击全选，从而改变子级的选择状态，组件如下 2.由于要使用多组这个组件，每个组件的状态各自控制 3在点击切换状态时，数据更新了，页面选择状态未改变，vue未检测到数据变更 4.解决方法使用vue的内置方法赋值vue.$set ...

vue数据更新table内容不更新解决方法

小易不止于搬砖的博客

08-08

7940

2、为table绑定一个key，数据变化时更改key值,或者使用v-if绑定一个不重复的值触发组件渲染。table组件绑定的数据变化时，页面没有重新渲染，常见于子组件中使用table组件。创建实例时数组在vue中没有被监听到，属于非响应式数据，数组的下标变化无法监听到。1、利用vue中重写的数组方法。3、使用$set()

UITableView只更新高度不更新内容以及只更新内容不更新高度

NunchakusHuang的专栏

02-01

8772

一、UITableView只更新高度不更新内容如果一个cell高度要在加载完内容以后才能确定，我们一般的方法是调用reloadIndexPaths方法，但这个方法会迫使UITableView再次调用cellForRowAtIndexPath，导致内容也更新，所以如果只是想更新高度，不更新内容，可以调用：[self.tableView beginUpdates]; [self.tableView en

vue iview table中使用子组件，数据更新页面不渲染问题

进击的冉冉的博客

07-30

1982

在table 列中对时间进行特别处理时，页面不刷新，新数据进来时间渲染是前一条的数据，没有实时渲染理论上当我更新数据的时候，createDate的值已经发生了改变，子组件应该获取的数据更新并重新渲染。实际上该页面的子组件只会保留第一次界面初始化的渲染页面。修改前： <i-table width="100%" border ref="selection" :columns="columns" :data="suggestions"></i-table> 修改如下：可

iView Input 输入框表单非空校验，默认值是 Number 类型校验失败

Amy的博客

05-20

5254

问题描述 iView 按照 Form 组件文档用法写非空校验，当表单数据有默认值并且默认值类型为 Number校验失败，手动输入可以校验成功。问题原因官方已经给出回答，校验规则默认是 string。而手动输入的时候 Input 组件会把输入内容转为字符串。 #4817 解决办法默认值设置为字符串类型，或者用自定义校验。 ...

iview框架table数据渲染问题

weixin_44759938的博客

07-01

1397

最近接手了一个vue+iview框架的运营管理系统，有一个需求是，有一个表格，表格的一列数据是固定的，其余数据接口返回。但是接口会返回给你一个数组，数组中只有表格的某几列。要求是根据返回的数组，去渲染表格中相对应的那几列。原始表格是这样的 id 时间状态操作 01 修改 02 修改 03 修改 04 修改希望渲染的效果是这样的 id 时间状态操作 01 2021/7/1 成功修改 02 2021/7/1 成功修改 03