FaTable

Adds search forms, pagination, remote requests, column settings, single/multiple selection, tree data, loading and business slots to ElTable. Height follows the container and supplied table height, without an additional mobile minimum height. Container changes synchronize width and height, but automatic column widths are recalculated only when the width changes, so a mobile keyboard height change does not interrupt input. Card borders use the Element Plus theme.

Row data types

DefaultRow is the public default row type and permits fields not declared in advance. Extend it for known data structures and use FaTableColumnCtx<T> and PagedResult<T> for precise column and pagination types.

import type { DefaultRow, FaTableColumnCtx, PagedResult } from "fast-element-plus";

interface UserRow extends DefaultRow {
	id: number;
	name: string;
}

const columns: FaTableColumnCtx<UserRow>[] = [{ prop: "name", label: "Name" }];

const result: PagedResult<UserRow> = {
	rows: [{ id: 1, name: "Fast" }],
	totalRows: 1,
};

Basic

View code

Vue

<template>
	<FaTable :data="rows" :pagination="false" :tool-btn="false" hide-search-time>
		<FaTableColumn prop="name" label="项目" min-width="180" copy />
		<FaTableColumn prop="owner" label="负责人" width="120" />
		<FaTableColumn prop="status" label="状态" width="100" tag :enum="statusOptions" />
		<FaTableColumn prop="createdTime" label="创建时间" type="dateTime" width="180" />
	</FaTable>
</template>

<script setup lang="ts">
import type { FaTableEnumColumnCtx } from "fast-element-plus";

const rows = [
	{ id: 1, name: "Fast Admin", status: 1, owner: "小方", createdTime: "2026-08-20 09:30:00" },
	{ id: 2, name: "Fast Element Plus", status: 1, owner: "Fast 团队", createdTime: "2026-08-22 14:10:00" },
	{ id: 3, name: "Fast.NET", status: 0, owner: "SDK 团队", createdTime: "2026-08-25 18:20:00" },
];

const statusOptions: FaTableEnumColumnCtx[] = [
	{ label: "停用", value: 0, type: "danger" },
	{ label: "启用", value: 1, type: "success" },
];
</script>

Remote Search

View code

Vue

<template>
	<FaTable :request-api="requestApi" :columns="columns" column-setting-btn />
</template>

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

const statuses: FaTableEnumColumnCtx[] = [
	{ label: "停用", value: 0, type: "danger" },
	{ label: "启用", value: 1, type: "success" },
];
const allRows = Array.from({ length: 57 }, (_, index) => ({
	id: index + 1,
	name: `业务模块 ${String(index + 1).padStart(2, "0")}`,
	owner: ["平台组", "业务组", "SDK 组"][index % 3],
	status: index % 4 === 0 ? 0 : 1,
	createdTime: `2026-08-${String((index % 26) + 1).padStart(2, "0")} 10:30:00`,
}));
const columns: FaTableColumnCtx[] = [
	{ prop: "name", label: "模块名称", minWidth: 180, copy: true, search: { el: "el-input", order: 3 } },
	{ prop: "owner", label: "负责人", width: 120, search: { el: "el-input", order: 2 } },
	{ prop: "status", label: "状态", width: 100, tag: true, enum: statuses, search: { el: "el-select", order: 1 } },
	{ prop: "createdTime", label: "创建时间", type: "dateTime", width: 180 },
];

const requestApi = async (input?: PagedInput): Promise<PagedResult<Record<string, unknown>>> => {
	await new Promise<void>((resolve) => {
		window.setTimeout(resolve, 300);
	});
	let result = [...allRows];
	for (const key of ["name", "owner", "status"] satisfies Array<keyof (typeof allRows)[number]>) {
		const value: unknown = input?.[key];
		if (value === undefined || value === null || value === "") continue;
		if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") continue;
		result = result.filter((row) => String(row[key]).includes(String(value)));
	}
	const pageIndex = input?.pageIndex ?? 1;
	const pageSize = input?.pageSize ?? 20;
	return {
		pageIndex,
		pageSize,
		totalRows: result.length,
		rows: result.slice((pageIndex - 1) * pageSize, pageIndex * pageSize),
	};
};
</script>

Selection

View code

Vue

<template>
	<div class="demo-stack">
		<FaTable
			:data="rows"
			:pagination="false"
			:tool-btn="false"
			hide-search-time
			single
			row-click-selection
			:row-selectable="(row) => !row['locked']"
			@selection-change="selectedNames = $event.map((item) => String(item['name']))"
		>
			<FaTableColumn prop="name" label="名称" min-width="180" />
			<FaTableColumn prop="locked" label="是否锁定" width="120">
				<template #default="{ row }"
					><ElTag :type="row['locked'] ? 'danger' : 'success'">{{ row["locked"] ? "锁定" : "可选" }}</ElTag></template
				>
			</FaTableColumn>
		</FaTable>
		<span class="demo-value">当前单选：{{ selectedNames.join("、") || "未选择" }}</span>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const selectedNames = ref<string[]>([]);
const rows = [
	{ id: 1, name: "可选择记录", locked: false },
	{ id: 2, name: "锁定记录", locked: true },
	{ id: 3, name: "点击整行选择", locked: false },
];
</script>

