ant-design中a-checkbox-group获取数据无法回显以及编辑出现无法校验问题

最新推荐文章于 2024-08-19 14:09:02 发布

起风了~~~~

最新推荐文章于 2024-08-19 14:09:02 发布

阅读量2.5k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_70528021/article/details/129275199

版权

在使用Ant Design Vue的`a-checkbox-group`时遇到了两个问题：一是从接口获取的数据无法回显到多选框组件；二是编辑模式下无法校验多选框是否为空。问题1的解决方法是调整v-model绑定值为一级属性，使得数据变化能够被检测到。问题2的解决策略是修改`checkedList`的校验规则，使得编辑时也能正确校验多选框是否为空。

摘要由CSDN通过智能技术生成

今天在使用ant-design-vue编写多选框组件，且字段不能为空的校验时，出现了从接口获取数据后回显不成功以及编辑时的无法对字段进行校验的问题。

问题1：使用无法回显从接口获取的数据。

代码如下：

<a-form-model-item label="提供服务" prop="checkedList">
	<a-checkbox-group v-model="form.checkedList" :options=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

起风了~~~~

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端——》ant-design-vue组件的使用之一（a-checkbox-group多选框的赋值与取值）

叙传

07-01

7187

效果如图所示，这是一个弹窗，弹窗中是多选框。而且不仅包含了多选框，还包含了时间组件实现代码页面 <template> <c-modal title="资质" centered :destroyOnClose="true" :visible="visible" :loading="loading" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel=

ant-design-vue checkbox checked不生效

qq_36987708的博客

05-17

8658

ant-design-vue checkbox checked不生效 https://segmentfault.com/q/1010000018981910 基本用法

参与评论您还未登录，请先登录后发表或查看评论

ant-design-vue a-checkbox-group数据选中不显示问题

qq_44130891的博客

09-26

963

ant-design-vue a-checkbox-group数据选中不显示问题

使用Ant Design CheckboxGroup回显初始数据

f_sober的博客

09-06

1609

使用Ant Design CheckboxGroup回显初始数据

Vue + element ui 中的checkbox-group中的checkbox 回显后无法重新勾选问题

svneclipse的博客

11-19

3769

代码如下就会造成数据回显后不能再次勾选: 修改如下: 回显后无法重新勾选问题就解决了.如果按照上面的修改还是不能解决的话,就要考虑到返回的数据类型是否匹配.

Jeecg-boot前端使用a-checkbox回显

weixin_47996698的博客

06-22

1171

