Component Prefix and Suffix

When generating forms using FormCreate, you can add prefixes and suffixes to components through the prefix and suffix properties in generation rules. These properties allow adding content before or after component input boxes or selection boxes, such as icons, text, or custom HTML elements, to enhance user experience.

Note

Custom prefix and suffix do not support form components

The display position of prefix and suffix varies by component type: inline component suffix displays at the tail, block-level component suffix automatically wraps to a new line.

Types

• prefix: string|VNodeData Set component prefix content, can be a string or VNode data object.
• suffix: string|VNodeData Set component suffix content, can also be a string or VNode data object.

Examples

Text Description

Set prefix and suffix content for input box and date picker components by configuring prefix and suffix properties in component rules.

Custom Components

Use custom components as prefix and suffix for form fields: add button components with loading state to input boxes and date pickers by configuring objects containing type, children, and properties.

Adding Prefix and Suffix Icons to Input Box

In this example, we add a currency symbol as a prefix and a unit as a suffix to the input box component.

const rules = [
    {
        type: 'input',
        field: 'price',
        title: 'Price',
        prefix: '¥',  // Set prefix to RMB symbol
        suffix: 'Yuan',  // Set suffix to unit
        value: ''
    }
];

Using Custom HTML Elements as Prefix and Suffix

You can use custom HTML elements or components as prefix and suffix.

const rules = [
    {
        type: 'input',
        field: 'email',
        title: 'Email Address',
        prefix: {
            tag: 'span',
            children: '@'
        },  // Use custom span element as prefix
        suffix: {
            tag: 'i',
            attrs: { class: 'el-icon-envelope' }  // Use icon as suffix
        },
        value: ''
    }
];

By using the prefix and suffix properties, you can add rich visual elements to form components, providing a better user experience. The flexibility of these properties lets you customize according to specific business needs, achieving complex form designs.