Manage Field List

Manage the field list on the left in the form designer using props.field. Drag fields to quickly create new components and initialize their configurations.

This feature is only available in the Pro version of the designer. Learn more about Pro version features

Data Structure

FieldList defines the structure of the field list:

type FieldNode = {
    // Field name
    field: string;
    // Field label
    label: string;
    // Field rule template
    rule?: Rule | Rule[];
    // Generated component (drag rule name)
    item?: string;
    // Update component or template rules
    update?: {
        required?: Boolean;
        disabled?: Boolean;
        info?: string;
        title?: string;
        props?: Object;
    };
    // Child fields
    children?: FieldNode[];
}

type FieldList = FieldNode[];

Note: item has higher priority than rule. If both are defined, the component generated by item will be used.

Extend Field List

Example showing how to define two field groups: Product Table and User Table:

<template>
    <fc-designer ref="designer" :field="field"/>
</template>
<script setup>
    const field = [{
        label: 'Product Table',
        children: [
            {
                label: 'Product ID',
                item: 'input',
                field: 'goods_id',
                update: {
                    disabled: true
                }
            },
            {
                label: 'Product Name',
                field: 'goods_name',
                item: 'input',
            },
            {
                label: 'Product Category',
                field: 'goods_cate',
                rule: {
                    "type": "select",
                    "field": "Fyvqm1ef5b5ud9c",
                    "title": "Selector",
                    "info": "",
                    "effect": {
                        "fetch": ""
                    },
                    "$required": false,
                    "options": [
                        {
                            "label": "Electronics",
                            "value": "Electronics"
                        },
                        {
                            "label": "Daily Necessities",
                            "value": "Daily Necessities"
                        },
                        {
                            "label": "Women's Fashion",
                            "value": "Women's Fashion"
                        },
                        {
                            "label": "Men's Fashion",
                            "value": "Men's Fashion"
                        }
                    ],
                    "_fc_id": "id_Flmkm1ef5b5udac",
                    "name": "ref_Fzvkm1ef5b5udbc",
                    "display": true,
                    "hidden": false,
                    "_fc_drag_tag": "select"
                }
            },
            {
                label: 'Listing Time',
                field: 'goods_update_time',
                rule: [
                    {
                        "type": "datePicker",
                        "field": "Fip1m14iqwv9ccc",
                        "title": "Date",
                        "info": "",
                        "$required": false,
                        "props": {
                            "type": "datetime"
                        },
                        "_fc_id": "id_Fg4gm14iqwv9cdc",
                        "name": "ref_Fba2m14iqwv9cec",
                        "display": true,
                        "hidden": false,
                        "_fc_drag_tag": "datePicker"
                    }
                ]
            },
        ]
    }, {
        label: 'User Table',
        children: [
            {
                label: 'User ID',
                field: 'user_id',
                item: 'input',
                update: {
                    disabled: true
                }
            },
            {
                label: 'Phone Number',
                field: 'user_phone',
                rule: {
                    "type": "input",
                    "field": "Fif4m1efbeddguc",
                    "title": "Phone Number",
                    "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": "Please enter a valid phone number"
                        }
                    ]
                },
            },
            {
                label: 'User Name',
                field: 'user_name',
                item: 'input',
            },
            {
                label: 'User Notes',
                field: 'user_mark',
                item: 'textarea',
            },
            {
                label: 'User Avatar',
                field: 'user_avatar',
                rule: {
                    "type": "upload",
                    "field": "F0gfm1ef9o5mffc",
                    "title": "User Avatar",
                    "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>

This structure can be flexibly extended, making it convenient to quickly manage and define fields in the low-code designer.