记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题

原创 已于 2022-04-03 23:20:06 修改 · 5.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2022-04-03 23:19:38 首次发布
本文讲述了在使用Ant Design Vue的下拉选择组件时，如何避免编辑时将数据库中的value映射为显示label的问题，通过调整option配置，利用key属性确保正确回显title而非id。

记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题

  1. 先贴解决后的代码在这里插入图片描述
  2. option遍历的集合格式如下在这里插入图片描述
  3. 解释

官方文档中解释到select-option 的key与value可等同
在这里插入图片描述

  1. 代码注释

index+1是因为index为数组索引，从0开始的，我们从官网可知key可等同于value，就不必设置value，而改用key，如果设置了value，这时v-decorator绑定的为集合id,回显的也就为id（option.value），而不是title(option.label)了

antd vue select下拉框设value没有显示对应title却直接显示出value值
wwppp987的博客
01-18 3397
首先我们确信直接原因是antdesignvue没有找到对应值： 示例： <a-row span="24" style="padding: 5px 10px;"> <a-col span="4" style="line-height: 30px;"> 问题属性 </a-col> <a-col sp
Ant Design Vue select下拉列表被选中选项显示的是value而不是label
cry1049208942的专栏
06-24 1万+
问题描述： 下拉列表没有根据值来选中选项，显示的是一个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.
ant design select 回显 显示value值 不回显 label
Mr丶Yang
07-08 1万+
ant design select 回显 显示value值 不回显 label <a-select style="width: 345px;height:30px;" :dropdownStyle="{position: 'relative', zIndex: '10003'}" v-model="addPaper.publicScope">...
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
weixin_43957537的博客
09-21 3633
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
vue中select值number类型回显问题
daxi玫瑰的博客
08-18 1533
vue中select回显问题
el-select 中v-model绑定值，数据回显只显示value，不显示label
热门推荐
ZMJ_QQ的博客
03-09 2万+
1、当v-model绑定的是一个值时 <el-select v-model="modelTree" filterable> <el-option v-for="item in nameList" :key="item.id" :label="item.title" :value="item.id"> </el-option> </el-select> 数据回显只显示value,不显示label，原因可能有以下几个： 1、option的数据中
Ant Design Vue form select v-model绑定的value值 ，怎么自动回显展示中文
06-20
3.AntDesignVue的Select组件在回显时显示value而不是label的可能原因有哪些？4.在Vue中，如何解决异步数据加载后表单控件不更新显示的问题？5.AntDesignVue的Form表单中，v-decorator和v-model可以同时使用吗？有...
ant兼容label-in-value和field-names正常显示回显的vue方案
05-25
为了兼容 `label-in-value` 和 `field-names`，可以使用 `Ant Design Vue` 中的 `ASelect` 组件和 `AForm` 组件。 首先，在 `AForm` 中使用 `:model` 属性绑定数据对象，然后在 `ASelect` 中使用 `v-model` 属性...
<a-select v-model="formModel.buildId" placeholder="请选择所属栋数" allow-clear :label-in-value="true" @change="chooseBuild" > <a-option v-for="(v, i) in floorAllList" :key="i" :value="v">{{ v.label }}</a-option> </a-select>中，chooseBuild方法回调是返回的当前选中行的数据，但是回显只能回显ID，要求回显的时候是中文，floorAllList的结构为[{ label: '1',value: '1',type: 1, },{ label: '2',value: '2',type: 2, }]
03-09
根据引用[4]，用户提到在编辑时回显数据库数据为value而不是label的问题，解决后的代码可能涉及选项的格式，比如在遍历时确保每个选项的label和value正确对应。可能需要检查数据源是否正确，或者在表单初始化时，将...
<a-form-model-item label="关联岗位" prop="positionId"> <a-select v-model="form.positionId" style="width: 380px" placeholder="请选择岗位"> <a-select-option v-for="(label, value) in positionDict" :key="value" :value="value"> {{ label }} </a-select-option> </a-select> </a-form-model-item> 关联岗位第一次赋值，显示的是id，没有显示名称
最新发布
07-02
注意：AntDesign Vue的a-select组件在找不到匹配的选项时，会显示当前绑定的value值（即id），而不是显示空白。所以，确保类型一致很重要。另外，还有一种情况：当我们从后端获取数据并设置选项列表（positions）后...
Vue+Element el-select数据回显(value和label)
fyydashen的博客
10-29 1万+
遇到的问题：在编辑时，回显的数据为数字。 因为巡检周期字段是按约定好的数字传参的，而前端需要根据数字展示文字。常见的情况还有性别，数字0表示男，数字1表示女。 1 ==> 日巡检 2 ==> 周巡检 3 ==> 月巡检 4 ==> 单次巡检 修改前的效果： 修改前的代码： <el-select v-model="editTaskForm.run_style" placeholder="请选择"> <el-option label="日巡..
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 5051
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
ant-design-vue 的 select 中使用 fieldNames 后回填值不是 label 的处理方法
iSmilee的博客
07-15 5774
ant-design-vue 的 select 中使用 fieldNames 后回填值不是 label 的处理方法
解决Ant Design Vue的select搜索框只能搜索value
aixuanxuan的博客
07-16 1万+
在使用a-select的搜索框功能时, 默认搜索的是options的value值 例如: <a-select show-search> <a-select-option value="one">选项1</a-select-option> <a-select-option value="two">选项2</a-select-option> <a-select-option value="three">选项3</a-sele.
前端-a-select搜选时查询的值是value而不是label如何解决
qq_42371932的博客
06-27 1056
使用a-select搜选时查询的值是value而不是label，需要在代码做一些配置。在代码中“添加配置”的地方，添加自己的配置就可以了。
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 5218
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
el-select后端返回数据显示value不显示label
weixin_45288172的博客
01-28 1815
需要展示label值，但是输入框中直接展示了后端数据返回的value值。发生这种情况，主要是因为后端返回的value值与option中的value值数据类型不一致导致的。
ant design vue组件库Radio单选框组件默认值和回显问题
iSoaringUp的博客
09-07 4965
ant design vue组件库Radio单选框组件默认值和回显问题
ant + vue3 : a-select标签在编辑时，回显问题
weixin_54531594的博客
07-25 8039
ant+vue3 a-select 标签编辑时的数据回显问题记录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYLAJSX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值