组件的前缀和后缀

在使用 FormCreate 生成表单时，可以通过生成规则中的 prefix 和 suffix 属性为组件添加前缀和后缀。这些属性允许在组件的输入框或选择框之前或之后添加内容，如图标、文本或自定义的 HTML 元素，以增强用户体验。

注意

自定义前缀后缀不支持表单组件

前后缀的显示位置因组件类型而异：行内组件后缀显示在尾部，块级组件后缀会自动换行显示。

类型

• prefix： string|VNodeData 设置组件的前缀内容，可以是字符串或者 VNode 数据对象。
• suffix： string|VNodeData 设置组件的后缀内容，同样可以是字符串或者 VNode 数据对象。

示例

文字描述

为输入框和日期选择器组件设置前缀和后缀内容，通过在组件规则中配置prefix和suffix属性。

自定义组件

使用自定义组件作为表单字段的前缀和后缀：通过配置包含类型、子元素和属性的对象，为输入框和日期选择器添加带有加载状态的按钮组件。

为输入框添加前缀和后缀图标

在这个示例中，我们为输入框组件添加了一个货币符号作为前缀，并添加了一个单位作为后缀。

const rules = [
    {
        type: 'input',
        field: 'price',
        title: '价格',
        prefix: '¥',  // 前缀设置为人民币符号
        suffix: '元',  // 后缀设置为单位
        value: ''
    }
];

使用自定义 HTML 元素作为前缀和后缀

你可以使用自定义的 HTML 元素或组件作为前缀和后缀。

const rules = [
    {
        type: 'input',
        field: 'email',
        title: '邮箱地址',
        prefix: {
            tag: 'span',
            children: '@'
        },  // 使用自定义的 span 元素作为前缀
        suffix: {
            tag: 'i',
            attrs: { class: 'el-icon-envelope' }  // 使用图标作为后缀
        },
        value: ''
    }
];

通过使用 prefix 和 suffix 属性，您可以为表单组件添加丰富的视觉元素，提供更好的用户体验。这些属性的灵活性允许您根据具体的业务需求进行定制，从而实现复杂的表单设计。