错误:

出错原因:

估计是单选切换到多选的时候元素没有刷新的原因,猜测

解决办法:

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 单选与多选切换的时候报错的解决办法的更多相关文章

  1. SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错

    SAP S4HANA 账户组的配置里'Int.Std.Grping'选项没勾选导致ABAP程序报错 BP,试图创建一个新的vendor code, 角色是ZGM001, Grouping是G001, ...

  2. Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法

    有些童鞋会在Win10下使用AD16的时候发现,走线模式/布线模式(切换直角,45°,弧形等)不能切换. 问题出在输入法上,一般是切换到英文输入法即可解决,但是有一种情况是win10系统自带输入法有时 ...

  3. Unity3d socket通信 切换到web版本时报错SecurityException解决办法

    原文地址:传送门 今天苦战了一天,就跟一个Unity切换到web平台的socket通信出错苦苦纠缠了一天,问了好多大牛,但他们的回复都是我没搞过web平台下的通信或者我只专研于pc或者移动平台.看来没 ...

  4. 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 ...

  5. 关于chart不能自行切换出现的报错现象

    1.echart 页面菜单不能切换,line和bar不能自行切换 页面上报错误   bar has not been reqired 解决办法,加载bar <script type=" ...

  6. 三星笔记本R428安装xp win7双系统,切换系统重启才能进入系统解决办法。

    三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统    xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...

  7. @Select注解的情况下,重载的报错

    在编写代码的时候,我对查询这个方法进行了重载,这样调用的时候会根据参数的不同,进而去执行不同的操作,但是......问题来了.想法都是美好的,实际情况却不是我理想的状态.运行代码的时候他动了几下,然后 ...

  8. ubuntu用su切换,输入密码提示认证失败解决办法

    ubuntu用su切换,输入密码提示认证失败,经查阅原来Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许 su 到 root ,对于桌面用户来说这个可能是为了增强安全性. 终端下 ...

  9. 关于element-ui select组件change事件只要数据变化就会触发的解决办法

    使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...

随机推荐

  1. Inventor2018专业版软件安装激活教程

    如果你安装的是Autodesk Inventor Professional 2018,那么序列号为:666-69696969,产品密钥为:797J1, 如果你安装的是Autodesk Inventor ...

  2. win7电脑删除保存的凭据

    win7电脑删除保存的凭据: 控制面板-> 用户账户 -> 管理您的凭据

  3. 123457123457#0#-----com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

    com.twoapp.FromPuzzle02--前拼后广--儿童农场拼图游戏jiemei

  4. 简介Python中用于处理字符串的center()方法

    简介Python中用于处理字符串的center()方法 这篇文章主要介绍了简介Python中用于处理字符串的center()方法,是Python入门中的基础知识,需要的朋友可以参考下 center() ...

  5. iframe重定向让父页面跳转

    情景描述 我们在使用一些后台程序的html模板(比如H-ui)的时候,这些html前端程序是iframe版的, 也就是说在使用的时候,每当我点击左侧导航栏的一个按钮,在右侧就会弹出一个菜单栏,在显示的 ...

  6. 【Leetcode_easy】784. Letter Case Permutation

    problem 784. Letter Case Permutation 参考 1. Leetcode_easy_784. Letter Case Permutation; 2. Grandyang; ...

  7. 泰乐事(Telos)白皮书中文版 <零> 封面及目录

    <泰乐事白皮书> 一个可持续发展的去中心化EOSIO网络 作者:道格拉斯·合恩 泰乐事(Telos)—— 事物的终极目标. Telos一词来源于希腊语ΤΈΛΟΣ. “一颗橡果的终极目标是成 ...

  8. YIIMP矿池搭建

    本文将以Verge(x17)和Raven(x16rv2)为例子来说明多算法矿池YIIMP的搭建过程. 1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 18.04,之 ...

  9. mysql 数据库批量刷新表字段数据

    UPDATE a,bSET b.studentno = a.studentnumber WHERE b.studentno IS NULL AND a.p_id = b.p_id

  10. 《Tsinghua os mooc》第21~22讲 文件系统

    第二十一讲 文件系统 文件系统是操作系统中管理持久性数据的子系统,提供数据存储和访问功能. 组织.检索.读写访问数据 大多数计算机系统都有文件系统 Google 也是一个文件系统 文件是具有符号名,由 ...