el-select 单选变多选时选项框显示出错

最新推荐文章于 2023-04-17 10:10:45 发布
最新推荐文章于 2023-04-17 10:10:45 发布
阅读量705 收藏 1
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiayoululu5/article/details/105734524
版权 

     <el-select
        @change="getDataPre"
        v-if="options.techStackSelect==4"
        filterable
        v-model="options.projectSelect"
        placeholder="请选择项目"
      >
        <el-option
          v-for="(item,index) in projectList"
          :key="index+'coverageTask-project'"
          :label="item.projectName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        @change="getDataPre"
        v-else
        filterable
        multiple
        v-model="options.versionSelect"
        placeholder="请选
最低0.47元/天 解锁文章
明月兮宝璐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element-ui select单选切换多选问题解决
q1424966670的博客
08-10 1万+
下面是demo，复制过去即可运行 下面是demo，复制过去即可运行 讲解一下 第一个secelt选择，只有选中特定的选项，第二个secelt才可多选 data.key即特定的选项，这里只写了一个，如果是多个的话，可以这样 data() { return { key: ["1","5"] } } 注意点： 数组元素的类型要和option的value类型对应上 对应的，多选条件的判断也要改一下 <el-s...
el-select 切换multiple报错type check failed for prop “value“. Expected String, Number, got Array
最新发布
zhenzhenzhen1705的博客
12-08 358
el-select 切换multiple报错type check failed for prop "value". Expected String, Number, got Array。原因是v-model绑定的数据类型切换后有变化，单选为''，多选为 []
vue element select多选报错 arr.some is not a function原因及解决方法
sw_onload的博客
06-30 6836
用下拉选择框 使用multiple 属性 多选时出现报错 下面是还原当时的操作 其实只是一个小小的问题，就是绑定值的类型，应该是数组，我写成了对象,如下，改过来就不报错了
Element el-select - 切换单多选时显示问题
老电影故事的博客
04-14 715
代码中使用了 v-if 安照常理，如果我切换了就会销毁，但是效果并不是这样，因为 vue复用了< el-select >中的input。也就是说根本原因是： vue 在切换的过程中，认为input不需要销毁重建，所以直接复用了。如何告诉vue 单选和多选不要复用呢？答案是 ----- 添加key 这里引用下官方文档。这里选择科目后，我再切换到柱状图，按道理是要这样。vue出于提高性能，所以 vue 给复用了。这是啥问题呢，一开始百思不得其解。
element-ui el-select 多选单选切换报错问题
kyoog的博客
09-12 1万+
项目需求 后台表单是前台自建的 控件自然也要自建 自然就有各种选项 其中选择框 就有单选多选选项 项目使用的element-ui 自然就用的el-select 由于数据库并没有类似数组的字段 选择框使用varchar 而el-select多选时却需要使用数组 所以在编辑时 需要将值转成数组再赋值给el-select的value  &lt;template&gt; &lt;el-se...
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
element-ui多选框组件切换报错问题
GechangLiu的博客
06-25 1244
问题描述：页面定义了三个多选框，根据不同的条件展示不同的<div>下的多选框，但是由班级切换到课程的时候页面报错。 页面源码如下： <div v-if="formModel.radio == 2" > <el-form-item prop="class" :label="$t('system.count.class')"> ...
Missing required prop: “value” 报错的解决办法
热门推荐
Yukinoshita_kino的博客
06-29 10万+
一. 报错场景 [Vue warn]: Missing required prop: "value" 该报错出现在——VUE中使用element-ui的el-select组件时报错 二. 报错原因 2.1.el-select中没有进行双向数据绑定（v-model） 2.2 el-option没有进行value赋值 三. 具体示例 3.1 el-select中没有进行双向数据绑定，且el-option没有进行value赋值 代码如下： <el-form-item label="获取积分">
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
el-select设置对象为value选中错误
qq_43760774的博客
04-17 1339
解决该问题的方法是，在 v-model 中使用一个新的对象类型的值来绑定选中的对象，确保 v-model 中绑定的值与选项列表中的对象不是同一个引用地址。例如，可以使用 lodash 库中的 cloneDeep 方法，将选中的对象克隆一份新的来作为 v-model 中的绑定值。需要注意的是，如果将 v-model 中的值设置为对象类型，需要开启 deep 模式来深度监听对象变化，否则无法在选中对象中修改属性时触发 watch 监听。// 将选中的对象克隆一份新的来绑定到 v-model 上。
Invalid prop: type check failed for prop “value“. Expected String, Number, got Array
gaoyu007的博客
07-13 3万+
select改为多选属性，onchange事件报错 报错内容：Invalid prop: type check failed for prop “value”. Expected String, Number, got Array。 原因：relateuserCount在该change事件中有赋值，该属性本身是string类型，prop也是该属性。但是现在复制强制改成数组类型，但是prop并不支持prop为数组类型，prop对应值只能是string或者number，导致报错。 ...
Element Select 选择器自定义样式在多选时出现样式错乱解决
weixin_40400844的博客
02-26 4378
Element Select 选择器自定义样式在多选时出现样式错乱解决问题描述开发解决方法 问题描述 在使用el-select组件时，需求提出的要求： 1、select可以随便设置高度（不受size属性制约）； 2、允许select多选显示tag并使高度自适应； 开发 设置select高度样式，注意，这里使用的是scss修改样式： <div class="elSelectBox"> <el-select v-model="valMult" multiple
Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法
IT全栈 华强工作室
04-13 7060
前言 在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。 表单代码如需： <el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect
ElementUI中的el-select中多选回显数据后没法重新选择和更改
coldriversnow的专栏
02-25 3085
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848 上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。 但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。 实现 原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。
element-ui select 的一些问题
肖肖肖丽珠的博客
08-16 4万+
@visible-change select下拉框出现/隐藏时触发。默认参数是点击时展开为true。关闭为false。 但是你在html写的时候要这样 &lt;el-select v-model="zoneid"@change="getZoneCoursesetLists()" label="请选择校区" @visible-change="getZoneLists"&gt; ...
Element Select选择器绑定对象，多选，回显处理
crazybai0001的博客
10-28 1万+
有些时候Select选择器需要多选、绑定对象，用户选择某项后（change事件），得到的值是一个对象，得到对象后可以获取对象的某些属性，以便做进一步处理，数据提交入库后，进行编辑操作，此时根据需求可能还需要正确定回显之前新建时选择的多个列表项，本文对些功能实现做简单整理、解释。
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示
migexiaoliang的博客
11-10 3681
el-select多选设置collapse-tags属性将它们合并为一段文字展示时，超过显示长度以...省略号显示，且在一行展示 想要的展示效果： 样式书写，不在一行时，调节一下下面的参数适合自己的便可以变为一行：
el-select下拉选择多选去掉输入框
09-13
你可以通过设置 `el-select` 组件的 `multiple` 属性为 `true` 来实现多选功能。同时，通过设置 `filter` 属性为 `false` 可以去掉输入框。下面是一个示例代码： ```html <template> <div> <el-select multiple filterable="false"> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> </div> </template> ``` 在上面的示例中，`el-select` 组件具有多选功能，并且没有显示输入框。你可以根据自己的需求添加更多的选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值