低代码表单 FormCreate 中组件的生成规则详解

news2024/11/17 23:32:56

在低代码表单组件 FormCreate 中，组件生成规则定义了如何通过 JSON 配置生成表单组件。了解和使用这些规则，您可以灵活地创建和控制各种表单元素。

源码地址: Github | Gitee

数据结构

type Rule = {
    // 生成组件的名称，例如 'input', 'select' 等
    type: string;
    // 表单字段名称，用于数据绑定
    field?: string;
    // 组件的唯一标识符
    name?: string;
    // 字段标签
    title?: string;
    // 组件的提示信息
    info?: string;
    // 组件的默认值
    value?: any;
    // 是否原样生成组件,不嵌套的`FormItem`中
    native?: boolean;
    // 组件的属性配置
    props?: Object;
    // 组件的内联样式
    style?: string | Object;
    // 组件的 class 样式类
    class?: string | Array<string>;
    // 设置组件的 id
    id?: string | Array<string>;
    // 组件事件处理函数
    on?: { [key: string]: Function | Function[] };
    // 插槽名，用于组件嵌套
    slot?: string;
    // 组件的 key，通常用于列表渲染时的唯一标识
    key?: string;
    // 是否必填
    $required?: boolean | string;
    // 组件的选项列表，适用于 `radio`, `select`, `checkbox` 等组件
    options?: Array<any>;
    // 选项插入的目标属性，默认插入到 `props.data` 中
    optionsTo?: string;
    // 是否原样生成组件，而不使用 FormItem 包裹
    native?: boolean;
    // 是否隐藏组件（不会渲染 DOM 元素）
    hidden?: boolean;
    // 是否显示组件（有 DOM 渲染，但可能不可见）
    display?: boolean;
    // 是否开启事件注入
    inject?: boolean|Object;
    // 组件的验证规则
    validate?: Object[];
    // 子组件列表，用于嵌套子组件
    children?: Rule[];
    // 组件的联动控制，控制其他组件的显示与否
    control?: Array;
    // FormItem 的配置
    wrap?: Object;
    // 设置组件的布局规则
    col?: Object;
    // 自定义属性，如远程数据获取等
    effect?: {
        // 加载远程数据
        fetch?: Object,
    };
    // 设置组件的前缀内容，通常用于在输入框前显示图标或文本
    prefix?: string|Rule;
    // 设置组件的后缀内容，通常用于在输入框后显示图标或文本
    suffix?: string|Rule;
    // 设置组件的自定义指令
    directives?: object;
    // 是否缓存组件，只触发一次渲染
    cache?: boolean;
    // 设置回调函数，用于动态更新组件的内容
    update?: (value:any, api:Api, origin:{
        // init初始化触发,link关联触发,value变化触发
        origin: 'change' | 'init' | 'link';
        // 关联触发的字段名
        linkField?: string;
    }) => bool|undefined;
    // 配置哪些字段变化时会触发当前组件的 `update` 回调
    link?: string[];
    // 设置`props`中需要双向绑定属性的名称
    sync?: string[];
    // 使用`emit`方式监听的事件名
    emit?: string[];
    // 自定义组件 `emit` 事件的前缀，默认是组件的 `field` 字段
    emitPrefix?: string;
    // 定义用于当前规则渲染的自定义组件
    component?: boolean;
    // 其他扩展属性
    [key: string]: any;
}

基础配置

type

  • 类型: string
  • 说明: 设置生成的组件类型名称，例如 ‘input’, ‘select’ 等。它支持配置标准表单组件、自定义 Vue 组件以及 HTML 标签。
  • 示例:
    { type: 'input' }

field

  • 类型: string
  • 说明: 表单组件的字段名称，通常用于数据绑定。每个表单项的 field 都应该是唯一的，用于将组件的值与表单数据进行关联。
  • 示例:
    { type: 'input', field: 'username' }

title

  • 类型: string|Rule
  • 说明: 字段的标题，通常显示为表单标签。
  • 示例:
    { type: 'input', field: 'username', title: '用户名' }

name

  • 类型: string
  • 说明: 设置组件的别名
  • 示例:
    { type: 'input', field: 'username', name: 'user-input' }

value

  • 类型: any
  • 说明: 组件的默认值。
  • 示例:
    { type: 'input', field: 'username', value: '默认用户名' }