因为后端数据库传送的参数是布尔类型的true和false 前端决定用复选框回选编辑表单/初始化表单 form: this.$form.createForm(this), edit (record) { this.form.resetFields(); this.model = Object.assign({}, record); this.visible = true; this.$nextTick(() => { this.form.setFieldsValu

ant-design for vue 组件库中的多选框checkBox

热门推荐

qq_42750329的博客

10-24

1万+

目前我所做的项目中用到了vue的一个组件库----ant-design，是目前比较流行了三大组件库之一在应用到其中的<a-checkBox>标签时发现了其中的一个bug 代码如下： <a-checkbox :checked="isChecked" @change="onChange"></a-checkbox> 拥有一定js基础的程序员都知道，在原生的js中...

ext checkboxgroup 回填数据解决

01-19

重写代码如下: //解决checkboxgroup回填数据问题 Ext.override(Ext.form.BasicForm,{ findField : function(id){ var field = this.items.get(id); if(!field){ this.items.each(function(f){ if(f.isXType(...

elementUI的checkBox已经checkGroup的数据绑定为对象时的回显问题的解决

challenge_study的博客

08-19

8269

elementUI在checkBox的一些使用技巧

Ant Design vue a-checkbox-group 不生效

qq_51622532的博客

02-24

2822

Ant Design vue a-checkbox-group 不生效

原创：vue使用elementUI的复选框el-checkbox-group与el-checkbox回显失效问题解决！！

HD243608836的博客

04-27

1万+

一、场景：用户表——角色表，用户管理界面可以选择角色，并且每次初始化时候支持“回显”，如图：使用elementUI的复选框组合： el-checkbox-group el-checkbox 二、上代码： 1. 整体结构（列表页和详情页）： 2. detail页面的组件Info： <el-checkbox-group v-model="chooseRoleNames"> <el-checkbox v-for="(item,index) in totalR

antd 里面的Checkbox回显功能和收集信息功能

qq_40959617的博客

09-30

6229

-可以直接运行源码看效果。 import React from 'react'; import { Checkbox,Form,Button} from 'antd'; const CheckboxGroup = Checkbox.Group; const FormItem = Form.Item; class some extends React.Component{ onCh...

vue3中使用el-checkbox-group回显后无法重新勾选或取消问题解决

wed2019的博客

10-10

4523

仅记录个人工作中碰到的一些小问题，网上搜了很多，答案五花八门，没有能帮到我的，无意之间发现了一篇类似的帖子，遇到的情景和我有些相似，我试着改造后引入我的代码中，发现成功解决，以此来写这篇博客，希望能帮到有需要的人。推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。在vue3中，首先引入nextTick，这时候再去操作复选框组，发现可以操作了。nextTick 是将。vue2中也是同理，

antd 复选框（a-checkbox-group）纵向排列

是秃子总会发光

03-06

2810

antd 复选框（a-checkbox-group）纵向排列

checkbox选中与回显问题1

PT_HFUU的博客

10-19

835

CheckBox选中存入到数据库: <tr> <td style="text-align: right">复选框：</td> <td colspan="3"> <label class="checkbox"><input lay-ignore type="checkbo...

react antd from表单全选按钮Button触发CheckBox状态回显

最新发布

u010234868的专栏

08-19

447

1. 如果将Button按钮改成Checkbox全选，CheckBox全选的onChange事件会冒泡影响CheckboxGroup的onChange事件，使用e.stopPropagation无法阻止事件冒泡。上述代码使用React和Ant Design实现了一个表单，其中包含了一个CheckboxGroup和一个“全选”按钮。2. 如果将1中的CheckBox全选组件位置移动到CheckboxGroup外部Form.Item的内部，使用form.setFieldsValue无法正常回显。

复杂表单中checkbox的回显问题-使用valuePropName&动态表单自定义校验【函数校验】

qq_45925548的博客

01-18

977

1.复杂表单中checkbox的回显问题-使用valuePropName 2.动态表单自定义校验【函数校验】

antd vue form 手动校验_动态生成的表单如何用 el-form 校验，你知道吗？

weixin_39875516的博客

11-25

1396

背景Vue 的 el-form 提供了表单校验功能，常规用法是用 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。但是有一种情况，如果表单位于 v-for 标签中，是动态生成的，该怎么使用 el-form-item 来校验呢？此外，如果待校验的表单是 el-popover 组件中的 readonly 表单，blur 触发不稳定，该怎么处理呢？本文继...

一个按钮提交两个form表单_【第1535期】前端 Form 的表单的一个通用解决方案

weixin_39751391的博客

11-23

1849

前言今日早读文章由阿里@布达投稿分享。@布达，Alibaba Fusion项目组的。花名潕量。主要专注在设计系统、组件、可视化搭建这个领域正文从这开始～～Fusion Next - Form 表单解决方案前端的Form 表单主要用于解决数据获取、数据校验、数据赋值这三大类问题。这篇文章里面的提供的解决方案能够比较完美的用在 React 框架上，但是解决问题的思路相信应该是可以使用于任何...

a-checkbox-group数据回显

10-18

a-checkbox-group 数据回显可以通过 v-model 绑定一个数组来实现。当选中某个选项时，该选项的 value 值会被添加到数组中；当取消选中某个选项时，该选项的 value 值会从数组中移除。因此，我们只需要将该数组绑定到 a-checkbox-group 的 v-model 上，就可以实现数据回显了。例如，我们有一个 a-checkbox-group，其中有三个选项，分别是 "选项1"、"选项2" 和 "选项3"，它们的 value 值分别为 1、2 和 3。我们可以将一个数组绑定到该 a-checkbox-group 的 v-model 上，例如： ``` <template> <a-checkbox-group v-model="checkedValues"> <a-checkbox :value="1">选项1</a-checkbox> <a-checkbox :value="2">选项2</a-checkbox> <a-checkbox :value="3">选项3</a-checkbox> </a-checkbox-group> </template> <script> export default { data() { return { checkedValues: [1, 3] // 默认选中 "选项1" 和 "选项3" } } } </script> ``` 在上面的代码中，我们将一个数组 checkedValues 绑定到 a-checkbox-group 的 v-model 上，并且默认选中了 "选项1" 和 "选项3"。当用户在页面上进行勾选或取消勾选操作时，checkedValues 数组会自动更新，从而实现数据回显。