ELEMENT-UI 更新TABLEDATA 中 ROW的某一个属性时，没有更新视图的问题

最新推荐文章于 2024-07-24 15:35:51 发布
原创 最新推荐文章于 2024-07-24 15:35:51 发布 · 800 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个Vue项目中遇到的问题：当尝试更新表格某一行的状态时，视图未能响应式更新。通过使用Vue的this.$set方法成功解决了这一问题。

在一个报警音管理的页面中，每次点击试听的时候，需要把‘试听’ 更新为 ‘停止’，

起初我们给row.play=0时，显示为 试听，row.play=1时显示为停止，

但是在代码中每次为row.play赋值时，虽然代码运行，但是页面视图并没有更新。

经过多种资料的参考，发现table表格数据，每次只能监听整个row的变化，row中某个属性变化时，是无法追中的。

所以在改变row.play时，我们先设置row.play=1， 再this.$set(tableData,index,row) 来更新tableData的数据。  index为row在tableData中的索引。

Study_Live_Sun
关注
解决Vue数据更新视图不更新的问题 | element-ui 点击显示/隐藏表格中某行的手机号
吴小花的博客
10-26 3048
业务场景： 需要给手机隐藏，点击显示手机号的时候才能看到手机号。 解决思路： 前端控制手机号的显示，（已经通过调接口获取到了用户的手机号信息） 在tableData给每行数据新增加一个isShow的值，当isShow为true时，显示具体的手机号，默认为false. 遇到的问题： 开发过程中遇到给isShow的值改变，但是页面不刷新的问题。 解决方案： 1.使用this.$nextTick() 和this.$forceUpdate();强制刷新页面 //显示手机号 handleShow
vue基于element-ui table做行内编辑
pujihong的博客
06-12 3033
在做行内编辑的时候，直接对对象数组的属性赋值发现没有做响应式的 现象： 点击编辑的时候，没有切换程输入框。f12后，输入框才切换出来 vue文档 var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 代码如下 <template> <el-table :data="labelList" st
Element-ui 更新tableData 中 row的某一个属性时，没有更新视图的问题
AsuraSylar的博客
09-10 626
在一个报警音管理的页面中，每次点击试听的时候，需要把‘试听’ 更新为 ‘停止’， 起初我们给row.play=0时，显示为 试听，row.play=1时显示为停止， 但是在代码中每次为row.play赋值时，虽然代码运行，但是页面视图并没有更新。 经过多种资料的参考，发现table表格数据，每次只能监听整个row的变化，row中某个属性变化时，是无法追中的。 所以在改变...
vue element-UI table嵌套表格 无法更新视图
maggie_live的博客
08-07 8606
1.点击“编辑”，当前的div显示“删除”； 2.查看row.isShow =  true，但是视图没有更新；代码如下： &lt;template&gt; &lt;el-table :data="tableData4" style="width: 100%" max-height="250"&gt; &lt;el-table-column fi...
element table 数据更新视图不更新问题
camille009的博客
08-24 3580
el-table每次只能监听整个row的变化，当row中某个属性变化时，是无法追踪的； 所以需要重新给table中的某一行赋值 this.$set(table,index,row)
element-ui table组件 数据更新之后保留之前选中的数据
m0_37856464的博客
06-28 2049
step1: el-table 标签,指定 row-key 属性 step2: el-table-column 中设置了type=selection 的列，指定 reserve-selection 属性 （属性值为 true / false，true 代表保留， false代表不保留）
ElementUI，解决修改el-table中的数据，数据更新了但视图无法及时更新的问题
anqiaoyun的博客
07-24 3597
ElementUI，修改el-table中的数据，视图无法及时更新的完美解决办法
vue循环渲染element-ui中table内容
m0_60540878的博客
08-31 5232
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。 <template> <el-table :data="tableData" style="width: 10
element-ui手风琴自定义html,使用element-ui table expand展开行实现手风琴效果
weixin_31935149的博客
06-15 1321
写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果。效果前瞻：先删减一下代码：查看详情{{ props.row.name }}export default {data() {return {tableData5: [{id: '1',name: '好滋好味鸡蛋仔1',desc: '荷兰优质淡奶，奶香浓而不腻1',}, {id: '...
vue+Element中table表格实现可编辑（select下拉框）
10-15
在使用Vue.js框架结合Element UI库时，实现表格中某列数据可编辑且为下拉框选项是一个常见需求。本文详细介绍了如何在Vue+Element的table表格中实现可编辑功能，特别是在单元格内通过select下拉框形式选择数据，并...
ElementUI Data：Table 表格
ChinaDragon10的博客
02-03 1751
ElementUI Data：Table 表格
ElementUI中实现表单刷新重置，保存在全局方法中
mingY的博客
12-27 3273
elementUI中的resetFields方法 1.在el-form添加属性 在el-form中定义ref属性queryForm <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px"> 2.刷新重置方法 刷新按钮： <el-button icon="el-icon-refresh" size="mini" @click="handleRefresh">刷新.
vue+elementUI中table 数据内容变化但视图不更新解决
oMangGuoBuDing1的专栏
05-20 1863
下面时根据后台回来的响应值 更新列表内容的方法，也是常用的更新列表数据的场景，之后用到可参考 methods: { send(rowIndex, val) { const p = { index: this.index, param: val.param } send(p).then(res => { console.log('res.data', res.data) 修改数据值 const rowData =.
elementUI踩坑之 table表格当前行row修改数据，视图不更新
卡卡罗特的博客
12-15 5842
1.先看业务场景，table表格每一行中，WWN，是下拉框选项 选择T2-10000.。。。选项，数据改变了但是，页面视图没有改变 1.注意事项，element表格当前行数据，属性修改；无法更新视图，是由于table监听的是一行数据，而不是某个单元格属性 这里需要我们主动触发页面更新，可以用到$set方法。我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。 上面的三个参数分别是：data是表格的数据源,index是修改row当前行的索引，row是改后的数据 类似...
解决vue项目 el-table 根据查询条件后el-table-column数据没有更新（解决el-table里面数据没有实时更新）
wocwin的博客
06-14 7641
解决vue项目 el-table 根据查询条件后el-table-column数据没有更新（解决el-table里面数据没有实时更新）
el-table绑定的数组里面的对象值进行修改时，视图没有更新
茂茂的博客
04-20 2862
其中，array是绑定到el-table的数组，index是需要修改的对象在数组中的索引位置，propertyName是需要修改的属性名称，newValue是新的属性值。其中，findIndex()方法用于查找满足条件的元素在数组中的索引位置，item是数组中的每个元素，item.id表示对象的id属性值，2表示要查找的id值。其中，第一个参数是数组对象，第二个参数是对象在数组中的索引位置，第三个参数是一个新的对象，它继承了原始对象的所有属性，但是将age属性值改为20。
浅谈Vue element-ui表格那些实用操作
杨振洲的博客
07-08 1373
最近的项目中使用到element-ui组件库，由于做的是后台管理系统，所以经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考。 具体的使用方法还是建议仔细阅读官网-table章节： https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot 自定
element-ui表格嵌套下拉框数据变了，视图不更新（已解决）
m0_60704265的博客
09-08 4099
element-ui表格嵌套下拉框数据变了，视图不更新（已解决）
Vue(element ui)中行操作row参数的使用
热门推荐
Xwz的博客
06-29 1万+
在使用element ui或Vue中当我们要对表格中的数据按行进行特殊操作或标记时，通常通过在vue中methods方法中操作row参数来访问该行的索引或是单元格中的数据进行对应操作。
element-ui 树形表格分页
最新发布
01-09
### Element-UI 中树形表格分页实现 在 `Element-UI` 的框架下，要实现在树形表格中的分页功能，可以遵循以下模式： #### 安装依赖库 为了使用 `Element-UI` 提供的功能，需先确保项目中已成功集成该库。可以通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值