FaInputDialogPage

A readonly input opens a selection dialog containing a paginated FaTable. Supports single selection, double-click confirmation, clearing, selected labels and table-column slots.

Input Dialog Page

View code

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 Complete API

Props (9)

Property	Source	Description	Type	Default
rowKey	Fast addition	Unique row or node key.	String / Function	id
modelValue	Fast addition	v-model value.	String / Number	—
label	Fast addition	Display text or synchronized label.	String	—
placeholder	Fast addition	Placeholder.	String	请选择
disabled	Fast addition	Disable the component or current option.	Boolean	false
title	Fast addition	Component title.	String	—
requestApi	Fast addition	Asynchronous data-request function.	Function	—
initParam	Fast addition	Initial request parameters.	String / Number / Object	—
labelKey	Fast addition	Label field of the selected row.	String	name

Events（3）

Name	Source	Description	Parameters / type
update:modelValue	Fast addition	Updates v-model.	—
update:label	Fast addition	Updates the label model.	—
change	Fast addition	Value or selection changes.	—

Slots（1）

Name	Source	Description	Parameters / type
default（FaTableColumn）	Fast addition	FaTableColumn declarations for the dialog selector's table.	(FaTableColumn）

Expose（3）

Name	Source	Description	Parameters / type
selectionRow	Fast addition	Currently selected dialog-page rows.	—
open	Fast addition	Runs the Fast asynchronous opening flow.	—
clear	Fast addition	Clears the current selected value.	—

FaInputDialogPage instance methods

open Open

Opens the selector dialog.

Signature

open(): Promise<void>;

Example

<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>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	Promise<void>	Asynchronous result; callers handle Promise rejection.

clear Clear

Clears the selection.

Signature

clear(): void;

Example

<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>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.