Tree Table

View code

Vue

<template>
	<FaTable :data="rows" default-expand-all :pagination="false" :tool-btn="false" hide-search-time>
		<FaTableColumn prop="name" label="模块" min-width="220" />
		<FaTableColumn prop="owner" label="负责团队" min-width="160" />
	</FaTable>
</template>

<script setup lang="ts">
const rows = [
	{
		id: 1,
		name: "组件",
		owner: "前端团队",
		children: [
			{ id: 11, name: "表单组件", owner: "表单小组" },
			{ id: 12, name: "表格组件", owner: "数据小组" },
		],
	},
	{
		id: 2,
		name: "SDK",
		owner: "平台团队",
		children: [{ id: 21, name: "Fast.NET", owner: "SDK 小组" }],
	},
];
</script>

Native Element Plus tree tables need only row-key and children data. Leave tree-data unset; Fast treeData flattens grouped children into ordinary rows.

Expandable Rows

View code

Vue

<template>
	<div class="demo-stack">
		<FaTable :data="rows" :pagination="false" :tool-btn="false" hide-search-time @expand-change="handleExpand">
			<FaTableColumn type="expand" width="48">
				<template #default="{ row }">
					<div style="padding: 12px 24px">
						<strong>{{ row["name"] }}</strong>
						<p style="margin: 6px 0 0">{{ row["description"] }}</p>
					</div>
				</template>
			</FaTableColumn>
			<FaTableColumn prop="name" label="项目" min-width="200" />
			<FaTableColumn prop="owner" label="负责团队" min-width="140" />
		</FaTable>
		<span class="demo-value">已展开：{{ expandedNames.join("、") || "无" }}</span>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const expandedNames = ref<string[]>([]);
const rows = [
	{ id: 1, name: "Fast.Element.Plus", owner: "Fast 团队", description: "面向团队编码习惯封装的 Element Plus 业务组件库。" },
	{ id: 2, name: "Fast.NET", owner: "SDK 团队", description: "Fast 系列 .NET SDK 基础能力。" },
	{ id: 3, name: "Fast.Admin", owner: "平台团队", description: "后台管理与权限业务应用。" },
];

const handleExpand = (row: Record<string, unknown>, expanded: boolean | Record<string, unknown>[]): void => {
	const name = String(row["name"]);
	if (Array.isArray(expanded)) {
		expandedNames.value = expanded.map((item) => String(item["name"]));
	} else if (expanded) {
		expandedNames.value = [...new Set([...expandedNames.value, name])];
	} else {
		expandedNames.value = expandedNames.value.filter((item) => item !== name);
	}
};
</script>

Sort Filter Fixed

View code

Vue

<template>
	<FaTable :data="rows" :pagination="false" :tool-btn="false" height="320" hide-search-time border @sort-change="handleSort">
		<FaTableColumn prop="name" label="名称" min-width="230" fixed show-overflow-tooltip />
		<FaTableColumn prop="owner" label="负责人" width="110" />
		<FaTableColumn
			prop="status"
			label="状态筛选"
			width="130"
			:filters="[
				{ text: '进行中', value: '进行中' },
				{ text: '已完成', value: '已完成' },
				{ text: '已暂停', value: '已暂停' },
			]"
			:filter-method="filterStatus"
		/>
		<FaTableColumn prop="visits" label="访问量排序" width="140" sortable align="right" />
		<FaTableColumn label="固定操作" width="110" fixed="right">
			<template #default="{ row }"
				><ElButton link type="primary">查看 {{ row["id"] }}</ElButton></template
			>
		</FaTableColumn>
	</FaTable>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface RowData {
	id: number;
	name: string;
	owner: string;
	status: string;
	visits: number;
}

const sourceRows: RowData[] = [
	{ id: 1, name: "Fast.Element.Plus 文档与案例建设", owner: "小方", status: "进行中", visits: 1860 },
	{ id: 2, name: "Fast.NET SDK", owner: "研发组", status: "已完成", visits: 5320 },
	{ id: 3, name: "Fast.Admin 权限中心", owner: "平台组", status: "进行中", visits: 2980 },
	{ id: 4, name: "移动端业务门户", owner: "前端组", status: "已暂停", visits: 920 },
];
const rows = ref([...sourceRows]);

const filterStatus = (value: unknown, row: Record<string, unknown>): boolean => row["status"] === value;
const handleSort = ({ prop, order }: { order: "" | "ascending" | "descending"; prop: string }): void => {
	if (!order) {
		rows.value = [...sourceRows];
		return;
	}
	const key = prop as keyof RowData;
	const direction = order === "ascending" ? 1 : -1;
	rows.value = [...sourceRows].sort((left, right) => {
		const leftValue = Number(left[key]);
		const rightValue = Number(right[key]);
		return leftValue === rightValue ? 0 : leftValue > rightValue ? direction : -direction;
	});
};
</script>

Slots Expose

View code

Vue

