element中select,值更新视图不更新_Cang_Ye的博客-程序员宝宝_elselect选中后视图不刷新

技术标签: 个人笔记  小知识点  elementui  前端  vue.js  

一、 业务逻辑

使用el-table的自定义列功能,同一行数据的两列有互动,当一列(值来源)数据改变,另一列(默认值)的el-select无法选中值(实际v-model对应的数据已改变,但是页面上没有更新),如图:

二、原因

默认值这一列对应的select的v-model对应的字段是在table生成后动态插入的,初始的数据结构类似:

//data 为el-table的data
var data=[
  {src:'param'}
]

src字段改变后,在值来源的selectchange事件里,给这一行数据增加了default字段;

//data 为el-table的data
var data=[
  {src:'param',default:''}
]

结果就是,默认值的select无法正常选择了。

三、解决方法

1.初始化时所有属性赋初始值

这种方法能适应大部分情况。

  • 优点:数据结构一目了然,便于维护
  • 缺点:假如表格里的每一行字段各异,初始化时需要创建大量冗余字段,并且在数据提交之前可能需要进行二次数据结构转换;假如是特殊的使用场景,可能初始化时无法穷举。

2.增加新属性时,使用Vue.$set

这种方法可以普适性强,当然有一些局限,官网有说明:

注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

  • 优点: 普适性强
  • 缺点:动态添加属性,会增加调试难度(使用时必须得知道某一个时刻,该对象有没有新增属性);写的代码更多(a.b=1 vs this.$set(a,'b',1))。



作者:果酱风
链接:https://www.jianshu.com/p/4af03f45a3f3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Cang_Ye/article/details/123456932

智能推荐

cocos-creator使用记录31_设置横屏_爱睡觉的猫L的博客-程序员宝宝_cocos 设置横屏

1.前言当有很多小游戏集合在一个平台中时,有竖屏的小游戏,也有横屏的小游戏,而平台的页面是竖屏时,需要手动设置横屏的小游戏为横屏。2.代码//设置横屏setLandscape() {    if (cc.sys.isNative && cc.sys.os === cc.sys.OS_ANDROID) {        jsb.reflection.callStati...

[linux]乱七八糟_!柯西洗袜子的博客-程序员宝宝

IPv4sudo apt-get -o AcquireForce::IPv4=true update进程和锁# 找进程ps -A | grep aptkill xxx# 删锁sudo rm /var/cache/apt/archives/lock共享库(shared libraries)sudo /sbin/Idconfig -v部分更新sudo apt...

【PKUWC2019模拟2019.1.15】Mines_YiPeng_Deng的博客-程序员宝宝

Descriptionn ,Q<=1e5Solution有一种显然的做法,每一个点对于它能引爆的点连一条有向边,得到一个有向图。Tarjan缩点后,对于每一个强联通分量,贡献就是这里面的点权最小值。只有入度为0的强联通分量才会有贡献。然后在线用一个multiset维护一下每一个强联通分量的的最小值。这种方法是N*N+NlogQ的。瓶颈在于前面缩点的N*N注意到所有连的边的...

python 主函数传参_Python函数传参详解_差多了的博客-程序员宝宝

Python 中使用 def 来定义函数。依次是 def 函数名、括号、括号中的参数及结尾的冒号,另起一行缩进写函数体,函数的返回值用 return 语句返回。如:def func(参数):函数体return调用函数时会对传入的参数进行自动检查,包括参数的类型及参数的数量,如果不符合要求会抛出 TypeError 异常。参数的类型可分为:1、必选参数2、默认参数3、可变参数4、关键字参数函数中的参...

2022年3月18日 (spring5新功能 Webflux)笔记_webflux modelandview_m0_49821063的博客-程序员宝宝

-基于尚硅谷Spring5视频1.SpringWebflux介绍:(1)Webflux是spring5新添加模块,类似于SpringMVC,是响应式编程框架;(2)传统框架基于sevlet容器,例如SpringMVC,Webflux是异步非阻塞的框架,异步非阻塞在servlet3.1之后才支持,Webflux核心是基于Reactor的相关API实现的;(3)啥是异步非阻塞:异步同步针对调用者,调用者调用后等待回应就是同步,调用者调用后去进行其他事就是异步;阻塞被阻塞针对被调用者,被调用者收到请求

关于JTextArea实现滚动条显示..........................._月光22的博客-程序员宝宝

话不多说,直接开写.........public class ScrollTextTest{ private JFrame mainFrame = new JFrame(); private MyPanel textPanel = new MyPanel(); public ScrollTextTest() { mainFrame....

随便推点

【牛客练习赛22 C】_weixin_30512785的博客-程序员宝宝

https://www.nowcoder.com/acm/contest/132/C题目大意:在n个区间中取出n个数,相加的和一共会出现多少种结果。题目分析:对于这种挑选数字相加,由于每一步不同的选择都会影响结果,并且会出现重复的结果,所以很自然地想到使用bitset进行解决..    【基本操作:使用<<a给每个结果加上a,使用 | (1<<a) 添加一个结果...

postgresql wal(xlog )相关知识_谢宇恒的博客-程序员宝宝_wal日志中xlog记录的偏移量如何计算

1、清理事务日志(xlog)1.1、停止数据库1.2、查询NextXID和NextOID1.3、重置xlog1.4、启动数据库...

Ubuntu18.04美化_晴空慕雪的博客-程序员宝宝

一、提前准备sudo apt install build-essentialsudo apt install gnome-tweakssudo apt install gnome-shell-extensionssudo apt install gnome-tweak-tool资源链接:https://pan.baidu.com/s/16QPWIiVxzxJXNS5TZTjcZQ提取码:hsdf二、icons将 vimix-icon-theme-master.zip 解压,然后运行unz

快收藏!最适合计算机大学生的Java毕业设计项目--音乐视频网站系统!_java李杨勇的博客-程序员宝宝_适合大学生做的java项目

音乐系统主要功能设计:首页、个人中心、用户管理、音乐标签管理、付费音乐管理、订单中心管理、付费音频管理、系统管理等信息。用户功能:首页、个人中心、订单中心管理、付费音乐管理、我的收藏管理。前台首页:首页、音乐库、音乐资讯、个人中心、后台管理、在线客服等功能。............

windows环境下编译caffe遇到的问题以及处理方法_mingo_敏的博客-程序员宝宝

本文地址:https://blog.csdn.net/shanglianlm/article/details/80144225 1 微软caffe下载地址: https://github.com/Microsoft/caffe 1-1 error MSB4062: 未能从程序集error MSB4062: 未能从程序集 E:\NugetPackages\OpenCV.2.4.1...

Spring Cloud Gateway源码解析-05-请求处理之FilteringWebHandler_壹氿的博客-程序员宝宝_filteringwebhandler

来源在**SCG初始化解析之Route、Predicate、Filter的构建原理中我们提到了**FilteringWebHandler会在GatewayAutoConfiguration中进行自动装配,并没有进一步阐述。@Beanpublic FilteringWebHandler filteringWebHandler(List<GlobalFilter> globalFilters) { return new FilteringWebHandler(globalFilters);.

推荐文章

热门文章

相关标签