VbenAdmin框架当FormSchema在单独ts文件中时调用表单的自带方法及表单项的组件方法

最新推荐文章于 2024-04-22 09:37:37 发布
最新推荐文章于 2024-04-22 09:37:37 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： 一些百度不到自己解决的问题 文章标签： typescript 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44367273/article/details/122210687
版权

问题：在使用useForm创建表单并把页面上的使用的表单组件的FormSchema单独放在ts文件中时，想调用表单自带方法如：

{
    setFieldsValue,
    updateSchema,
},

解决参考源码：在这里插入图片描述

有没有不存在的昵称啊
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vben admin / ant design 的 Form表单获取/设置/清空某个表单项的值 , 使用 setFieldsValue 设置某个字段的时候,表单被清空的解决方案
YZRHANYU的博客
03-10 5142
vben admin / ant design 的 Form表单获取/设置/清空某个表单项的值 , 使用 setFieldsValue 设置某个字段的时候,表单被清空的解决方案
JSON Schema 实现复杂结构表单数据展示
quanxiangcloud的博客
03-21 2622
阅读本文之前，建议先阅读往期内容：基于 Formily 的表单设计器实现原理分析 和 Form Schema 定义详解。 表单是前端常见的交互形式，广泛用于业务数据收集的场景中。例如添加员工时填写的员工信息表，申请固定资产时填写的申请表等。借助表单引擎，开发者可以快速完成上述表单的设计和发布，提升企业管理效率。 JSON Schema JSON Schema 是表单设计器和表单渲染组件之间的沟通语言，是一个 JSON 文件协议，用于规范 JSON 文件内容。它与平台无关，可以描述任意复杂的数据结构。J.
vue3+ts动态表单渲染，antd的useForm改造
qq_42980244的博客
03-15 459
getFormFields方法，处理大量数据，生成动态表单。return h函数，h函数是vue里面。render函数的渲染。传参合返回值定义如上。
Form Schema 定义详解
quanxiangcloud的博客
10-08 3347
背景 上期分享了基于 Formily 的表单设计器实现原理，JSON Schema 是表单设计器和表单渲染组件之间沟通的语言。为了更深入理解表单设计器的核心，本期为大家详细解读表单 Schema 详细格式及快速入门实践。 Formily 提供了 JSON Schema、JSX Schema、纯 JSX 三种开发模式。由于 JSON 可以序列化保存到数据库中，所以 JSON Schema 的方式非常适合后端动态渲染表单，前端完全不需要维护 schema，只需利用 Formliy 提供的 SchemaForm
form表单那点事儿(下) 进阶篇
weixin_34345560的博客
06-26 87
上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。 表单操作 取值 用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： <form id='form0'></form> <form action="/login" met...
读写Android中assets目录下的文件的方法详解
01-04
Android资源文件大致可以分为两种： 第一种是res目录下存放的可编译的资源文件： 这种资源文件系统会在R.java里面自动生成该资源文件的ID，所以访问这种资源文件比较简单，通过R.XXX.ID即可； 第二种是assets目录下存放的原生资源文件： 因为系统在编译的时候不会编译assets下的资源文件，所以我们不能通过R.XXX.ID的方式访问它们。那我么能不能通过该资源的绝对路径去访问它们呢？因为apk安装之后会放在/data/app/**.apk目录下，以apk形式存在，asset/res和被绑定在apk里，并不会解压到/data/data/YourApp目录下去，所以我们无法直接获
async-form-antd:定义formSchema表单解构，根据此来渲染表单，目前主要是满足公司需求，希望各位大佬可以不吝拓展
05-14
API formSchema: object { "title": "normal", "description": "desc", "fields": [ { "field": "username", "name": "用户名", }, { "field": "password", "name": "密码", }, ] } formDate: object { "username": "ivliu", "password": "123456" } callback: (val: any) => void 回调函数，其中val参数是要提交的值 submitTxt: string 提交按钮的文案 说明 下面介绍每个字段的意义以及取值。 title (string)
从antdPro的SchemaForm学习组件封装思路及一些使用经验分享
weixin_44545357的博客
07-30 1282
最近开发一个全新的项目，由于项目时间比较紧张，选用了开箱即用的来开发表单，引发了一些小小思考，在此记录一下📝～
前端schema表单配置生成方案
逸尘的专栏
01-04 8576
一、背景 表单Form开发，尤其在中台项目中，是FE????的家常便饭，一般需要大量的重复性工作????： • 编写模板 • 编写校验规则 • 表单提交（偶尔联动） 同时，Server也需要编写校验规则。然而，伴随业务变更和前后端开发同步不及时的情况，前后端校验规则可能会存在不一致的问题。所以「前后端共用校验规则」也可在范畴之内。 二、目标 减少重复性工作????：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关。 三、方案选型 1.form-render 2019年10月阿里开源，基于Rea
Vben-admin带搜索框的表格
qq_42404842的博客
07-16 6834
1.index.vue 页面： <template> <BasicTable @register="register"> </BasicTable> </template> 2.注册表格部分： const [register, { reload }] = useTable({ api: getList, // api接口，返回的数据时数组能正确渲染成功 columns, // 数据源，表格头和数据
Angular2使用vscode断点调试ts文件的方法
01-21
VSCode自带debugger工具，管理后台项目使用angular2，试了下调试ts文件十分方便。下面是具体的实现步骤以及踩的坑。当你调试出来后，回头看这个设置还是十分简单的。我使用的是ng-cli创建的项目。后面再补充一般项目的调试，感觉也差不多。 解决了 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” ，参考下面的 我的环境配置 我的环境配置 1. node v7.3.0 2. npm 3.10.10 3. ng >= 1.3 // 这一点非常重要，我一开始的版本低于这个版本，就一直报 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” 4. 在vscod
在Vue组件中使用 TypeScript的方法
11-30
注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。 ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发
在ABP框架中使用BootstrapTable组件的方法
12-11
一、关于ABP ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称，它是一个成熟的开源框架，基于DDD+Repository模式，自带Zero权限和认证模块，避免了从零开始搭建框架的烦恼。关于ABP的框架优势就此打住，因为这样说下去要说三天三夜，脱离文本主题。 关于ABP的入门，博主不想说太多，园子里面tkb至简和阳光铭睿有很多入门级的文章，有兴趣的可以了解下，还是给出它的官网和开源地址。 ABP官方网站：http://www.aspnetboilerplate.com ABP开源项目：https://github.com/aspnetboil
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
12-09
在Winform开发的时候，我们很多时候可以利用表格控件来直接录入数据，不过在Web上较少看到，其实也可以利用dataTable对象处理直接录入表格行数据，这个可以提高数据的录入方便，特别是在一些简单业务的明细数据的时候，看起来会比弹出窗口录入方便一些，也高大上一点。本篇主要介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据。 1、基于表格直接录入数据和Winform的界面回顾 在开始Web界面直接录入表格行数据前，我们先来看看Winform界面的处理情况，如我在流程管理里面，对于具有主从明细的报销业务表的数据处理，采用了下面的界面。 这种明细表单可以直接在表格控件G
angular-schema-form 自动表单生成
amw198811的博客
04-26 776
基本用法 通过bower安装之后，将schemaForm模块载入到模块定义中，fuse中安装第三方包需要在app/core/core.module.js中声明。 然后在controller里面，将schema、form、model属性赋给$scope，schema定义了数据结构，form定义了UI，model绑定了用户的输入。 angular.module('myModule'...
探索高效表单构建：El-Form-Schema
最新发布
gitblog_00035的博客
04-22 304
探索高效表单构建：El-Form-Schema 项目地址:https://gitcode.com/lisiyizu/el-form-schema El-Form-Schema 是一个基于 Vue.js 的强大工具，旨在简化前端开发中复杂表单的设计与管理。借助 JSON Schema 规范，它提供了一种声明式的方式来构建动态、灵活的表单，极大地提升了开发效率和用户体验。 技术分析 El-Form-S...
二、Vben框架自定义BasicTable的form组件
张先森的博客
08-18 5153
Vben框架自定义BasicTable的form组件
关于vben+admin的表单联动编辑回显问题
weixin_44864019的博客
05-27 3071
这周有做一个需求，在测试环境跑的时候发现一个表单的回显问题。 需求背景：一个页面上有列表，通过列表的操作栏里的编辑来打开一个抽屉，抽屉里面是一个form表单。父选择框的options是由接口获得的，通过父选择框的onChange事件，将返回数据的children赋值给子组件的options，来渲染子选择框的options。在新增的时候流程很正常，编辑的时候也是正常的，但是！！！在我刷新页面第一次去编辑回显的时候会出现我将详情数据set给表单之后，子选择框的回显直接是value值，并不是我希望的labe
vue 当父组件挂载时在子组件中调用子组件的方法
08-26
在Vue中，当父组件挂载时在子组件中调用子组件的方法，可以通过使用ref引用子组件的实例，并在父组件中调用子组件的方法来实现。首先，在父组件模板中使用ref属性给子组件添加一个引用名称。然后，在父组件的setup函数中，通过ref()函数创建一个ref对象来引用子组件。接下来，可以在父组件的方法中使用引用名称来调用子组件的方法。 示例代码如下所示： 父组件： ```vue <template> <div class="mt-5"> <Son ref="RefChild"></Son> <div class="btn btn-primary my-2" @click="callChildMethod">点击我调用子组件的方法</div> </div> </template> <script> import { defineComponent, ref } from "vue"; import Son from "../components/Son.vue"; export default defineComponent({ name: "Father", components: { Son, }, setup() { const refChild = ref(); // refChild 要和 Son 组件上的 ref 名称相同 const callChildMethod = () => { refChild.value.sonFn(); // sonFn 是子组件中的方法 }; return { refChild, callChildMethod, }; }, }); </script> ``` 子组件： ```vue <template> <div> <h1>{{ content }}</h1> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const content = ref("我是子组件"); const sonFn = () => { content.value = "我被父组件调用了子组件的方法修改了数据"; }; return { content, sonFn, }; }, }); </script> ``` 在父组件中，我们使用ref属性给子组件添加一个引用名称`RefChild`。然后在父组件的setup函数中创建了一个ref对象`refChild`来引用子组件。最后，在父组件的`callChildMethod`方法中，通过`refChild.value.sonFn()`来调用子组件的方法`sonFn`。 这样，当父组件挂载时，就可以在子组件中调用子组件的方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue里面父组件调用子组件的方法，以vue3为例](https://blog.csdn.net/weixin_43131046/article/details/122606635)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案](https://blog.csdn.net/m0_49714202/article/details/127751239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值