管理字段列表
在表单设计器中,您可以通过 props.field
配置来管理左侧的字段列表。通过拖动字段,您可以快速创建新的组件并初始化组件配置。
数据结构
FieldList
定义了字段列表的结构:
ts
type FieldNode = {
//字段名称
label: string;
//字段的规则模板
rule?: Rule | Rule[];
//生成的组件(拖拽规则的name)
item?: string;
//更新组件或者模板的规则
update?: {
required?: Boolean;
disabled?: Boolean;
info?: string;
title?: string;
props?: Object;
};
//子级字段
children?: FieldNode[];
}
type FieldList = FieldNode[];
注意: item 的优先级高于 rule,如果同时定义,使用 item 生成的组件。
扩展字段列表
下面是一个示例,展示如何定义两个字段组:商品表和用户表。
vue
<template>
<fc-designer ref="designer" :field="field"/>
</template>
<script setup>
const field = [{
label: '商品表',
children: [
{
label: '商品ID',
item: 'input',
update: {
disabled: true
}
},
{
label: '商品名称',
item: 'input',
},
{
label: '商品分类',
rule: {
"type": "select",
"field": "Fyvqm1ef5b5ud9c",
"title": "选择器",
"info": "",
"effect": {
"fetch": ""
},
"$required": false,
"options": [
{
"label": "电子产品",
"value": "电子产品"
},
{
"label": "日用百货",
"value": "日用百货"
},
{
"label": "时尚女装",
"value": "时尚女装"
},
{
"label": "潮牌男装",
"value": "潮牌男装"
}
],
"_fc_id": "id_Flmkm1ef5b5udac",
"name": "ref_Fzvkm1ef5b5udbc",
"display": true,
"hidden": false,
"_fc_drag_tag": "select"
}
},
{
label: '上架时间',
rule: [
{
"type": "datePicker",
"field": "Fip1m14iqwv9ccc",
"title": "日期",
"info": "",
"$required": false,
"props": {
"type": "datetime"
},
"_fc_id": "id_Fg4gm14iqwv9cdc",
"name": "ref_Fba2m14iqwv9cec",
"display": true,
"hidden": false,
"_fc_drag_tag": "datePicker"
}
]
},
]
}, {
label: '用户表',
children: [
{
label: '用户ID',
item: 'input',
update: {
disabled: true
}
},
{
label: '手机号',
rule: {
"type": "input",
"field": "Fif4m1efbeddguc",
"title": "手机号",
"info": "",
"$required": false,
"_fc_id": "id_F3a9m1efbedegvc",
"name": "ref_Festm1efbedegwc",
"display": true,
"hidden": false,
"_fc_drag_tag": "input",
"validate": [
{
"transform": "[[FORM-CREATE-PREFIX-function anonymous(val\n) {\nthis.type = Array.isArray(val) ? 'array' : (typeof val); return val;\n}-FORM-CREATE-SUFFIX]]",
"mode": "pattern",
"trigger": "blur",
"pattern": "^(?:(?:\\+|00)86)?1[3-9]\\d{9}$",
"message": "请输入正确的手机号"
}
]
},
},
{
label: '用户名称',
item: 'input',
},
{
label: '用户备注',
item: 'textarea',
},
{
label: '用户头像',
rule: {
"type": "upload",
"field": "F0gfm1ef9o5mffc",
"title": "用户头像",
"info": "",
"$required": false,
"props": {
"action": "/",
"onSuccess": "[[FORM-CREATE-PREFIX-function anonymous(res,file\n) {\nfile.url = res.data.url;\n}-FORM-CREATE-SUFFIX]]"
},
"_fc_id": "id_Fsokm1ef9o5mfgc",
"name": "ref_Fv5hm1ef9o5mfhc",
"display": true,
"hidden": false,
"_fc_drag_tag": "upload"
}
},
]
}]
</script>
这种结构可以灵活扩展,方便您在低代码设计器中快速管理和定义字段。