<template>
	<FaTable ref="tableRef" :data="rows" :pagination="false" hide-search-time>
		<template #header><ElTag type="primary">自定义头部插槽</ElTag></template>
		<template #toolButton>
			<ElButton type="primary" @click="tableRef?.refresh()">刷新</ElButton>
			<ElButton @click="tableRef?.reset()">重置</ElButton>
		</template>
		<FaTableColumn prop="name" label="项目" min-width="180" />
		<FaTableColumn prop="version" label="版本" width="120" />
		<template #operation="{ row }"><ElButton link type="primary" @click="ElMessage.info(`查看 ${String(row['name'])}`)">查看</ElButton></template>
		<template #footer
			><div class="demo-value">表格 Loading：{{ tableRef?.loading ? "是" : "否" }}</div></template
		>
	</FaTable>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { ElMessage } from "element-plus";

interface TableExpose {
	loading: boolean;
	refresh: () => Promise<void>;
	reset: () => Promise<void>;
}

const tableRef = useTemplateRef<TableExpose>("tableRef");
const rows = [
	{ id: 1, name: "Fast.Element.Plus", version: "2.0.3" },
	{ id: 2, name: "Fast.NET", version: "5.x" },
];
</script>

FaTable Complete API

Props (75)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
data	Fast override	Component data.	Array	Fast[]EL[]
size	Fast override	Component size.	String	Fast—EL—
height	Fast override	Component height.	String / Number	Fast—EL—
rowKey	Fast override	Unique row or node key.	String / Function	FastidELid
tableKey	Fast addition	Unique key for the table instance and persisted settings.	String	Generated at runtime
requestApi	Fast addition	Asynchronous data-request function.	Function	—
dataCallback	Fast addition	Transformation/callback after table data loads.	Function	—
initParam	Fast addition	Initial request parameters.	String / Number / Object	—
columns	Fast addition	Table column configuration.	Array / Boolean	false
columnsChange	Fast addition	Column-settings change callback.	Function	—
searchFormCols	Fast addition	Responsive search-form column counts.	String / Number / Object	{"xs":2,"sm":3,"md":4,"lg":5,"xl":6}
collapsedSearch	Fast addition	Collapse table search conditions by default.	Boolean	true
advancedSearchDrawer	Fast addition	Show advanced search inside a drawer.	Boolean	false
searchForm	Fast addition	Initial search-form values.	Boolean	true
headerCard	Fast addition	Use card styling for the table header area.	Boolean	true
refreshBtn	Fast addition	Show refresh button.	Boolean	true
searchBtn	Fast addition	Show search button.	Boolean	true
columnSettingBtn	Fast addition	Show column-settings button.	Boolean	false
toolBtn	Fast addition	Show table tools.	Boolean	true
hideSearchTime	Fast addition	Hide the default time-search field.	Boolean	false
futureSearchTime	Fast addition	Allow future dates in time search.	Boolean	false
dataSearchRange	Fast addition	Default table time-search range.	String	Past3D
pagination	Fast addition	Show pagination or configure pagination.	Boolean	true
pageSizes	Fast addition	Available page sizes.	Array	[20,30,50,100]
hideImage	Fast addition	Hide image-column preview.	Boolean	false
single	Fast addition	Use single-select table mode.	Boolean	false
rowClickSelection	Fast addition	Toggle selection on row click.	Boolean	false
treeData	Fast addition	Flattens each parent's children into table rows and merges parent fields into them; native Element Plus tree-table expansion does not require this.	Boolean	false
props	Fast addition	Field mappings.	Object	{"children":"children"}
autoRefresh	Fast addition	Refresh automatically according to configuration.	Boolean	true
rowSelectable	Fast addition	Predicate controlling row selectability.	Function	—
width	EL native	Component width.	String / Number	—
maxHeight	EL native	table's max-height. The legal value is a number or the height in px	String / Number	—
fit	EL native	How content fits its container.	Boolean	true
stripe	EL native	Show striped rows.	Boolean	false
border	EL native	Show table borders.	Boolean	true
showHeader	EL native	whether Table header is visible	Boolean	true
showSummary	EL native	whether to display a summary row	Boolean	false
sumText	EL native	displayed text for the first column of summary row	String	—
summaryMethod	EL native	custom summary method	Function	—
rowClassName	EL native	function that returns custom class names for a row, or a string assigning class names for every row	String / Function	—
rowStyle	EL native	function that returns custom style for a row, or an object assigning custom style for every row	Object / Function	—
cellClassName	EL native	function that returns custom class names for a cell, or a string assigning class names for every cell	String / Function	—
cellStyle	EL native	function that returns custom style for a cell, or an object assigning custom style for every cell	Object / Function	—
headerRowClassName	EL native	function that returns custom class names for a row in table header, or a string assigning class names for every row in table header	String / Function	—
headerRowStyle	EL native	function that returns custom style for a row in table header, or an object assigning custom style for every row in table header	Object / Function	—
headerCellClassName	EL native	function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header	String / Function	—
headerCellStyle	EL native	function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header	Object / Function	—
highlightCurrentRow	EL native	whether current row is highlighted	Boolean	true
currentRowKey	EL native	key of current row, a set only prop	String / Number	—
emptyText	EL native	Empty-state text.	String	—
expandRowKeys	EL native	set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop.	Array	—
rowExpandable	EL native	enable expandable rows, works when the table has a column type="expand"	Function	—
defaultExpandAll	EL native	Expand all nodes by default.	Boolean	false
defaultSort	EL native	set the default sort column and order. property prop is used to set default sort column, property order is used to set default sort order	Object	—
tooltipEffect	EL native	the effect of the overflow tooltip	String	—
tooltipOptions	EL native	the options for the overflow tooltip, see the following tooltip component	Object	—
spanMethod	EL native	method that returns rowspan and colspan	Function	—
selectOnIndeterminate	EL native	controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected	Boolean	true
indent	EL native	Horizontal tree-level indentation in pixels.	Number	16
treeProps	EL native	configuration for rendering nested data	Object	{"hasChildren":"hasChildren","children":"children","checkStrictly":false}
lazy	EL native	Enable lazy loading.	Boolean	false
load	EL native	Lazy tree-node loader.	Function	—
style	EL native	Custom table cell/header styles.	Object	{}
className	EL native	Custom table cell/header class.	String	""
tableLayout	EL native	sets the algorithm used to lay out table cells, rows, and columns	String	fixed
scrollbarAlwaysOn	EL native	always show scrollbar	Boolean	false
flexible	EL native	ensure main axis minimum-size doesn't follow the content	Boolean	false
showOverflowTooltip	EL native	whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns, refer to table tooltip-options	Boolean / Object	false
tooltipFormatter	EL native	customize tooltip content when using show-overflow-tooltip	Function	—
appendFilterPanelTo	EL native	which element the filter panels appends to	String	—
scrollbarTabindex	EL native	body scrollbar's wrap container tabindex	Number / String	—
allowDragLastColumn	EL native	whether to allow drag the last column	Boolean	true
preserveExpandedContent	EL native	whether to preserve expanded row content in DOM when collapsed	Boolean	false
nativeScrollbar	EL native	whether to use native scrollbars	Boolean	false

