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

已于 2022-04-03 23:20:06 修改
阅读量4.9k 收藏 3
点赞数 1
分类专栏： 笔记 文章标签： vue
于 2022-04-03 23:19:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YYLAJSX/article/details/123946572
版权

记录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)了

YYLAJSX
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Ant Design Vue select下拉列表被选中选项显示的是value而不是label
cry1049208942的专栏
06-24 9992
问题描述： 下拉列表没有根据值来选中选项，显示的是一个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.
avue 实现子表单表单选项的自定义显隐
weixin_40466351的博客
05-16 6489
一、效果 二、需求 可以一次性创建多个工单，并且点击就医时，显示医生等选项，选择清扫时，显示清扫范围选项。input-table选择责任人时，回填责任人的联系方式 三、项目思路 1、使用avue的 子表单功能 type:form 2、使用avue的input-table组件 四、疑问 1、首次怎么添加第一条数据 手动执行一次添加子表单数据操作 this.$refs["avue-form"].$refs.workOrders[0].$refs.temp.addRow(); 2、虽然能够监听到工单类型的值
前端-a-select搜选时查询的值是value而不是label如何解决
最新发布
qq_42371932的博客
06-27 325
使用a-select搜选时查询的值是value而不是label，需要在代码做一些配置。在代码中“添加配置”的地方，添加自己的配置就可以了。
el-select后端返回数据显示value不显示label
weixin_45288172的博客
01-28 1620
需要展示label值，但是输入框中直接展示了后端数据返回的value值。发生这种情况，主要是因为后端返回的value值与option中的value值数据类型不一致导致的。
vue表单数据回显有问题
booste的博客
04-12 2257
简单记一下 今天遇到表单中的“a-select”的下拉列表数据不回显的问题，通过typeof查看后发现是<a-select>中的value和<a-select-option>的value，数据类型不同造成的。类型转换即可解决问题。 <a-select ref="select" v-model:value="category.parent" > <a-select-option :value="0">无</a-select-op
数据库存数据为字典的key，在页面显示对应的value方法
qq_41955329的博客
08-22 957
数据库存数据为字典的key，在页面显示对应的value方法
ant-design-vue 的 select 中使用 fieldNames 后回填值不是 label 的处理方法
iSmilee的博客
07-15 4751
ant-design-vue 的 select 中使用 fieldNames 后回填值不是 label 的处理方法
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
更推荐的方法是利用Ant Design Vue的`label-in-value`属性，它使得`a-select`在选中项时返回包含`value`和`label`的对象，而非单一的值。为了使`placeholder`生效，我们可以使用计算属性来处理`v-model`，确保在未...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
vue-antdesign-admin-template：Ant Design Pro Vue模板
02-05
蚂蚁设计专业Vue模板根据改造后的开箱即用的后台管理系统模板，优化了很多内容，更轻量，更简洁，可以在此模板上快速，便捷地去建造自己的后台项目。预览：|优化：项目结构和文件夹命名，项目结构更加合理优化：只...
ant-design-vue3-admin:一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用
05-19
ant-design-vue3-admin 一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用。 最新的技术栈 统一的技术规范 权限方案（路由，菜单，操作...
ant-design-vue-pro-master.zip
08-20
《Ant Design Vue Pro Master源码解析与多页签实现》 Ant Design Vue Pro Master是一个基于Ant Design Vue的前端项目框架，提供了丰富的UI组件和优化的开发体验。此压缩包包含了项目的一个特定版本，该版本特别支持...
ant design vue组件库Radio单选框组件默认值和回显问题
iSoaringUp的博客
09-07 4272
ant design vue组件库Radio单选框组件默认值和回显问题
谈谈ant-design-vue中的下拉选择框select组件的使用
热门推荐
qq_43776017的博客
03-29 2万+
ant库中的下拉选择框 用户实现 使用ant库中的下拉选择组件实现用户下拉选择功能 解决办法 使用直接手写一行行下拉框中的内容 选项一 选项二 选项三 使用与vue的v-for指令循环出下拉框中的内容 {{item.value}} </a-select> //数组选项 var options = [{ id:0, value:"选项一" },{ id:1, value:"选项二" },{ id:2, value:"选项三" },] 使用的option属
antDesign的a-select数据回显选中initialValue问题解决方法
marko39的专栏
07-28 1715
在开发过程中表单中的【学习专业】下拉列表项需要数据回显，设置了initialValue，但只显示下拉选项的majorId值, 没有显示具体的专业名称，经排查发现是majorId数据类型导致的，下拉选项majorList数组中的id是数值类型，而在表单赋值时给的majorId是字符类型，数据类型不一致导致的 ，将两边的id类型转为一致的就可以了。在对变量赋值时，强制转变类型 , 我这是都转为数值类型，你都转为字符类型也可以。下拉框数据回显正常了。
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
weixin_43957537的博客
09-21 3153
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
ant + vue3 : a-select标签在编辑时，回显问题
weixin_54531594的博客
07-25 6354
ant+vue3 a-select 标签编辑时的数据回显问题记录
ant design vue选择器select的使用（详细）
weixin_45745641的博客
08-11 1万+
概要 这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图： 具体实现过程： 写好前端样式 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果 看一下 a-select 中的
antdvue tree-select树选择组件 选中值显示label拼接父节点
WANGHONGP的博客
12-21 4305
antdv的a-tree-select 选中子节点拼接父节点展示
ant design vue a-form-model-item label属性右对齐
06-09
要想让 Ant Design Vue 的 A-Form-Model-Item 组件的 label 属性右对齐，可以通过给 label 标签添加一个样式来实现。具体做法如下： 1. 在 A-Form-Model-Item 组件中设置 label 属性，并给 label 标签添加一个 class 名称，如下所示： ```html <a-form-model-item label="用户名：" class="label-right"> <a-input v-model="username" /> </a-form-model-item> ``` 2. 在样式表中添加 .label-right 的样式，将 label 的 text-align 属性设置为 right，如下所示： ```css .label-right > label { text-align: right; } ``` 这样就可以让 label 属性右对齐了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YYLAJSX

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

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

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

打赏作者

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

抵扣说明：

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

余额充值