andt desgin vue pro a-select 下拉框回显问题

最新推荐文章于 2024-08-09 15:14:19 发布
最新推荐文章于 2024-08-09 15:14:19 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43687353/article/details/109379893
版权
博客内容讲述了在前端修改表单时遇到的问题，即后端返回的状态值为布尔型，与前端预期的数值型不一致，导致表单无法正确回显。博主通过F12调试工具发现并分析了问题原因，提出了需要调整后端返回数据类型的解决方案。
摘要由CSDN通过智能技术生成

1.问题描述

前端的修改表单, 没有回显状态
在这里插入图片描述

在这里插入图片描述

2.问题原因

按下F12, 打开调试工具, 查看请求返回的数据, 可以发现后端返回的status是布尔值, 和前端的value="1"是不对应的, 所以需要修改数据的类型
在这里插入图片描述

小柴_
关注
专栏目录
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
在Ant Design Vue中，`a-select`组件是一个用于选择项的下拉框，它提供了丰富的交互和样式。在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，...
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
weixin_43957537的博客
09-21 3228
a-select选择好后，点击编辑按钮后，不回显value而只回显绑定的id的解决办法
antDesign的a-select数据回显选中initialValue问题解决方法
marko39的专栏
07-28 1749
在开发过程中表单中的【学习专业】下拉列表项需要数据回显，设置了initialValue，但只显示下拉选项的majorId值, 没有显示具体的专业名称，经排查发现是majorId数据类型导致的，下拉选项majorList数组中的id是数值类型，而在表单赋值时给的majorId是字符类型，数据类型不一致导致的 ，将两边的id类型转为一致的就可以了。在对变量赋值时，强制转变类型 , 我这是都转为数值类型，你都转为字符类型也可以。下拉框数据回显正常了。
a-select点击编辑回显的是数字
最新发布
qq_52520278的博客
08-09 175
下图，我这条数据是“维护”状态，但是我点击编辑的时候，显示的是数字“2”，原因如下：我们在添加这条数据的时候，传进去的是“维护”状态对应的值“2”，所以我们在点击编辑的时候，后端返回来的也是一个integer类型的数字2，导致我们回显有误，那个如何解决呢。
ant design Vue a-select 数据回显问题
zheshihuahua的博客
02-01 885
出现这个问题是因为value绑定的数据是number类型，而编辑回显的时候是String类型。像这样，23的值应该显示的是人出入门的文字，但是确显示23。
vue表单数据回显有问题
booste的博客
04-12 2300
简单记一下 今天遇到表单中的“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
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题
YYLAJSX的博客
04-03 5048
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题 先贴解决后的代码 option遍历的集合格式如下 解释 官方文档中解释到select-option 的key与value可等同 代码注释 index+1是因为index为数组索引，从0开始的，我们从官网可知key可等同于value，就不必设置value，而改用key，如果设置了value，这时v-decorator绑定的为集合id,回显的也就为id（option.value），
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
05-17
电子vue-vite-webpack Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm ...
Ant Desgin Vue级联js.rar
11-22
在这个名为"Ant Desgin Vue级联js.rar"的压缩包中，包含的是关于Vue.js与Ant Design Vue结合使用的级联选择器（Cascader）的JS代码和示例。 级联选择器是一种常见的UI元素，它允许用户在多个层次的选项中进行选择，...
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
@ant-design/pro-table:trophy: Use Ant Design Table like a Pro!DemoAPIpro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。Table属性描述...
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、平板和手机上均可使用。 最新的技术栈 统一的技术规范 权限方案（路由，菜单，操作...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
热门推荐
XUELUO123456789的博客
06-03 2万+
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组，并循环 后台数组格式： 数组(例):arr=[ {id:1,name:'数组1',num:2,provice:'qqqqq'}, {id:2,name:'数组2',num:3,provice:'qqqqq'}, {id:3,name:'数组3',num:4,provice:'qqqqq'}, ] 获取数组的处理方法： 重点：当获取后台的数
关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案
qq_43710066的博客
02-04 893
关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案
a-select回显后，不能选择
xiaoran_1997的博客
09-24 1954
antdv中<a-select>组件，数据回显后，选其他选项框内元素未改变，但是提交是有更改数据的，是因为下拉选项是从接口循环来的，render函数没有自动更新，需手动强制刷新。 添加@change="$forceUpdate()"强制更新： <a-select v-model="form3.users"placeholder="请选择" @change="$forceUpdate()"> <a-select-optionv-for="user in...
ant + vue3 : a-select标签在编辑时，回显问题
weixin_54531594的博客
07-25 6674
ant+vue3 a-select 标签编辑时的数据回显问题记录
vue修改编辑弹窗下拉数据回显
agua001的博客
04-27 8525
1、效果如图： <a-form-item label="测站类型"> <a-select allowClear v-decorator="[ 'typeId', { rules: [{ required: true, message: '请选择测站类型' }] }, ]" placeholder="请选择测站类型" > <a-select-option v-for="(item, index)
下拉框的回显
Garry
11-18 365
<th width="30%"><b>*</b>员工标签：</th> <td width="20%"> <select id="employeeLabelId" name="employeeInfo.employeeLabelId"> ...
andt vue下拉选框回显
q511758643的博客
08-29 1566
andt vue下拉选框回显 alarmState后台数据类型为int,下拉选项从字典里面读取的话,显示需要""+alarmState转换一下 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="故障状态"> <a-select placehol...
ant desgin vue 中a-menu去掉右边的竖线
05-31
Ant Design Vue 中的 `a-menu` 组件默认会在菜单项之间显示一个竖线分隔符。如果你想要去掉这个竖线，可以使用 `mode` 属性来设置菜单的模式为 `horizontal`。 例如，下面的代码演示了如何将 `a-menu` 组件的模式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值