关于element-ui下拉框多选回显的问题

最新推荐文章于 2024-04-11 09:42:00 发布
最新推荐文章于 2024-04-11 09:42:00 发布
阅读量8.3k 收藏 23
点赞数 6
分类专栏： vue 文章标签： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/paladin_java/article/details/92793650
版权
  • 问题： 在项目中使用的是 element ui 组件库，在使用select多选下拉框时，编辑页面不知道怎么为其赋值回显数据
  • 解析：在新增选择的时候，多选下拉框是多条数据，选择的数据是数组id格式，所以编辑回显的时候，要将回显的数组赋值给下拉框，就会有效果
  • 这是新增时定义的下拉框
  • 新增时下拉框的值是个数组
  • 也就是vlaue的值，通常都是id，传给后台就是一个数组id或者.join()传给后台一个字符串
  • 下面就是我遇到的一个小坑
  • 点击编辑数据是回显了出来，但是不是我想要的效果，原因就在于.split(',')返回的是个字符串数组，改成数值数组就行了
  • 至此关于编辑回显的问题就解决了，有点小坑记录一下
paladin_java
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Element-ui 多选.md
05-21
解决vue-cli+Element-ui项目 在使用element的表单验证 会触发多选下拉框的验证bug 并在页面初次加载执行一次校验
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element-UI 下拉框单选转多选回显不清空绑定的值
最新发布
Jana Jing的分享
04-11 246
单选和多选这两个 input 看上去没差别（自身和层级都一致），vue出于提高性能，所以 vue 给复用了。根据radio切换来更改下拉框是否多选。
ant design 出现modal和多选下拉框的显示bug解决方式
qq_38320702的博客
05-20 2489
经常使用ant design中的modal对话框和表单组件一起组成弹出式表单填写窗口 问题描述 但是今天发现多选下拉框和对话框之前有显示bug，多选下拉框中选择值后，关闭对话框（每次关闭对话框都会重置表单），再重新打开对话框会发现多选下拉框中仍然有上次选择的数据项，但是此多选下拉框中并没有值，显示出的数据项仅仅只是显示出来，不能进行移除等操作。 这里做一个例子：（这里用this.va = [];代替表单重置操作） 刚显示出的对话框： 进行选择内容： 关闭再打开：...
若依导入导出excel时excel下拉列表选择超过50个就不显示的问题
weixin_48817925的博客
11-09 1016
若依框架excel下拉选择超过50不显示的问题
VUE(4) : vue-element-admin[4] : 多选下拉框及回显
Lxinccode的博客
08-05 3534
参考 : 【vue】下拉框回显问题（显示数字，实际应该显示中文）_易小花的博客-CSDN博客_vue下拉框回显 vue+element 多选下拉框的传值及回显_Humor_L的博客-CSDN博客_vue多选下拉框回显数据 静态下拉框 动态下拉框 回显 push的字段和标签[:key="item.key"]的key保持一致即可回显...
解决element ui select下拉框不回显数据问题
wangyuanjun008的博客
01-24 3万+
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一
Element UI - el-select（选择器）下拉多选菜单不换行显示
Rocky balboa
03-28 2666
ElementUI 是一款很强大的组件，但是其中或许也有一些功能不满足我们的需求或者审美，比如本人今天遇到一个问题：当我使用select多选框多选的时候，下拉框被撑开了，这样不仅自身不美观，旁边的组件都很有可能受到布局影响！！！ 下图为官方例子： Ps：第二张图虽然显示在同一行内，但是数据不直观！ 解决方案 很简单：超出隐藏，那么设置在哪呢？我看了下生成的DOM，发现了这样一组代码： 原来 Element 会把我们所选择的内容动态的添加在这组 DOM 里，那么下面就要设置了，原理很简单，给父级设置超出
vue项目实现下拉框的多选功能(附后端处理参数的方法)
风海洋的博客
04-09 1万+
本次演示共涉及多选框的展示、保存、编辑三个界面。
antd多选下拉框一行展示
风火一回，一生不毁
06-15 1万+
antd多选下拉框一行展示 我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这个效果。 1.利用浮动原理 设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。 .ant-select-selection--multiple { ...
element ui 下拉多选问题整理
qq_43122566的博客
04-07 898
多选在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。$forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。5.提交表单时，即变成了['4','5','7']2.接收后台返回字段并将字符串转换为数组。1.后台返回数据格式。
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端 layui-fromSelects 下拉框多选,搜索
03-30
前端select下拉框带搜索,多选,反选
解决element ui select多选下拉框，在编辑表单记录时没有回显数据，默认选中的问题
weixin_45616483的博客
09-06 2万+
前端使用vue，项目中使用的是element ui组件，在使用select下拉框多选时，新增记录时select多选下拉框正常使用，没问题。但是在编辑记录时，编辑界面也为select下拉框赋值了，却没有显示数据。 先放一个select多选下拉框编辑时正确的加载数据的显示效果图： 下拉框代码如下： <el-form-item prop="czfaIds" label="处置方案"> ...
使用bootstrap-select遇到的坑-下拉框数据不显示
SuperCookies的博客
06-07 1万+
使用bootstrap-select遇到的坑-下拉框数据不显示 1、问题背景: 根据项目需要通过bootstrap-select实现下拉多选，但是 1、当使用ajax请求到数据或者模拟的数据添加到下拉框时下拉框数据不显示， 2、将引入的jquery升级到jquery3.1.1版本会出现初始化时下拉框不显示 查找原因后是得有两步refresh和render操作，缺一不可。下面结合案例及...
vue+element 多选下拉框的传值及回显
Humor_L的博客
06-01 7316
给select下拉框添加多选属性multiple 1、多选下拉框传值：定义hostTypelist数组， 传值时： 2、多选下拉框回显 因为要回显，所以回显的格式与之前保持一致（要数组形式），在最后循环的时候不能用刚开始定义的hostTypelist数组去接收，此时能回显出个数，但是显示内容是重复的，仔细思考这儿 回显循环的到底是什么。最后要的是hostid。
多选下拉框回显由于后端返回的是id需要前端自己进行比较来转换成汉字状态然后放到文本上
bbkhhvv的博客
12-16 921
多选下拉框查看回显由id转换成汉字
使用element ui select下拉框多选，编辑状态下回显数据
热门推荐
wangyuanjun008的博客
01-24 5万+
最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中使用的是 element ui 组件
el-select下拉选项的数据源分别是数组或对象时v-for遍历的用法
LewisRoc的博客
01-29 1万+
在使用element ui 中的 el-select选择器组件时，通常我们会使用v-for遍历数据作为选择器的 下拉选项赋值，通常遍历的数据为数组，但有时后端返回我们的数据是对象的话也是可以用来 充当下拉选项的数据源的。 element 官网中的例子是遍历的数组：如下 <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.valu

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值