关于el-select 单选与多选切换的时候报错的解决办法
错误:

出错原因:
估计是单选切换到多选的时候元素没有刷新的原因,猜测
解决办法:
1、在el-select上面加上一个条件判断, 条件判断中绑定一个变量值 例如 :multiple="isMultiple" v-if="update"
2、在vue中用watch监测isMultiple 如果isMultiple变化,settimeout中修改update
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-select v-model="value" :multiple="isMultiple" v-if="update" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<input type="checkbox" v-model="isMultiple">
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
options: [
{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}
],
value: '',
isMultiple:false,
update: true
}
},
watch:{
'isMultiple'(){ //单个监控
this.update = false
setTimeout(()=>{
this.update = true
},50)
}
}
})
</script>
</html>
效果
单选

多选:

不足:切换勾选的时候会出现闪烁
关于el-select 单选与多选切换的时候报错的解决办法的更多相关文章
- SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错
SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错 BP,试图创建一个新的vendor code, 角色是ZGM001, Grouping是G001, ...
- Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法
有些童鞋会在Win10下使用AD16的时候发现,走线模式/布线模式(切换直角,45°,弧形等)不能切换. 问题出在输入法上,一般是切换到英文输入法即可解决,但是有一种情况是win10系统自带输入法有时 ...
- Unity3d socket通信 切换到web版本时报错SecurityException解决办法
原文地址:传送门 今天苦战了一天,就跟一个Unity切换到web平台的socket通信出错苦苦纠缠了一天,问了好多大牛,但他们的回复都是我没搞过web平台下的通信或者我只专研于pc或者移动平台.看来没 ...
- mysql group by 过滤字段 只能在SELECT 后面出现,不能写其他字段 报错解决 关键字 sql_mode=only_full_group_by
1:报错 关键字 sql_mode=only_full_group_bymysql> select uuid,ip,count(*) from dbname_report.t_client_i ...
- 关于chart不能自行切换出现的报错现象
1.echart 页面菜单不能切换,line和bar不能自行切换 页面上报错误 bar has not been reqired 解决办法,加载bar <script type=" ...
- 三星笔记本R428安装xp win7双系统,切换系统重启才能进入系统解决办法。
三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统 xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...
- @Select注解的情况下,重载的报错
在编写代码的时候,我对查询这个方法进行了重载,这样调用的时候会根据参数的不同,进而去执行不同的操作,但是......问题来了.想法都是美好的,实际情况却不是我理想的状态.运行代码的时候他动了几下,然后 ...
- ubuntu用su切换,输入密码提示认证失败解决办法
ubuntu用su切换,输入密码提示认证失败,经查阅原来Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许 su 到 root ,对于桌面用户来说这个可能是为了增强安全性. 终端下 ...
- 关于element-ui select组件change事件只要数据变化就会触发的解决办法
使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...
随机推荐
- python 适合的才是最好的
群里老有人问最新的破解码最新的包,最新的就是最好的吗? 今天说一下这些新手的坑: numpy 最好使用的版本是1.13.3 而非新的1.17.0 pandas最好使用的版本是0.18.0 而非新的0 ...
- 命令行启动python的IDLE
如果你电脑上使用了anaconda2,默认路径为python2,但是你又想使用anaconda2下的python3的idle 方法如下: 首先查看python的路径: (deeplearning3) ...
- linux ubuntu 如何解决warning: no newline at end of file?
今天写了一段代码, 是在Windows下编辑的, 保存后放在linux系统下编译. gcc和cc都产生以下的警告: a.h:1:2: warning: no newline at end of fil ...
- osg::PagedLOD example
int main() { osg::ref_ptr<osgViewer::Viewer> viewer1 = new osgViewer::Viewer; osg::ref_ptr< ...
- 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_01-我的课程-需求分析与PageHelper技术
1 我的课程 1.1需求分析 课程添加完成后可通过我的课程进入课程修改页面,此页面显示我的课程列表,如下图所示,可分页查询. 注意:由于课程图片服务器没有搭建,这里在测试时图片暂时无法显示. 上边的查 ...
- nginx负载均衡分配策略有哪些?
nginx负载均衡分配策略有哪些? 答: 1.轮询(默认,不用在upstream中配置)方式 2.weight(权重) 当指定的服务器的权重参数,权重占比为负载均衡决定的一部分.权重大负载就大. ...
- 好用的开源SVN仓库
1.地址 https://svnbucket.com/#/projects 2.简单注册使用即可
- Qps 和 tps的解释
QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS:是Transactions ...
- 新手pyhoner的指定内容读取和写入的思路
在linux上,很容易碰到操作文件的内容,读取指定信息的情况,或者要求在指定内容中追加内容,其实两个flag标识符就能解决. 先上个图: 执行while flag==0即可: while flag== ...
- css调用字体 没装微软雅黑,用css写@font-face让其能显示微软雅黑字体
在设计布局网页时 经常想要用一些比较好看的字体,比如微软雅黑,这个字体在近年来在网页设计中运用越来越平常, 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的. 经过一位高手的提 ...