Events（24）

Name	Source	Description	Parameters / type
select	EL native	Row or option selection.	—
selectAll	EL native	Table select-all state changes, with currently selected rows.	—
selectionChange	EL native	Table selection collection changes.	—
cellMouseEnter	EL native	Pointer enters a cell.	—
cellMouseLeave	EL native	Pointer leaves a cell.	—
cellClick	EL native	Cell click with row, column, cell, and native event.	—
cellDblclick	EL native	Cell double-click.	—
cellContextmenu	EL native	Cell context-menu event.	—
rowClick	EL native	Table-row click; arguments match ElTable row-click.	—
rowContextmenu	EL native	Table-row context menu.	—
rowDblclick	EL native	Table-row double-click.	—
headerClick	EL native	Header-cell click.	—
headerContextmenu	EL native	Header-cell context menu.	—
sortChange	EL native	Table sorting changes.	—
filterChange	EL native	Table filters change.	—
currentChange	EL native	Current table row, tree node, or selected value changes.	—
headerDragend	EL native	Column-width dragging ends.	—
expandChange	EL native	Table-row expansion changes.	—
scroll	EL native	Table or selector scrolls.	—
refresh	Fast addition	Data refresh event.	—
reset	Fast addition	Search-reset event.	—
sizeChange	Fast addition	Table page size changes.	—
paginationChange	Fast addition	Table page number or page size changes.	—
customCellClick	Fast addition	Fast link-column click with custom event name and cell context.	—

Slots（12）

Name	Source	Description	Parameters / type
default	EL native	Default component content.	—
append	EL native	Custom content after the last table row.	—
empty	EL native	Custom empty-state content.	—
topHeader	Fast addition	Custom content at the very top of the table.	—
header	Fast addition	Custom header or table-header business content.	—
toolButton	Fast addition	Custom common table tools.	—
toolButtonAdv	Fast addition	Custom advanced table tools.	—
operation	Fast addition	Custom table action-column content.	—
pagination	Fast addition	Custom pagination area.	—
footer	Fast addition	Custom footer actions; overlays provide loading and close.	—
columnSetting	Fast addition	Custom table column-settings area.	—
Dynamic named column/search slots	Fast addition	Business slots generated from column slot/headerSlot or search-field names.	—

Expose（31）

Name	Source	Description	Parameters / type
clearSelection	EL native	Clears the current selection.	—
getSelectionRows	EL native	Gets currently selected table rows.	—
getHalfSelectionRows	Fast addition	Gets partially selected tree-table rows.	—
toggleRowSelection	EL native	Toggles selection for a table row.	—
toggleAllSelection	EL native	Toggles table select-all.	—
toggleRowExpansion	EL native	Toggles a table row's expansion.	—
setCurrentRow	EL native	Sets the highlighted table row.	—
clearSort	EL native	Clears table sorting.	—
clearFilter	EL native	Clears table column filters.	—
doLayout	EL native	Recalculates table layout.	—
sort	EL native	Sorts the table by column and order.	—
scrollTo	EL native	Scrolls the table/virtual list to a position.	—
setScrollTop	EL native	Sets vertical table scroll.	—
setScrollLeft	EL native	Sets horizontal table scroll.	—
columns	EL native	Currently rendered ElTable column contexts.	—
updateKeyChildren	EL native	Updates tree/tree-table children by node key.	—
loading	Fast addition	Fast business loading state.	—
tableData	Fast addition	Currently rendered table data.	—
tablePagination	Fast addition	Current pagination state.	—
searchParam	Fast addition	Search parameters currently passed to the request function.	—
selected	Fast addition	Whether any table rows are selected.	—
selectedList	Fast addition	Complete selected data objects.	—
selectedListIds	Fast addition	Primary keys of selected rows.	—
indeterminateSelectedListIds	Fast addition	Primary keys of partially selected tree-table rows.	—
tableWidth	Fast addition	Calculated available table width.	—
tableHeight	Fast addition	Calculated available table height.	—
toggleRowIndeterminateSelection	Fast addition	Toggles partial selection for a tree-table row.	—
refresh	Fast addition	Repeats the data request or refreshes business content.	—
reset	Fast addition	Resets table search, pagination, and data.	—
doRender	Fast addition	Forces table recalculation and rendering.	—
doLoading	Fast addition	Runs a sync/async function with shared loading and overlay state.	—