info

  • 类型: string|Rule
  • 说明: 设置组件的提示信息配置说明
  • 示例:
    { type: 'input', field: 'username', info: '请输入您的用户名' }

native

  • 类型: boolean
  • 说明: 是否原样生成组件,不嵌套的FormItem中。
  • 示例:
    { type: 'input', field: 'username', native: true }

hidden

  • 类型: bool
  • 说明: 是否隐藏组件（不会渲染 DOM 元素）。
  • 示例:
    { type: 'input', field: 'username', hidden: true }

display

  • 类型: bool
  • 说明: 是否显示组件（有 DOM 渲染，但可能不可见）。
  • 示例:
    { type: 'input', field: 'username', display: false }

prefix

  • 类型: string|Rule
  • 说明: 设置组件的前缀内容，通常用于在输入框前显示图标或文本配置说明
  • 示例:
    { type: 'input', field: 'username', prefix: '用户:' }

suffix

  • 类型: string|Rule
  • 说明: 设置组件的后缀内容，通常用于在输入框后显示图标或文本配置说明
  • 示例:
    { type: 'input', field: 'username', suffix: '@domain.com' }

通用配置

props

  • 参数: object
  • 说明: 设置组件的 props 属性，用于控制组件的行为。props 的配置取决于具体组件的属性，例如 input 组件的 placeholder、maxlength 等。
  • 示例:
    { type: 'input', field: 'username', props: { placeholder: '请输入用户名' } }

class

  • 参数: object|string|Array
  • 说明: 设置组件的 class，用于自定义样式。
  • 示例:
    { type: 'input', field: 'username', class: 'custom-input' }

id

  • 参数: string
  • 说明: 设置组件的id
  • 示例:
    { type: 'input', field: 'username', id: 'username-input' }

style

  • 参数: object|string
  • 说明: 设置组件的内联样式。
  • 示例:
    { type: 'input', field: 'username', style: 'color:red;' }

on

  • 参数: object
  • 说明: 设置组件的事件监听器。例如 input 事件、change 事件等。
  • 示例:
    { type: 'input', field: 'username', on: { change: (val) => console.log(val) } }

directives

  • 参数: object
  • 说明: 设置组件的自定义指令。
  • 示例:
    { type: 'input', field: 'username', directives: {focus: {value: true}}}

slot

  • 参数: string
  • 说明: 设置组件的插槽名称，适用于嵌套组件。
  • 示例:
    { type: 'input', field: 'username', slot: 'append' }

扩展配置

cache

  • 类型: bool
  • 说明: 是否缓存组件，只触发一次渲染。设置为 true 时，组件只会渲染一次，不会因为数据变化而重新渲染。
  • 示例:
    { type: 'input', field: 'username', cache: true }

component

  • 类型: object|Component
  • 说明: 定义用于当前规则渲染的自定义组件。可以在规则中指定自定义组件，而无需全局注册配置说明
  • 示例:
    { type: 'input', field: 'username', component: MyCustomComponent }

validate

  • 类型: Array
  • 说明: 设置表单组件的验证规则。可以指定多个验证规则，来确保表单输入的正确性配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  validate: [
    { required: true, message: '用户名不能为空', trigger: 'blur' }
  ]
}

options

  • 类型: Array|Function
  • 说明: 设置radio,select,checkbox等组件options选择项,可以通过optionsTo自定义数据插入的位置。
  • 示例:
    {
  type: 'select',
  field: 'city',
  options: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' }
  ]
}

optionsTo

  • 类型: string
  • 说明: 设置options配置项插入的位置. 例如props.data。
  • 示例:
    {
  type: 'select',
  field: 'city',
  optionsTo: 'props.options',
  options: [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' }
  ]
}

inject

  • 类型: bool|Object
  • 说明: 是否开启事件注入配置说明
  • 示例:
    { type: 'input', field: 'username', inject: { customData: '123' } }

effect

  • 类型: object
  • 说明: 置自定义属性，用于扩展组件的功能或与外部系统交互配置说明
  • 示例:
    { type: 'input', field: 'username', effect: { fetch: { url: '/api/getUsername' } } }

update

  • 类型:
