FaInputDialogPage 弹窗分页选择器

使用只读输入框打开带分页 FaTable 的选择 Dialog，支持单选、双击确认、清空、标签回显和表格列插槽。

弹窗分页表格选择器

查看代码

Vue

<template>
	<div class="demo-stack">
		<FaInputDialogPage
			v-model="value"
			v-model:label="label"
			:request-api="requestApi"
			row-key="id"
			label-key="name"
			title="选择 Fast 项目"
			placeholder="请选择项目"
			@change="changedData = $event"
		>
			<FaTableColumn prop="name" label="项目" min-width="180" />
			<FaTableColumn prop="owner" label="团队" width="120" />
			<FaTableColumn prop="status" label="状态" width="100" />
		</FaInputDialogPage>
		<span class="demo-value">当前项目：{{ label ?? "未选择" }}（{{ value ?? "—" }}）；change 数据：{{ JSON.stringify(changedData) }}</span>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { PagedInput, PagedResult } from "fast-element-plus";

const value = ref<number | null>(2);
const label = ref<string | null>("Fast.Element.Plus");
const changedData = ref<unknown>();
const rows = [
	{ id: 1, name: "Fast.NET", owner: "SDK 团队", status: "稳定" },
	{ id: 2, name: "Fast.Element.Plus", owner: "前端团队", status: "开发中" },
	{ id: 3, name: "Fast.Admin", owner: "业务团队", status: "稳定" },
];

const requestApi = (_input?: PagedInput): Promise<PagedResult<Record<string, unknown>>> =>
	Promise.resolve({
		pageIndex: 1,
		pageSize: 20,
		totalRows: rows.length,
		rows,
	});
</script>

FaInputDialogPage 完整 API

Props 属性 (9)

属性	来源	说明	类型	默认值
rowKey	Fast 新增	行或节点唯一键。	String / Function	id
modelValue	Fast 新增	v-model 绑定值。	String / Number	—
label	Fast 新增	显示文本或同步标签值。	String	—
placeholder	Fast 新增	占位提示。	String	请选择
disabled	Fast 新增	是否禁用组件或当前选项。	Boolean	false
title	Fast 新增	组件标题文本。	String	—
requestApi	Fast 新增	异步数据请求函数。	Function	—
initParam	Fast 新增	请求初始化参数。	String / Number / Object	—
labelKey	Fast 新增	选中行的标签字段。	String	name

Events 事件（3）

名称	来源	说明	参数 / 类型
update:modelValue	Fast 新增	更新 v-model。	—
update:label	Fast 新增	更新标签绑定值。	—
change	Fast 新增	值或选择发生变化。	—

Slots 插槽（1）

名称	来源	说明	参数 / 类型
default（FaTableColumn）	Fast 新增	声明弹窗选择表格使用的 FaTableColumn。	(FaTableColumn）

Expose 暴露（3）

名称	来源	说明	参数 / 类型
selectionRow	Fast 新增	弹窗分页选择器当前选中的行。	—
open	Fast 新增	执行 Fast 异步打开流程。	—
clear	Fast 新增	清空当前选择值。	—

FaInputDialogPage 实例方法

open 打开

打开选择器弹窗

签名

open(): Promise<void>;

示例

<template>
	<FaInputDialogPage ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaInputDialogPage } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaInputDialogPage>>();
const result = await componentRef.value?.open();
</script>

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	Promise<void>	异步完成后的结果；Promise 拒绝时由调用方处理。

clear 清空

清除选择

签名

clear(): void;

示例

<template>
	<FaInputDialogPage ref="componentRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FaInputDialogPage } from "fast-element-plus";

const componentRef = ref<InstanceType<typeof FaInputDialogPage>>();
componentRef.value?.clear();
</script>

输入

该方法没有输入参数。

返回

返回值	返回值类型	返回值说明
result	void	没有返回值。