组件选项配置规则指南

本文详细介绍了如何为组件（如穿梭框、树形选择器等）配置选项数据，包括普通列表和树形结构两种常见形式。通过内置的 makeOptionsRule 和 makeTreeOptionsRule 方法，开发者可以快速生成标准化的选项配置规则。

普通选项配置

配置步骤

1. 确定接收选项的属性
   查阅组件文档确认接收选项的属性名，如 elTransfer 组件通过 props.data 接收选项。

2. 使用 makeOptionsRule 方法
   该方法用于生成普通选项的配置规则。

代码示例

import uniqueId from '@form-create/utils/lib/unique';
import {makeOptionsRule} from '/path/to/fcDesignerPro/dist/index.es.js';


const label = '穿梭框';
const name = 'elTransfer';


export default {
    // 组件基础配置
    menu: 'main',
    icon: 'icon-transfer',
    label,
    name,
    input: true,
    event: ['change', 'leftCheckChange', 'rightCheckChange'],
    validate: ['array'],


// 默认规则配置
    rule({t}) {
        return {
            type: name,
            field: uniqueId(),
            title: '穿梭框',
            info: '',
            $required: false,
            props: {
                //初始数据
                data: [
                    {label: "选项01", value: "1"},
                    {label: "选项02", value: "2"}, 
                    {label: "选项03", value: "3"}
                ]
            }
        };
    },


// 属性配置
    props(_, {t}) {
        return [
            // 生成选项配置规则
            makeOptionsRule(t, 'props.data', 'label', 'value'),
            {
                type: 'switch',
                title: '是否可搜索',
                field: 'filterable'
            }
        ];
    }
};

数据结构

/**
 * 生成普通选项配置规则
 * @param t 国际化函数
 * @param to 选项数据存放位置（如 'props.data'）
 * @param label 标签字段名（默认 'label'）
 * @param value 值字段名（默认 'value'）
 * @returns 生成的配置规则数组
 */
makeOptionsRule(t: T, to: string, label?: string, value?: string): Rule[];

树形选项配置

配置步骤

1. 确定接收选项的属性
   如 elTreeSelect 组件通过 props.data 接收树形选项。

2. 使用 makeTreeOptionsRule 方法
   专为树形结构选项设计的配置方法。

代码示例

import uniqueId from '@form-create/utils/lib/unique';
import {makeTreeOptionsRule} from '/path/to/fcDesignerPro/dist/index.es.js';


const label = '树形选择';
const name = 'elTreeSelect';


export default {
    // 组件基础配置
    menu: 'main',
    icon: 'icon-tree-select',
    label,
    name,
    input: true,
    event: ['change', 'visibleChange', 'removeTag', 'clear', 'blur', 'focus'],
    validate: ['string', 'number', 'array'],


// 默认规则配置
    rule({t}) {
        return {
            type: name,
            field: uniqueId(),
            title: '树形选择',
            info: '',
            $required: false,
            props: {
                nodeKey: 'value',
                showCheckbox: true,
                //初始数据
                data: [
                    {
                        label: "选项201",
                        value: "1",
                        children: [
                            {label: "选项1-101", value: "2"}
                        ]
                    }
                ]
            }
        };
    },


// 属性配置
    props(_, {t}) {
        return [
            // 生成树形选项配置规则
            makeTreeOptionsRule(t, 'props.data', 'label', 'value'),
            {type: 'switch', title: '多选', field: 'multiple'}
        ];
    }
};

数据结构

/**
 * 生成树形选项配置规则
 * @param t 国际化函数
 * @param to 选项数据存放位置
 * @param label 标签字段名（默认 'label'）
 * @param value 值字段名（默认 'value'）
 * @returns 生成的配置规则数组
 */
makeTreeOptionsRule(t: T, to: string, label?: string, value?: string): Rule[];

注意事项

1. 确保路径 /path/to/fcDesignerPro/dist/index.es.js 已替换为实际路径
2. 字段名参数（label/value）需与实际数据结构保持一致