type Origin = {
    //init初始化触发,link关联触发,value变化触发
    origin: 'change' | 'init' | 'link';
    //关联触发的字段名
    linkField?: string;
};
type update = (value:any, api:Api, origin:Origin) => bool|undefined;
  • 说明: 设置 update 回调函数，用于动态更新组件的内容。配合 link 配置项使用时，可以根据其他字段的变化来动态更新当前组件配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  link: ['role'],
  update: (value, api, origin) => {
    if (origin.field === 'role' && value === 'admin') {
      api.setValue('username', 'admin_user');
    }
  }
}

link

  • 类型: Array
  • 说明: 配置哪些字段变化时会触发当前组件的 update 回调。适用于需要联动更新的场景配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  link: ['role'],
  update: (value, api, origin) => {
    if (origin.field === 'role' && value === 'admin') {
      api.setValue('username', 'admin_user');
    }
  }
}

col

  • 类型: object
  • 说明: 设置组件的布局规则，通常用于栅格系统中。例如，可以指定 span 来控制组件的宽度配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  col: { span: 12 }
}

wrap

  • 类型: object
  • 说明: 设置组件的 FormItem 配置，控制 FormItem 的行为和样式配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  wrap: { labelWidth: '100px' }
}

sync

  • 类型: Array
  • 说明: 配置prop.sync,设置props中需要双向绑定属性的名称。
  • 示例:
    {
  type: 'input',
  field: 'username',
  props: {
    value:'abc'
  },
  sync: ['value']
}

control

  • 类型: object
  • 说明: 控制其他组件的显示与隐藏。适用于表单联动的场景配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  control: [
    {
      handle: (val) => val === 'admin',
      rule: [{ type: 'input', field: 'admin_code', title: 'Admin Code' }]
    }
  ]
}

children

  • 类型: Array<rule|string|maker>
  • 说明: 设置父级组件的插槽内容，默认为 default。可配合 slot 配置项使用插槽功能说明
  • 示例:
    [{
"type": "fcRow",
"children": [
  {
    "type": "col",
    "props": {
      "span": 12
    },
    "children": [
      {
        "type": "input",
        "field": "Fjz0m0ao06wrdec",
        "title": "输入框",
        "info": "",
        "$required": false,
      }
    ],
  },
  {
    "type": "col",
    "props": {
      "span": 12
    },
    "children": [
      {
        "type": "input",
        "field": "Fyzbm0ao07wddhc",
        "title": "输入框",
        "info": "",
        "$required": false,
      }
    ],
  }
],
}]

emit

  • 类型: Array

  • 说明: 使用emit方式监听的事件名,可与emitPrefix参数配合配置说明

  • 示例:

    //以下三种方式效果相同
const rules = [{//emit 方式触发 change 事件
    field:'goods_name',
    emit:['change']
},{// 自定义 emit 事件前缀,默认为 field 字段
    field:'goods_info',
    emit:['change'],
    emitPrefix:'gi'
},{// 直接在规则写回调方法
     field:'goods_tag',
     on:{
         change:function() {
           //TODO
         }
     }
 }]

    通过FormCreate组件的事件监听

<form-create :rule="rules" @goods-name-change="change" @gi-change="change"></form-create>

emitPrefix

  • 类型: object
  • 说明: 自定义组件 emit 事件的前缀，默认是组件的 field 字段配置说明
  • 示例:
    {
  type: 'input',
  field: 'username',
  emitPrefix: 'user'
}

通过这些规则，您可以灵活地定义和生成各种表单组件，满足不同业务需求。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2087804.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【大揭秘】如何利用AI轻松解决工作难题？

【大揭秘】如何利用AI轻松解决工作难题？

在这个信息爆炸的时代&#xff0c;工作中的难题似乎层出不穷。无论是项目管理、数据分析&#xff0c;还是客户沟通&#xff0c;繁杂的任务常常让我们感到无从下手。然而&#xff0c;随着人工智能&#xff08;AI&#xff09;的迅猛发展&#xff0c;越来越多的职场人士开始将其作…
阅读更多...
uniapp自定义头部导航栏布局（优化版）

uniapp自定义头部导航栏布局（优化版）

H5与微信小程序效果图 普通版 //utils/system.js//获取系统信息const systemInfo uni.getSystemInfoSync();//获取状态栏的高度&#xff0c;H5状态栏的高度默认是0export const getStatusBarHeight()>systemInfo.statusBarHeight || 0;//获取标题栏高度export const getTi…
阅读更多...
HTB-Campfire-1

