Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set `ASele

原创 已于 2024-05-15 18:06:47 修改 · 1w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #ant

于 2023-02-28 14:53:44 首次发布
在使用ant-design-vue的表单组件时，遇到一个警告，提示Form.Item不能收集多个字段如Select、InputNumber等。为解决这个问题，文章提出了使用<a-form-item-rest>来包含不需要被收集的字段的方案，参考官方文档可找到更多细节。

控制台出现这个提示:
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set ASelect, ASelect, AInputNumber, AInputNumber, AInput 5 field items. You can set not need to be collected fields into a-form-item-rest

table中使用了自定义组件

如图：
在这里插入图片描述在这里插入图片描述
解决方案：

// 对应的多组件 添加
 <a-form-item-rest></a-form-item-rest>

在这里插入图片描述
详情 官网

vue3+vite - 安装引入Ant Design Vue组件库报错Failed t resolve import“ant-design-vue/dist/antd.css“ from x Does
高级前端工程师
12-22 7470
vue3，vite，ant design vue，组件库，安装引入报错，vue3使用antd报错，vue3引入ant组件库报错，antd.css这个引入失败怎么办，已经安装了Antd组件库但无法使用，报错无法解析antd.css文件，vue3.0引入antdv在main.ts中报错，vite + vue3引入ant design vue 报错，引入import ‘ant-design-vue/dist/antd.css‘时报错，详细解决方案，换版本也不行，详细解决方案，依旧报错，改了版本号，重新安装依赖也不
vue2/3 - ant design vue报错You cannot set a form field before rendering a field associated with the va
高级前端工程师
04-07 2742
antd，ant design vue，antd vue，vue2，vue3，vue报错，vue+antd报错，setFieldsValue，You cannot set a form field before rendering a field associated with the value.，解决antd vue中使用setFieldsValue报错“You cannot set a form field before rendering a field associated with ”表单set
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item,you haved set `ACascad
weixin_44784401的博客
02-28 4952
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set `ACascader`, `AInputNumber` 2 field items. You can set not need to be collected fields into `a-form-item-rest`
ANTD3+VUE3控制台报错[ant-design-vue: Form.Item]FormItem can only collect one field item, you haved set
zhimooo的博客
07-18 881
原因是一个<a-form-item>建议只绑定一个v-model，如果存在多个v-model值，应该用<a-form-item-rest>标签绑定。
Warning: FormItem can only collect one field item, you haved set `ASwitch`, `ARadioGroup` 2 field处理
最新发布
花花鱼的专栏
12-23 317
Warning: FormItem can only collect one field item, you haved set `ASwitch`, `ARadioGroup` 2 field，You can set not need to be collected fields into `a-form-item-rest` 的简单处理方法实现。
Ant Design Vue表单组件a-form-item-rest使用
weixin_43996999的博客
12-25 4202
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set ACheckbox, ACheckboxGroup 2 field items. You can set not need to be collected fields into a-form-item-rest
vue antDesign form表单问题总结
jacky
06-17 4669
最近新项目使用antd1.6版本进行的开发，相比之前项目1.5的版本，很多组件都进行了调整。项目开发中form表单用的频率比较高，今天做一下总结！ 首先说下1.5的版本吧，1.5版本的时候表单组件一直用的form，当时感觉还行，相比elementUI差异还是比较大，尤其对值的操作和表单的校验，简单上一下代码说明一下 <!-- 模板 --> <a-form :form='form'> <a-form-item label='用户名'> <a-input v-de
【Ant-Design-Vue】1、简介与安装
weixin_52938153的博客
06-10 3843
如果希望对 Ant-Design-Vue 的默认样式进行自定义，可以通过修改 Less 变量来实现。以下是自定义主题的步骤：在css: {less: {},},},},在// 引入 less 文件。
使用ant-design-vue的Form表单
richest_qi的博客
06-22 2546
文章目录使用脚手架新建项目安装并导入ant-design-vue，使用Form组件修改main.ts修改App.vue修改Hello.vue启动应用，测试验证 使用脚手架新建项目 vue create antd-demo 所以，我们得到了这么一个项目，如下， 安装并导入ant-design-vue，使用Form组件 npm install --save ant-design-vue@next 修改main.ts import { createApp } from 'vue'; import App
vue配置vue.config.js中less错误（引用ant-design-vue/dist/antd.less主题样式报错解决方法）
weixin_38924500的博客
05-04 5455
引用ant-design-vue/dist/antd.less主题样式报错 ./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref–10-oneOf-3-1!./node_modules/postcss-loader/src??ref–10-oneOf-3-2!./node_modules/less-loader/dist/cjs.js??ref–10-oneOf-3-3!./nod.
Ant Design Vue 表单常用点
Qpenpred的博客
07-22 1750
Ant Design Vue 表单
ant-design-VUE form 表单提交 文件和表单数据
skybot的专栏
01-28 7537
由于项目里需要用到在一个表单里使用文件和内容一起提交到服务端，因此需要进行处理。 前端：Vue2.0 Ant-desing 后端：.net WebAPI 界面如下： 页面代码： <template> <div class="clearfix" style="background-color:#ffffff;"> <a-form :form="form"> <a-form-item label="资源名称" has-feed...
ant-design-vue按需加载报警告——2022-04-21
m0_51400566的博客
04-21 2153
在使用Formily Vue中配置了按需加载如图： npm run serve运行后报警告如图：（导致页面也无法显示） 然后去ant-design-vue官网找答案，因为项目是Vue2,对应的ant-design-vue版本应降到1.x，如图 npm install ant-design-vue@1.7.8再重启项目，运行正常。 ...
关于使用ant-design设计可动态添加FormItem的过程中遇到的问题记录。
hl582567508的博客
12-03 1万+
应用场景：创建一个可动态增加和删除的FormItem组合组件，由一个下拉菜单和一个文本域组成。问题现象：按照正常的操作流程，组件可以正常的添加和删除，下拉菜单也可以正常的选择。但是如果先添加，然后删除第一个源组件，则剩下的第二个组件在选择下拉菜单的过程中就会报错，提示: Uncaught TypeError: Cannot read property 'filter' of undefined问题分
在项目中遇到的关于form表单的问题
weixin_41897680的博客
02-12 1134
在项目中遇到的关于form表单的问题
antd表单的＜a-form-item＞使用自定义label 插槽
热门推荐
peppa_pig的博客
07-14 1万+
item的label类型可以使字符串或者自定义label插槽。 1.直接使用字符串类型是最常见的 <a-form-model-item prop="job" label="岗位"> <a-input v-model="job" placeholder="请输入岗位" /> </a-form-model-item> 2.自定义label使用插槽 <a-form-model-item prop="job"> <span s...
扩展字段，动态FormItem
GoodMorningXYJ的博客
05-05 1473
在配置项中配置扩展字段，然后在对应新增处新增数据 DynamicFormItem 动态FormItem 组件 <template> <div> <el-divider content-position="left">扩展字段</el-divider> <el-form-item v-for="(item,key) in jsonList" :key="key" :label="item.nam
vue3.0中使用ant design vue 表单内部分元素不校验
qq_43390061的博客
12-10 6002
博主最近在写vue3.0项目 组件库为蚂蚁金服的ant design vue 在写表单时,有一个短信登陆的需求 布局为左边Input框 右边按钮 源码大概如下 <a-form-item label="短信登录" name="code"> <a-row> <a-col :span="14"> <a-input v-model:value="loginForm.code" />
ant-design-vue-pro：企业级Vue前端UI框架
资源摘要信息:"ant-design-vue-pro是一个面向企业级应用的Vue.js前端解决方案，利用Ant Design Vue的丰富组件库来打造专业的管理界面。该项目是一个基于Vue.js的预制模板，旨在通过预设的组件、布局和功能模块来简化...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值