管理字段列表

在表单设计器中，您可以通过 props.field 配置来管理左侧的字段列表。通过拖动字段，您可以快速创建新的组件并初始化组件配置。

数据结构

FieldList 定义了字段列表的结构：

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 生成的组件。

扩展字段列表

下面是一个示例，展示如何定义两个字段组：商品表和用户表。

<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>

这种结构可以灵活扩展，方便您在低代码设计器中快速管理和定义字段。