HTB-Campfire-1

1、今天打一台htb安全分析的靶机&#xff0c;首先我们先看一下这中类型题的框架&#xff0c;首先是题目指引描述&#xff0c;之后有7个问题&#xff0c;这些问题会一步一步指引我们去溯源分析&#xff0c;话不多说开始我们今天的练习。 题目描述&#xff1a; Alonzo 在他的电脑…
阅读更多...
Redis高可用方案：使用Keepalived实现主备双活

Redis高可用方案：使用Keepalived实现主备双活

注意&#xff1a;请确保已经安装Redis和keepalived&#xff0c;本文不在介绍如何安装。 1、使用版本说明 Redis版本&#xff1a;5.0.2 Keepalived版本&#xff1a;1.3.5 Linux 版本&#xff1a;Centos7.9 查看Redis版本&#xff1a; /usr/local/redis/bin/redis-cli -v查…
阅读更多...
Mac系统搭建Sonic总结

Mac系统搭建Sonic总结

1.参考文档 https://sonic-cloud.cn/ https://mp.weixin.qq.com/s/PBnmgsmpXsQxtHU9g_05fA 测试设备&#xff1a;建议使用模拟器 Android&#xff1a;Android Studio自带模拟器 iOS&#xff1a;Xcode自带模拟器 2.所遇问题 1)拉取mysql5.7提示docker: no matching manif…
阅读更多...
基于jstat 进行JVM监控

基于jstat 进行JVM监控

文章目录 引言I jstat 统计信息工具JVM 堆内存布局命令格式元数据空间统计堆内存统计JVM编译方法统计编译统计类加载统计II JVM调优基本概念: 应用程序的响应时间（RT）和吞吐量（QPS）JVM调优原理调优思路调优方法JVM调优技巧建议III 基于jstat 分析垃圾回收情况，进行JVM调优…
阅读更多...
基于RS232的VGA显示

基于RS232的VGA显示

前言 基于ROM的VGA显示缺点&#xff1a;需要将图片转化为mif文件&#xff0c;使用的RAM是FPGA内部RAM模拟出来的&#xff0c;占用资源大切换显示图片需要重新转化&#xff0c;对ROM进行写入&#xff0c;使用极不方便&#xff0c;因此这里采用RS232进行VGA显示。 正文 一、基于…
阅读更多...
跨境电商静态IP选择：机房IP还是住宅IP？

跨境电商静态IP选择：机房IP还是住宅IP？

在跨境电商日益繁荣的今天&#xff0c;选择合适的静态IP代理对于网店的成功至关重要。代理IP不仅影响着店铺的网络连接速度和稳定性&#xff0c;还直接关系到店铺的安全性和防封能力。对于跨境网店而言&#xff0c;有静态机房IP和静态住宅IP两种选择。那么&#xff0c;究竟哪种…
阅读更多...
病理切片染色标准化以及虚拟染色的系统总结｜专题总结·24-08-30

病理切片染色标准化以及虚拟染色的系统总结｜专题总结·24-08-30

小罗碎碎念 本期推文主题&#xff1a;虚拟染色及染色标准化在病理AI中的应用 昨晚1群在讨论虚拟染色和染色标准化&#xff0c;2群在讨论病理基础模型&#xff0c;二者恰好互补了&#xff0c;哈哈。 染色标准化的文章大致分为两种类型——一种是专门研究标准化&#xff0c;还有…
阅读更多...
大模型Prompt提示设计简介(1)

大模型Prompt提示设计简介(1)

提示设计是一门艺术&#xff0c;它涉及到精心构思的语句&#xff0c;旨在从语言模型中激发出我们渴望得到的回复。编写一个结构精巧、引人入胜的提示&#xff0c;是确保我们从语言模型那里获得既准确又高质量的答案的关键步骤。在这篇文章中&#xff0c;我们将深入探讨一些基本…
阅读更多...
SQL 注入之 sqlmap 实战

SQL 注入之 sqlmap 实战

在网络安全领域&#xff0c;SQL 注入攻击一直是一个严重的威胁。为了检测和利用 SQL 注入漏洞&#xff0c;安全人员通常会使用各种工具&#xff0c;其中 sqlmap 是一款非常强大且广泛使用的开源 SQL 注入工具。本文将详细介绍 sqlmap 的实战用法。 一、sqlmap 简介 sqlmap 是一…
阅读更多...
Nat Commun系列｜如何像搭积木一样去搭建你自己的病理AI模型框架｜专题总结·24-08-30