Related component: FaTableColumn

Adds image, date/time, decimal precision, thousands separators, copy, links, tags, merged rows, and time-information columns to native ElTableColumn capabilities.

Column Types

View code

Vue

<template>
	<FaTable :data="rows" :pagination="false" :tool-btn="false" hide-search-time>
		<FaTableColumn prop="image" label="图片" type="image" original-image width="90" />
		<FaTableColumn prop="name" label="名称" min-width="180" copy link :click="handleLinkClick" />
		<FaTableColumn prop="amount" label="千分位" type="gd2" width="130" align="right" />
		<FaTableColumn prop="ratio" label="六位小数" type="d6" width="120" align="right" />
		<FaTableColumn prop="status" label="枚举标签" tag :enum="statuses" width="100" />
		<FaTableColumn prop="createdTime" label="日期时间" type="dateTime" width="180" />
	</FaTable>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import type { FaTableEnumColumnCtx } from "fast-element-plus";

const image = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80"><rect width="120" height="80" rx="8" fill="#409eff"/><text x="60" y="48" text-anchor="middle" font-size="20" fill="white">Fast</text></svg>'
)}`;
const rows = [
	{ id: 1, name: "Fast.Element.Plus", amount: 12345.6, ratio: 0.876543, status: 1, image, createdTime: "2026-08-26 09:30:00" },
	{ id: 2, name: "Fast.NET", amount: 9876543.21, ratio: 0.123456, status: 0, image, createdTime: "2026-08-25 16:20:00" },
];
const statuses: FaTableEnumColumnCtx[] = [
	{ label: "停用", value: 0, type: "danger" },
	{ label: "启用", value: 1, type: "success" },
];
const handleLinkClick = ({ row }: { row: Record<string, unknown> }): void => {
	ElMessage.info(String(row["name"]));
};
</script>

Image Columns

View code

Vue

<template>
	<FaTable :data="rows" :pagination="false" :tool-btn="false" hide-search-time>
		<FaTableColumn prop="cover" label="缩略图与预览" type="image" original-image width="130" />
		<FaTableColumn prop="cover" label="隐藏缩略图" type="image" hide-image width="130" />
		<FaTableColumn prop="name" label="资源名称" min-width="180" />
	</FaTable>
</template>

<script setup lang="ts">
const createImage = (text: string, color: string): string =>
	`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
		`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200"><rect width="320" height="200" rx="20" fill="${color}"/><circle cx="70" cy="70" r="32" fill="rgba(255,255,255,.32)"/><path d="M30 170 105 105l48 42 42-32 95 55" fill="none" stroke="white" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/><text x="250" y="58" text-anchor="middle" font-size="30" fill="white">${text}</text></svg>`
	)}`;

const rows = [
	{ id: 1, name: "项目封面", cover: createImage("封面", "#409eff") },
	{ id: 2, name: "产品截图", cover: createImage("截图", "#67c23a") },
	{ id: 3, name: "无图片占位", cover: "" },
];
</script>

Merge Time Info

View code

Vue

<template>
	<FaTable :data="rows" :pagination="false" :tool-btn="false" hide-search-time border>
		<FaTableColumn prop="department" label="部门（自动合并）" span-prop="department" min-width="150" />
		<FaTableColumn prop="name" label="工作事项" min-width="180" />
		<FaTableColumn type="timeInfo" label="操作信息" min-width="240" />
	</FaTable>
</template>

<script setup lang="ts">
const rows = [
	{
		id: 1,
		department: "研发中心",
		name: "组件库维护",
		createdUserName: "小方",
		createdTime: "2026-08-27 09:20:00",
	},
	{
		id: 2,
		department: "研发中心",
		name: "文档站建设",
		createdUserName: "前端组",
		createdTime: "2026-08-27 10:35:00",
	},
	{
		id: 3,
		department: "产品中心",
		name: "需求评审",
		createdUserName: "产品组",
		createdTime: "2026-08-26 16:10:00",
	},
];
</script>

Fast column types

Type	Purpose
default, selection, index, expand	Native default, selection, index, and expansion columns
image	Images and previews
date, time, dateTime	Date, time, and date-time formatting
d2, d4, d6	Fixed 2, 4, or 6 decimal places
gd2, gd4, gd6	Fixed precision with thousands separators
timeInfo	Combined user and time information

FaTableColumn Complete API

Props (51)

Fast and Element Plus 2.14.6 props are merged below. Fast changes appear first; native props that are not forwarded remain visible for compatibility review.

Property	Source	Description	Type	Default
type	Fast override	Fast business column type.	String	FastdefaultELdefault
width	Fast override	Component width.	String / Number	FastautoEL""
align	Fast override	alignment	String	FastleftEL—
headerAlign	Fast override	alignment of the table header. If omitted, the value of the above align attribute will be applied	String	FastleftEL—
show	Fast addition	Show the current column or layout item.	Boolean	false
smallWidth	Fast addition	Table column width in small mode.	String / Number	—
autoWidth	Fast addition	Calculate column width from cell content.	Boolean	false
slot	Fast addition	Named slot for a custom table cell.	String	—
headerSlot	Fast addition	Named slot for a custom table header.	String	—
headerRender	Fast addition	TSX table-header renderer.	Function	—
render	Fast addition	TSX table-cell renderer.	Function	—
_children	Fast addition	Child-column configuration for grouped headers.	Array	—
hideImage	Fast addition	Hide image-column preview.	Boolean	false
copy	Fast addition	Show cell copy action.	Boolean	false
link	Fast addition	Render cells as link buttons.	Boolean	false
spanProp	Fast addition	Field used for vertical row spanning.	String	—
click	Fast addition	Link-column click callback receiving row and row index.	Function	—
clickEmit	Fast addition	Custom event name emitted by link-column clicks.	String	—
originalImage	Fast addition	Use original images for image-column display and preview.	Boolean	false
dateFix	Fast addition	Also show a relative-time label in date columns.	Boolean	false
dateFormat	Fast addition	Custom date-column format.	String	—
tag	Fast addition	Render cells as enum tags.	Boolean	false
enum	Fast addition	Enum options, dictionary name, or per-row dictionary factory.	String / Array / Function	—
dataDeleteField	Fast addition	Logical-deletion field; matching cells display a deletion overlay.	String	—
timeInfoField	Fast addition	Username/time field mappings for time-info columns.	Object	{"userName":"createdUserName","time":"createdTime"}
label	EL native	Display text or synchronized label.	String	—
className	EL native	Custom table cell/header class.	String	—
labelClassName	EL native	class name of the label of this column	String	—
property	EL native	Table data field, equivalent to prop.	String	—
prop	EL native	field name. You can also use its alias: property	String	—
minWidth	EL native	column minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion	String / Number	""
renderHeader	EL native	render function for table header of this column	Function	—
sortable	EL native	whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the sort-change event of Table	Boolean / String	false
sortMethod	EL native	sorting method, works when sortable is true. Should return a number, just like Array.sort	Function	—
sortBy	EL native	specify which property to sort by, works when sortable is true and sort-method is undefined. If set to an Array, the column will sequentially sort by the next property if the previous one is equal	String / Function / Array	—
resizable	EL native	Allow drawer resizing.	Boolean	true
columnKey	EL native	column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered	String	—
showOverflowTooltip	EL native	whether to hide extra content and show them in a tooltip when hovering on the cell	Boolean / Object	false
tooltipFormatter	EL native	customize tooltip content when using show-overflow-tooltip	Function	—
fixed	EL native	whether column is fixed at left / right. Will be fixed at left if true	Boolean / String	false
formatter	EL native	Display-value formatter.	Function	—
selectable	EL native	function that determines if a certain row can be selected, works when type is 'selection'	Function	—
reserveSelection	EL native	whether to reserve selection after data refreshing, works when type is 'selection'. Note that row-key is required for this to work	Boolean	false
filterMethod	EL native	Local option-filtering function.	Function	—
filteredValue	EL native	filter value for selected data, might be useful when table header is rendered with render-header	Array	—
filters	EL native	an array of data filtering options. For each element in this array, text and value are required	Array	—
filterPlacement	EL native	placement for the filter dropdown	String	—
filterMultiple	EL native	whether data filtering supports multiple options	Boolean	true
filterClassName	EL native	className for the filter dropdown	String	—
index	EL native	customize indices for each row, works on columns with type=index	Number / Function	—
sortOrders	EL native	the order of the sorting strategies used when sorting the data, works when sortable is true. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array	Array	["ascending","descending",null]

Events（2）

Name	Source	Description	Parameters / type
imagePreview	Fast addition	Image preview opens, with the image URL.	—
customCellClick	Fast addition	Fast link-column click with custom event name and cell context.	—

Slots（4）

Name	Source	Description	Parameters / type
default(scope)	EL native	Custom cell content with row, column, and row index.	{ row: any, column: TableColumnCtx<T>, $index: number }
header(scope)	EL native	Custom column header with column and column index.	{ column: TableColumnCtx<T>, $index: number }
filter-icon	EL native · not forwarded	Custom content for filter icon	{ filterOpened: boolean }
expand	EL native · not forwarded	Custom content for expand columns. The expandable property is supported starting from v2.13.2.	{ expanded: boolean, expandable: boolean }

Expose（0）

Name	Source	Description	Parameters / type
None.

Related component: FaTableColumnsSettingDialog

Internal column-settings dialog controlled by columnSettingBtn. Reorder using the left drag handle; touch interaction requires a short hold before dragging to avoid accidental sorting while scrolling. Requires FaTable state; use through FaTable.TableColumnsSettingDialog or internal table flows.

FaTableColumnsSettingDialog Complete API

Props (1)

Property	Source	Description	Type	Default
change	Fast addition	Persistence callback after column settings change.	Function	—

Events（0）

Name	Source	Description	Parameters / type
No runtime Emits declarations.

Slots（0）

Name	Source	Description	Parameters / type
None.

Expose（2）

Name	Source	Description	Parameters / type
open	Fast addition	Runs the Fast asynchronous opening flow.	—
change	Fast addition	Public component instance member.	—

Related component: FaTablePagination

Internal pagination bar reading table state and emitting page/page-size changes. Requires FaTable context and is not a standalone pagination component.

FaTablePagination Complete API

Props (1)

Property	Source	Description	Type	Default
pageSizes	Fast addition	Available page sizes.	Array	[20,30,50,100]

Events（2）

Name	Source	Description	Parameters / type
sizeChange	Fast addition	Table page size changes.	—
currentChange	Fast addition	Current table row, tree node, or selected value changes.	—

Slots（0）

Name	Source	Description	Parameters / type
None.

Expose（0）

Name	Source	Description	Parameters / type
None.

Related component: FaTableSearchForm

Responsive table search container handling basic/advanced search, collapse, and reset. Normally created by FaTable from column configuration.

FaTableSearchForm Complete API

Props (6)

Property	Source	Description	Type	Default
showRequired	Fast addition	Show the current column or layout item.	Boolean	false
collapsedSearch	Fast addition	Collapse table search conditions by default.	Boolean	true
advancedSearchDrawer	Fast addition	Show advanced search inside a drawer.	Boolean	false
cols	Fast addition	Column counts at responsive breakpoints.	String / Number / Object	{"xs":2,"sm":3,"md":4,"lg":5,"xl":6}
searchRequired	Fast addition	Asynchronous table-search function.	Function	—
resetRequired	Fast addition	Asynchronous search-reset function.	Function	—

Events（0）

Name	Source	Description	Parameters / type
No runtime Emits declarations.

Slots（1）

Name	Source	Description	Parameters / type
Dynamic named column/search slots	Fast addition	Business slots generated from column slot/headerSlot or search-field names.	—

Expose（0）

Name	Source	Description	Parameters / type
None.

Related component: FaTableSearchFormItem

Renders inputs from FaTableColumn search configuration and triggers searching on value changes. Requires FaTable search state; do not use independently.

FaTableSearchFormItem Complete API

Props (2)

Property	Source	Description	Type	Default
columnRequired	Fast addition	FaTable column configuration for the current search field.	Object	—
searchRequired	Fast addition	Asynchronous search after the field value changes.	Function	—

Events（0）

Name	Source	Description	Parameters / type
No runtime Emits declarations.

Slots（1）

Name	Source	Description	Parameters / type
Dynamic named column/search slots	Fast addition	Business slots generated from column slot/headerSlot or search-field names.	—

Expose（0）

Name	Source	Description	Parameters / type
None.

FaTable instance methods

clearSelection Selection

Clears selection in a multi-select table.

Signature

clearSelection(): void;

Example

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

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

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

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

getSelectionRows Selection

Returns currently selected rows.

Signature

getSelectionRows(): import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow[];

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const result = componentRef.value?.getSelectionRows();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	DefaultRow[]	Method result consistent with the current component state.

getHalfSelectionRows Selection

Returns currently partially selected rows.

Signature

getHalfSelectionRows(): import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow[];

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const result = componentRef.value?.getHalfSelectionRows();
</script>

Input

This method has no input parameters.

Returns

Value	Type	Description
result	DefaultRow[]	Method result consistent with the current component state.

toggleRowSelection Selection

Toggles row selection in a multi-select table; the second argument explicitly sets selection.

Signature

toggleRowSelection(row: import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow, selected?: boolean, ignoreSelectable?: boolean): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.toggleRowSelection(row, true, true);
</script>

Input

Input	Type	Required / default	Description
row	DefaultRow	Required	Target table row data.
selected	boolean | undefined	Optional	Whether the target row is selected.
ignoreSelectable	boolean | undefined	Optional	Whether to ignore selectable restrictions.

Returns

Value	Type	Description
result	void	No return value.

toggleAllSelection Selection

Toggles selecting all/none in a multi-select table.

Signature

toggleAllSelection(): void;

Example

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

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

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

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

toggleRowExpansion Expand

Toggles an expandable/tree-table row; the second argument explicitly expands or collapses it.

Signature

toggleRowExpansion(row: import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow, expanded?: boolean): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.toggleRowExpansion(row, true);
</script>

Input

Input	Type	Required / default	Description
row	DefaultRow	Required	Target table row data.
expanded	boolean | undefined	Optional	Whether the target row is expanded.

Returns

Value	Type	Description
result	void	No return value.

setCurrentRow Current

Sets the current row in a single-select table; omitting the argument clears highlighting.

Signature

setCurrentRow(row?: import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow | undefined): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.setCurrentRow(row);
</script>

Input

Input	Type	Required / default	Description
row	DefaultRow | undefined	Optional	Target table row data.

Returns

Value	Type	Description
result	void	No return value.

clearSort Sort

Clears sorting and restores unsorted data.

Signature

clearSort(): void;

Example

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

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

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

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

clearFilter Filter

Clears filters for columnKey entries; with no argument, clears all filters.

Signature

clearFilter(columnKeys?: string[] | string): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.clearFilter(["name"]);
</script>

Input

Input	Type	Required / default	Description
columnKeys	string | string[] | undefined	Optional	Column keys whose filters should be cleared; omit for all columns.

Returns

Value	Type	Description
result	void	No return value.

doLayout Layout

Recalculates table layout, for example after visibility changes.

Signature

doLayout(): void;

Example

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

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

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

Input

This method has no input parameters.

Returns

Value	Type	Description
result	void	No return value.

sort Sort

Sorts the table manually using the property and order.

Signature

sort(prop: string, order: string): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.sort("name", "ascending");
</script>

Input

Input	Type	Required / default	Description
prop	string	Required	Form field path or table sort property.
order	string	Required	Sort direction, such as ascending or descending.

Returns

Value	Type	Description
result	void	No return value.

scrollTo Scroll

Scrolls to specified coordinates.

Signature

scrollTo(options: ScrollToOptions | number, yCoord?: number): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.scrollTo({ top: 120, behavior: "smooth" }, 1);
</script>

Input

Input	Type	Required / default	Description
options	number | ScrollToOptions	Required	Scroll distance or standard ScrollToOptions.
yCoord	number | undefined	Optional	Vertical scroll coordinate.

Returns

Value	Type	Description
result	void	No return value.

setScrollTop Scroll

Sets vertical scroll position.

Signature

setScrollTop(top?: number): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.setScrollTop(120);
</script>

Input

Input	Type	Required / default	Description
top	number | undefined	Optional	Vertical scroll distance.

Returns

Value	Type	Description
result	void	No return value.

setScrollLeft Scroll

Sets horizontal scroll position.

Signature

setScrollLeft(left?: number): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.setScrollLeft(120);
</script>

Input

Input	Type	Required / default	Description
left	number | undefined	Optional	Horizontal scroll distance.

Returns

Value	Type	Description
result	void	No return value.

updateKeyChildren Node

Updates children for a key in a lazy table; requires rowKey.

Signature

updateKeyChildren(key: string, data: import("element-plus/es/components/table/src/table/defaults.mjs").DefaultRow[]): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
componentRef.value?.updateKeyChildren(1, [row]);
</script>

Input

Input	Type	Required / default	Description
key	string	Required	Unique node, row, or column identifier.
data	DefaultRow[]	Required	Business data to query, insert, remove, or replace.

Returns

Value	Type	Description
result	void	No return value.

toggleRowIndeterminateSelection Selection

Toggles partial selection styling in a multi-select table; the second argument explicitly sets selection.

Signature

toggleRowIndeterminateSelection(row: DefaultRow, selected?: boolean): void;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const row = { id: 1, name: "Fast" };
componentRef.value?.toggleRowIndeterminateSelection(row, true);
</script>

Input

Input	Type	Required / default	Description
row	DefaultRow	Required	Target table row data.
selected	boolean | undefined	Optional	Whether the target row is selected.

Returns

Value	Type	Description
result	void	No return value.

refresh Refresh

Asynchronously refreshes the table.

Signature

refresh(): Promise<void>;

Example

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

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

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

Input

This method has no input parameters.

Returns

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

reset Reset

Asynchronously resets the table.

Signature

reset(): Promise<void>;

Example

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

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

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

Input

This method has no input parameters.

Returns

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

doRender Render

Rerenders the table, for example when TableKey changes.

Signature

doRender(): Promise<void>;

Example

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

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

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

Input

This method has no input parameters.

Returns

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

doLoading Loading

Runs a task with table loading state.

Signature

doLoading(loadingFunction: () => void | Promise<void>, loadingText?: string): Promise<void>;

Example

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

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

const componentRef = ref<InstanceType<typeof FaTable>>();
const saveData = async () => Promise.resolve();
const result = await componentRef.value?.doLoading(async () => saveData(), "Saving");
</script>

Input

Input	Type	Required / default	Description
loadingFunction	() => void | Promise<void>	Required	Synchronous or asynchronous task to run while loading.
loadingText	string | undefined	Optional	Optional loading-overlay text.

Returns

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

FaTableColumnsSettingDialog instance methods

open Open

Opens.

Signature

open(): Promise<void>;

Example

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

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

const Component = FaTable.TableColumnsSettingDialog;
const componentRef = ref<InstanceType<typeof Component>>();
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.

change Change

Handles column changes.

Signature

change(): Promise<void>;

Example

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

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

const Component = FaTable.TableColumnsSettingDialog;
const componentRef = ref<InstanceType<typeof Component>>();
const result = await componentRef.value?.change();
</script>

Input

This method has no input parameters.

Returns

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

State and lifecycle

Requests, automatic widths and doLoading own separate Loading entries. Manual false releases only its manual owner. Unmount cancels queued rendering/column tasks and settles doRender; late results cannot update state. ResizeObserver disconnects through watcher cleanup.