k-form-build组件默认值与表单数据渲染冲突

已于 2022-11-02 14:35:24 修改
阅读量1.6k 收藏
点赞数 2
文章标签： r语言 前端 开发语言
于 2021-11-30 10:33:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/121625585
版权
博客讲述了在使用k-form-build组件时遇到的问题，该组件的:value属性用于渲染表单数据，:defaultValue用于设置默认值。当需要实时前后端交互并确保用户离开页面后能回显答题状态时，发现两者同步加载导致错误。解决方案是通过computed属性监听表单数据，待其渲染完成后再渲染默认值，确保了表单的正确显示。
摘要由CSDN通过智能技术生成

页面问卷功能使用k-form-build组件，组件有初始api属性，:value为渲染表单的json数据，：defaultValue为表单选项的默认值

 根据需求需要让答题者在答题过程中，答题操作能实时的进行前后端交互，则需要两个属性来解决这个功能，一个是渲染表单的json数据（:value属性）

另一功能为用户答题中，如果退出页面，重新进入的话，需要回显之前已经做过的答题操作，需要（:defaultValue）属性

 遇到的问题：！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

由于两个属性都使用组件的api属性，且都是与后端实时交互拿到的值，所以在响应速度上是相同的，但官方的设计是需要先渲染出表单数据才能渲染出默认值，同时响应则会报错，这时候就需要一个操作让表单数据先渲染，之后默认值数据再进行渲染

 使用computed监听表单数据，等到表单数据渲染完之后再渲染默认值数据

