子表单选择器

子表单选择器是一个专门用于在表单设计中动态选择和操作子表单数据的组件。它通过弹窗展示子表单列表，支持单选和多选模式，提供了搜索、分页、表格选择等功能，有助于实现复杂的数据选择和联动场景。

基础使用

获取子表单API

子表单选择器内部的表单实例可以通过 fapi 属性获取，方便您进行数据操作：

function onChange($inject) {
    // 获取子表单选择器组件实例
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 获取子表单API
    const fapi = dataSelectInstance.fapi;

    // 获取当前选中的数据
    const selectedData = dataSelectInstance.list;
    console.log('已选择的数据:', selectedData);

    // 通过fapi操作弹窗内的表单
    if (fapi) {
        const formData = fapi.formData();
        console.log('弹窗表单数据:', formData);
    }
}

通过 fapi，您可以访问弹窗内的表单API，进行数据读取、表单验证等操作。

程序化打开选择器

使用注入的 api.el 方法可以操作子表单选择器，直接调用相关方法打开选择器：

function openDataSelect($inject) {
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    // 打开选择器弹窗
    dataSelectInstance.getDialogEl().open();
}

将 ref_F2vulxvqc841dac 替换为您的子表单选择器组件的ID。

获取已选择的数据

通过组件的 list 属性可以获取当前已选择的数据列表：

function getSelectedData($inject) {
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    const selectedData = dataSelectInstance.list;
    console.log('已选择的数据:', selectedData);

    // 根据 valueKey 和 labelKey 格式化数据
    const formattedData = selectedData.map(item => ({
        value: item[dataSelectInstance.valueKey || 'value'],
        label: item[dataSelectInstance.labelKey || 'label']
    }));
    console.log('格式化后的数据:', formattedData);
}

配置项

子表单选择器提供了丰富的配置选项，您可以通过在设计器中配置属性来自定义选择器的行为和外观。

属性名	类型	默认值	必需	说明
title	String	-	否	对话框标题
placeholder	String	-	否	选择框占位符
multiple	Boolean	-	否	是否多选模式
disabled	Boolean	-	否	是否禁用
multipleLimit	Number	-	否	多选数量限制
valueKey	String	value	否	值字段键名
labelKey	String	label	否	标签字段键名
clearable	Boolean	-	否	是否可清空
searchRule	Object	-	否	搜索表单规则
tableRule	Object	-	否	表格规则
autoLoad	Boolean	-	否	是否自动加载表格数据
modelValue	Object, Array	-	否	双向绑定的值

重要说明：

• searchRule：配置搜索表单的规则，用于在弹窗中显示搜索条件
• tableRule：配置数据表格的规则，用于在弹窗中显示数据列表
• valueKey 和 labelKey：定义数据对象的键名，用于从选择的数据中提取值和标签

事件

子表单选择器提供了丰富的事件，方便您监听选择器的状态变化并执行相应的处理。

事件名	参数	说明
update:modelValue	value	值更新事件，当选择的数据发生变化时触发
change	value	值变化事件，与update:modelValue类似
clear	...args	清空事件，当用户点击清空按钮时触发

事件使用示例

监听选择变化：

function handleChange(value) {
    console.log('选择的数据:', value);
    // 处理选择的数据
    if (Array.isArray(value)) {
        console.log('选择了', value.length, '项');
    } else {
        console.log('单选:', value);
    }
}

监听清空事件：

function handleClear(...args) {
    console.log('已清空选择');
    // 执行清空后的处理逻辑
}

方法

子表单选择器提供了多种方法，方便您进行程序化控制。

方法名	参数	说明	返回值
getTableEl	-	获取表格元素实例	Object
getDialogEl	-	获取对话框元素实例	Object
formChange	-	表单变化处理（内部使用）	-
changeSelectValue	value	改变选择值	-
confirm	-	确认选择	-
tableRowClick	value	表格行点击事件（内部使用）	-
updateValue	-	更新值（内部使用）	-
getFormRule	-	获取表单规则（内部使用）	Array
selectionChange	value	选择变化事件（内部使用）	-
handleClear	...args	处理清空操作（内部使用）	-
handleClick	flag	处理点击事件（内部使用）	-

方法使用示例

程序化打开选择器：

function openSelector($inject) {
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    const dialog = dataSelectInstance.getDialogEl();
    dialog.open();
}

获取表格实例进行操作：

function getTableInstance($inject) {
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    const tableInstance = dataSelectInstance.getTableEl();

    // 获取当前页码
    console.log('当前页码:', tableInstance.getEl().currentPage);

    // 刷新表格数据
    tableInstance.initPage();
}

确认选择：

function confirmSelection($inject) {
    const dataSelectInstance = $inject.api.el('ref_F2vulxvqc841dac');
    dataSelectInstance.confirm();
}

Data

子表单选择器的内部数据属性如下：

数据名	初始值	说明
list	[]	选中的列表数据
visible	false	对话框显示状态
formRule	[]	表单规则
load	debounce function	防抖加载函数
options	Array	格式化选项列表
selectValue	any	当前选择的值
fapi	Object	获取表单API实例

数据说明：

• list：已选择的数据列表，存储了用户选择的数据对象
• visible：对话框的显示状态，控制选择器弹窗的显示和隐藏
• formRule：弹窗内表单的生成规则数组，包含了搜索表单和表格的配置
• load：防抖加载函数，用于在搜索条件变化时延迟加载表格数据
• options：格式化后的选项列表，用于在下拉选择器中显示
• selectValue：当前选择的值，可能是单个值或值数组
• fapi：弹窗内表单的API实例，提供了访问和操作表单的方法