vue antdesign的下拉选项组件Select在多选场景下,控制不可选择选项的回显问题

已于 2022-03-22 21:11:01 修改
阅读量4.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 typescript vue
于 2022-03-22 21:07:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjww_01/article/details/123670616
版权

背景

采用的是ant design 里面的select组件，多选模式，在编辑的场景下，回显已选择选项。

要求

有些已选中的值在下拉选项里不可再选择，只能保留，或者删除该选中值。

解决方案

一开始尝试将不可选择的选项加上属性disabled，该项（op2）就可显示在已选选项中，但却不支持删除，不满足目的。
在这里插入图片描述

最终解决方案：接口中返回【所有】下拉选项，把一些不能选择的选项加上属性 hidden，值为true，就可以隐藏该选项，又可以回显选中项的名称
在这里插入图片描述

解决思路来源： https://github.com/ant-design/ant-design/issues/27495

seed_01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag
01-24
树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能 基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag，提供调用组件示例代码
antd select搜索框组件下拉框无内容（远程获取到数据但下拉框中无回显）
weixin_44370966的博客
04-11 644
使用antdesign+procomponents+umi+react的项目项目中使用 antd的完成模糊搜索功能，远程获取到数据但回显下拉框无内容。
完美实现 AntDesign select 回显
pig_ning的博客
05-07 452
完美实现 AntDesign select 回显
vue antd a-tree-select 树形结构文字回显需要按照之前的顺序排序
最新发布
suimengfeiyang123的博客
06-28 125
antd select实现搜索和回显功能（更新中～）
congxue666的博客
05-27 7429
antd select实现搜索和回显功能
ant design Vue a-select 数据回显问题
zheshihuahua的博客
02-01 770
出现这个问题是因为value绑定的数据是number类型，而编辑回显的时候是String类型。像这样，23的值应该显示的是人出入门的文字，但是确显示23。
vue antdesign的下拉选项组件Select在多选场景下,回显的不可删除，在下拉选中禁用
qq_40055200的博客
11-10 1258
加上属性disabled。
ant design vue：select多选一行滚动条显示
1111111111
03-11 1529
至此一切都完美，但是随着项目推移，加入了更多组件，发现一个非常奇怪的现象，某个使用了select的自定义组件在其他地方都显示正常，在某个页面显示异常，宽度不够，高度比其他组件高。排查了半天，发现是上面下拉多选样式覆盖导致的，所以需要给组件加id，css里都加上id，就不会再影响其他组件了。下拉多选默认的样式是这样的，会把行高拉大，跟其他组件行高不一致，影响美观。样式问题有时候会很难排查，并且现象很诡异，上次也遇到过。然后下拉多选就变成一行了，带滚动条显示。
VUE 多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应。
weixin_44443380的博客
01-11 809
1、问题分析 下拉框数据是通过回显得到的，因为数据层次太多，render函数没有自动更新，数据更改没有触发render，所以点击时无反应。可以通过手动去刷新实现回显数据增删同步。 2、解决方法 给el-select 绑定@change="handleChange" 方法： handleChange(){ this.$forceUpdate(); }, 3、效果图
解决ant-desgin for vue Select 下拉自定义 tags时无法回显的问题
qq_44806249的博客
11-04 835
解决ant-desgin for vue Select 下拉自定义 tags时无法回显的问题。
Ant Design Vue select下拉列表被选中选项显示的是value而不是label
cry1049208942的专栏
06-24 9932
问题描述： 下拉列表没有根据值来选中选项，显示的是一个value值，实际需要显示label 1.修改前代码 menus: [{ name: '系统管理', id: 3 }] <a-select v-model="mdl.parentId"> <a-select-option value="">请选择</a-select-option> <a-select-option v-for="menu in m.
Vue下拉框回显并默认选中随机问题
12-09
在Vue.js中，使用Element UI库进行前端开发时，经常需要用到`<el-select>`组件来创建下拉框。然而，在实际应用中，我们可能会遇到下拉框数据回显时出现的随机性问题，即默认选中项不固定，可能会随页面刷新而变化。...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
【echarts 环形饼图比例超过100%时，出现样式错乱问题】
hjww_01的博客
11-14 3002
echart 环形饼图占比超过100%样式问题
vue报错Vue is a constructor and should be called with the “new“ keyword
hjww_01的博客
08-22 2411
vue控制台报错：Vue is a constructor and should be called with the “new” keyword 原因：底层判断this是否是vue实例 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._i
angular6 点击子元素，阻止事件冒泡 event.stopPropagation()
hjww_01的博客
06-03 1453
angular6 点击子元素，阻止事件冒泡 html中处理 <span (click)="onClick($event);$event.cancelBubble=true;"></span> ts中处理 onClick(e) { e.cancelBubble = true; }
Vue3+Element Plus下拉菜单多选，为什么不能回显数据
06-10
如果你在Vue3+Element Plus下使用下拉菜单多选，但是不能回显数据，可能是因为你没有正确设置`v-model`指令。 在`el-select`组件中，可以使用`v-model`指令来实现双向绑定，将选中的值绑定到一个变量中，并在后续的...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值