Nat Commun系列｜如何像搭积木一样去搭建你自己的病理AI模型框架｜专题总结·24-08-30

小罗碎碎念 前情铺垫 今天的第一篇推文更偏向理论知识&#xff0c;分享了多篇综述&#xff0c;帮助大家快速了解病理切片染色标准化和虚拟染色的内容。 那么这期推文则是补充第一篇推文没有涉及的部分——染色标准化如何作为预处理流程出现在整体的框架中——准备了三篇Nature…
阅读更多...
【中仕公考是骗子吗】公务员联考是什么意思?

【中仕公考是骗子吗】公务员联考是什么意思?

公务员联考是指由多个省份在同一时间举行招录考试&#xff0c;并且这些省份在考试内容上保持较高的一致性。参与联考的省份往往采用同一套或相近的试卷&#xff0c;在具体的题量、难度或题型分布上可能会根据各自情况进行调整&#xff0c;同时可能加入一些具有本省特色的元素。…
阅读更多...
基于web旅游信息平台的设计与实现

基于web旅游信息平台的设计与实现

三、系统分析 &#xff08;一&#xff09;识别参与者 对于平台功能需求的分析&#xff0c;我们定位了四种参与者&#xff1a;普通用户、注册用户、企业级用户、网站维护人员。现对参与者描述如下&#xff1a; &#xff08;1&#xff09;普通用户 描述&#xff1a;可以注册成…
阅读更多...
安全帽佩戴监测摄像机

安全帽佩戴监测摄像机

安全帽是工业生产中必不可少的安全防护装备&#xff0c;能有效保护工人头部免受意外伤害。然而&#xff0c;管理人员往往难以监督工人是否正确佩戴安全帽&#xff0c;这可能导致一些潜在的安全隐患。为了解决这一问题&#xff0c;一种新型的安全帽佩戴监测摄像机 应运而生。 这…
阅读更多...
python基础（13魔法方法介绍）

python基础（13魔法方法介绍）

python系列文章目录 python基础&#xff08;01变量&数据类型&运算符&#xff09; python基础&#xff08;02序列共性&#xff09; python基础(03列表和元组) python基础&#xff08;04字符串&字典&#xff09; python基础&#xff08;05集合set&#xff09; pytho…
阅读更多...
docker Desktop报错 error pulling image configuration 处理

docker Desktop报错 error pulling image configuration 处理

问题描述 在 docker 拉数据 出现以下错误 error pulling image configurarion&#xff1a; 这个问题 主要是 可能应该某些原因不能网络无法连上镜像 原因分析&#xff1a; 1。 2024年 5月以后 国内很多IP都 。。。懂的都懂&#xff0c;很多 VPN 也是。。。 懂的都懂&#x…
阅读更多...
Edge资源占用优化：调整浏览器设置与关闭自动更新检查

Edge资源占用优化：调整浏览器设置与关闭自动更新检查

最近&#xff0c;作者在学习过程中&#xff0c;打开任务管理器的时候注意到&#xff0c;即使没有打开浏览器&#xff0c;edge依然有着内存占用较高的情况&#xff1a; 于是就在网上收集了一些后台调优的方法&#xff0c;如果各位朋友有更多优化浏览器资源占用的方法&#xff0c…
阅读更多...
ansible自动化运维项目详细讲解

ansible自动化运维项目详细讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; Ansible 是一个开源的自动化工具&#xff0c;主要用于配置管理、应用部署、任务自动化和IT编排。在实际的运维项目中&#xff0c;Ansible可以帮助运维工程师以一致、可重复和可靠的方式管理大量服务器和服务…
阅读更多...
论文翻译：Scaling Instruction-Finetuned Language Models

论文翻译：Scaling Instruction-Finetuned Language Models

Scaling Instruction-Finetuned Language Models https://www.jmlr.org/papers/volume25/23-0870/23-0870.pdf 指令微调语言模型 文章目录 指令微调语言模型摘要1. 引言2. Flan微调2.1 微调数据2.2 微调过程2.3 评估协议 3. 扩展到5400亿参数和1836个任务4. 带有思维链注释的微…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023