刘大气
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
k-form-design:基于vue Ant-Design 的表单设计器，快速开发
05-10
表单设计器 k-form-design 简介 设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速 注：该项目不兼容vue3.0项目，暂无后续兼容vue3.0的计划 特性 可视化配置页面 提供栅格、表格等布局 布局嵌套使用 提供预览、保存、生成json、生成可执行代码等操作 支持表单验证 快速获取表单数据 自定义组件插入 自定义主题色 组件 KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面） KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面） 安装 # 使用yarn yarn add k-form-design
vue-form-builder
04-05
形式生成器 练习打包套件并发布 开发 npm run serve 建置 npm run build 发布 npm publish // 第一次需設定npm帳號 npm adduser npm publish -- access public
k-form-design 基础
最新发布
2401_84424519的博客
06-11 631
基于kcz66开源的k-form-design的3.6.1分支进行的二次开发。它vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速表单设计器: 表单设计器。
KFormBuild增加组件属性
tonysh_zds的博客
01-04 547
KFormBuild增加组件属性
（Ant Design of Vue） Form表单动态设置默认值避开setValuesField)
qq_41784169的博客
01-29 3746
（Ant Design of Vue） Form表单动态设置默认值避开setValuesField分离form数据和 表单默认数据绑定submit数据设置默认值触发事件表单提交 分离form数据和 表单默认数据 由于使用setValuesField加载数据导致一系列的错误，因此作者不通过修改form的值来到达设置默认值的目的，使用到两个变量 infoForm: {}, infoDrawer: false, 绑定submit数据 form标签中引入 :form="form" 设置默认值 v-de
formbuilder表单构建工具_在线表单设计器代码
11-24
formbuilder表单构建工具_在线表单设计器代码
k-form-design表单设计器 v3.8.18.zip
03-25
《k-form-design表单设计器 v3.8.18》是一款强大的前端表单构建工具，专为提升开发效率而设计。这款开源软件允许开发者快速、灵活地创建自定义表单，适应各种业务需求，尤其适合于系统软件工具的构建和建站模板的...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
每个表单字段都由`el-form-item`组成，它们绑定到`form`对象的相应属性上。当点击“保存”按钮（`saveContact`方法）时，如果数据有效，我们可以进行提交操作；点击“取消”按钮则关闭对话框并调用`resetField()`。 ...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-...
详解基于原生JS验证表单组件xy-form
10-16
本文将深入探讨基于原生JavaScript的表单组件xy-form，它提供了一种更美观且易于定制的表单验证解决方案。原生HTML表单虽然内置了一些基础的验证功能，如`require`、`minlength`、`maxlength`以及不同类型的`input`...
vue-form-builder:超级表单生成器基于Vue构建，具有拖放功能，可保存的表单模式和易于维护的表单升级
04-30
形式生成器 一个简单的构建器，可帮助您为功能/模块/站点生成超级表单，...易于使用，创建，升级，维护......在可以使用Vue-Form-Builder时，为什么需要对表单进行编码？通过一些额外的步骤来渲染它：D 好处： 开发中的代码更少（无需自己执行<form> <div> <input> .... </div> </form> ） 易于维护，将来可以更新您的表格。 使用超级友好的UI / UX设置表单。 可扩展性（您的自定义控件，样式等） 表格验证？ 我懂你了 包括HTML5结构，无花招。 不再包含JQUERY 给这个仓库 :star: （星号），如果您实际上喜欢这个，并且可能在您的项目中使用它：D！ 谢谢！ 如果遇到任何错误或问题，请随时打开一个问题。 谢谢。 演示版 在线演示： 演示表格（现实生活中的示例）： 回购： : 支持的浏览器 最新的 :check_mark: 最新的 :check_mark:
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </Form.Item> 正确代码： <Form.Item> { getFieldDecorator('use
vue-form-build 接口文档
u012429102的博客
04-25 1855
#此项目只需要配置static目录下的apiPath为你自己的,eg apiPath:10.0.192.16:8080 #在后端给定一个post 新增的api: /dataV/layout/add 查询api /dataV/layout/findLayout byId查询api /dataV/layout/findLayoutById 删除api /dataV/layo...
form builder视图窗口下找不到堆叠视图项
菜鸟来临的专栏
12-01 953
form builder视图窗口下找不到堆叠视图项
formbuild拖拽表单设计器
weixin_34174322的博客
04-23 1649
formbuild拖拽表单设计器 表单设计器适用于OA系统、问卷调查系统、考试系统等系统，具体使用请前至官网API请点击 formbuild拖拽表单设计器 formbuild迭代几个功能 1.升级BootStrap3.0版本、代码DOM结构有所修改2.form.build.core.js源代码解读3.新增复制源代码copyToClipboard.js功能、html格式...
k-form-design 改成自己组件步骤
tonysh_zds的博客
11-16 2050
k-form-design 改成自己组件步骤
探索 K-Form-Design：高效前端表单构建利器
gitblog_00019的博客
04-09 588
探索 K-Form-Design：高效前端表单构建利器 k-form-design基于vue Ant-Design 的表单设计器，快速开发项目地址:https://gitcode.com/gh_mirrors/kf/k-form-design 项目简介 是一个强大的前端组件库，专为快速构建可配置、灵活的表单设计而生。它基于 React 框架，提供了丰富的预设组件和强大的表单设计能力，让开发者可以...
ant design vue input change_基于 Vue+Antd 拖放表单构建器KFormDesign
weixin_39783360的博客
11-25 1096
前几天有给大家分享一个Vue可视化设计器。今天继续推荐一款超不错的Vue拖拽表单设计器K-Form-Design。Vue可视化在线制作平台GodsPenk-form-design 基于 vue.js+ant-design 构建的表单设计器。在线快速生成配置表单。支持自定义属性配置、生成JSON及代码。功能特性可视化配置页面提供栅格、表格等布局布局嵌套使用提供预览、保存、生成json、生成可执行代码...
a-form-item校验非表单组件
04-04
a-form-item校验非表单组件是指在Ant Design的a-form组件中，使用a-form-item包裹非表单组件（如div、span等），并对其进行校验。这种方式可以方便地将非表单组件与表单组件一起校验，实现表单的完整性和正确性。 例如，可以在a-form-item中使用一个自定义的日期选择器组件，并对其进行日期格式校验： ```react import { Form, Input, DatePicker } from 'antd'; const { RangePicker } = DatePicker; const Demo = () => { const onFinish = (values) => { console.log(values); }; const validateDate = (rule, value) => { if (value && !value[0]) { return Promise.reject('请选择开始日期'); } if (value && !value[1]) { return Promise.reject('请选择结束日期'); } if (value && value[0] > value[1]) { return Promise.reject('开始日期不能大于结束日期'); } return Promise.resolve(); }; return ( <Form name="demo-form" onFinish={onFinish}> <Form.Item name="date" label="选择日期" rules={[{ validator: validateDate }]}> <RangePicker /> </Form.Item> </Form> ); }; ``` 在上面的例子中，我们使用了Ant Design的a-form组件，将一个自定义的日期选择器组件（RangePicker）包裹在a-form-item中，并对其进行日期格式校验。当选择的日期不符合校验规则时，会显示错误信息。这样就可以方便地将非表单组件与表单组件一起校验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值