表格 AsamTable

展示已经获得的结构化行数据，并管理选择、排序和本地加载呈现。

使用场景

展示已经获得的结构化行数据，并管理选择、排序和本地加载呈现。

契约与组合

行数据由 data 提供，row-key 支持字段路径或函数。完整说明。

getSelectionRows 返回全选行，getHalfSelectionRows 返回 checkStrictly=false 的真实半选父行；getSelection 是 ASAM 当前选择快照。完整说明。

列的 prop 可以使用嵌套字段路径。完整说明。

固定列、固定表头、分组表头、展开详情、树与懒加载、排序、筛选、合并及汇总都使用真实 Table / TableColumn 入口。完整说明。

完整实例公开面

ref 的顶层值采用 Vue 浅解包：直接读取 isEmpty / columns / tableLayout，不再读取 .value。完整说明。

字段/方法	值与调用契约
ns	原生 namespace 视图，可读取 b / e / m 等类名函数。
layout	原生布局对象的只读借用视图；观察布局结果。
store	原生选择、列与树状态的只读借用视图；不承诺任意私有子命令。
columns	当前表头第一层的 TableColumnCtx<Row>[] 计算视图。
handleHeaderFooterMousewheel	(event: WheelEvent, delta: { pixelX: number; pixelY: number })；处理已归一化的表头/表尾滚轮。
handleMouseLeave	() => void；清除行悬停状态及原生 hover 记录。
tableId	原生实例的 string 标识。
tableSize	原生有效密度：空字符串 / large / default / small；ASAM 的 big 映射由尺寸作用域负责。
isHidden	boolean；原生布局初始化隐藏状态。
isEmpty	boolean；当前原生数据是否为空。
renderExpanded	原生显式 expose 的展开渲染器引用：函数或 null。2.14.7 的列实际写入 context.renderExpanded，因此展开正文可正常渲染而该独立引用仍为 null；不要据此判断是否存在展开列。
resizeProxyVisible	boolean；表头调整列宽代理是否显示。
resizeState	width / height / headerHeight 为 number 或 null 的测量视图。
isGroup	boolean；是否存在分组表头。
bodyWidth	string；原生表体布局宽度。
tableBodyStyles	{ width: string }；表体的计算样式。
emptyBlockStyle	{ width: string; height: string } 或 undefined；空数据块的计算样式。
debouncedUpdateLayout	可调用的延迟布局更新函数，同时保留 cancel() 与 flush()。
setCurrentRow	(row?: Row) => void；设置当前行，无参数清除。
getSelectionRows	() => Row[]；返回全选行。
getHalfSelectionRows	() => Row[]；checkStrictly=false 时返回半选父行。
toggleRowSelection	(row: Row, selected?: boolean, ignoreSelectable?: boolean) => void；切换或明确设定行选择。
clearSelection	() => void；清除选择并抑制当前 ASAM 默认选择意图。
clearFilter	(columnKeys?: string \| string[]) => void；按列键或全部清除筛选。
toggleAllSelection	() => void；切换全部行选择。
toggleRowExpansion	(row: Row, expanded?: boolean) => void；切换详情/树展开。
clearSort	() => void；清除排序。
doLayout	() => void；重算原生布局。
sort	(prop: string, order: string) => void；按公开列字段与原生排序顺序更新。
updateKeyChildren	(key: string, children: Row[]) => void；更新已懒加载的子节点，并继续应用未被用户清除的默认子节点意图。
t	原生 Translator；按 locale 键和可选命名参数翻译。
setDragVisible	(visible: boolean) => void；设置列宽拖动代理可见性。
context	原生 Table<Row> 上下文的只读借用视图；可观察当前原生上下文，私有子命令不作为稳定的业务 API。
computedSumText	string；有效汇总标题。
computedEmptyText	string；有效空数据文案。
computedTooltipEffect	有效 tooltip effect 或 undefined。
computedTooltipOptions	有效原生 tooltip options 对象或 undefined。
tableLayout	auto / fixed；当前有效表格布局。
scrollbarViewStyle	原生滚动内容样式对象。
scrollbarStyle	随 height / maxHeight 与表头表尾高度计算的滚动视窗样式对象。
scrollBarRef	实际滚动条实例或 undefined（挂载前/卸载后）；支持 Scrollbar 公开方法和 DOM wrapRef。
scrollTo	原生 scrollTo 数字坐标或 ScrollToOptions 签名；滚动表体。
setScrollLeft	(left?: number) => void；设置水平滚动位置。
setScrollTop	(top?: number) => void；设置垂直滚动位置。
allowDragLastColumn	boolean；原生显式 expose 的初始 prop 快照，不承诺响应式跟随后续 prop 改变。

默认选择支持树形后代与行键；懒加载后继续应用选择意图。完整说明。

模板与预览边界

TS 列插槽需要显式 Row 时，使用列前的 @vue-generic 注释；完整 usage-custom-column 与 basic 示例可直接运行。完整说明。

基础用法与状态

vue

<template>
	<div class="demo-root-layout">
		<label>
			<span>控件密度</span>
			<AsamSelect v-model="size">
				<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
					value
				}}</AsamOption>
			</AsamSelect>
		</label>
		<AsamButton type="default" native-type="button" @click="loading = !loading"
			>切换本地加载状态</AsamButton
		>
		<AsamTable
			v-bind="{ data: rows, rowKey: 'id', selectable: true, loading, size }"
			@selection-change="selection = $event"
		>
			<template #toolbar="{ selection: current }">
				<span>已选 {{ current.length }} 项</span>
			</template>
			<!-- @vue-generic {Row} -->
			<AsamTableColumn prop="name" label="名称" min-width="150">
				<template #default="{ row }">
					<span>{{ row.name }}</span>
				</template>
			</AsamTableColumn>
			<AsamTableColumn
				v-bind="{ prop: 'count', label: '数量', sortable: true, width: 100 }"
			/>
			<template #empty>没有本地记录</template>
		</AsamTable>
		<p class="example-paragraph" role="status">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
interface Row {
	id: number;
	name: string;
	count: number;
}
const rows: Row[] = [
	{ id: 1, name: '本地草稿', count: 3 },
	{ id: 2, name: '本地记录', count: 8 }
];
const selection = ref<Row[]>([]);
const loading = ref(false);
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('default');
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<label>
			<span>控件密度</span>
			<AsamSelect v-model="size">
				<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
					value
				}}</AsamOption>
			</AsamSelect>
		</label>
		<AsamButton type="default" native-type="button" @click="loading = !loading"
			>切换本地加载状态</AsamButton
		>
		<AsamTable
			v-bind="{ data: rows, rowKey: 'id', selectable: true, loading, size }"
			@selection-change="selection = $event"
		>
			<template #toolbar="{ selection: current }">
				<span>已选 {{ current.length }} 项</span>
			</template>

			<AsamTableColumn prop="name" label="名称" min-width="150">
				<template #default="{ row }">
					<span>{{ row.name }}</span>
				</template>
			</AsamTableColumn>
			<AsamTableColumn
				v-bind="{ prop: 'count', label: '数量', sortable: true, width: 100 }"
			/>
			<template #empty>没有本地记录</template>
		</AsamTable>
		<p class="example-paragraph" role="status">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const rows = [
	{ id: 1, name: '本地草稿', count: 3 },
	{ id: 2, name: '本地记录', count: 8 }
];
const selection = ref([]);
const loading = ref(false);
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

树后代与懒加载默认选择

vue

<template>
	<div class="demo-root-layout">
		<AsamCheckboxItem v-model="customChildren">使用 nodes 子节点字段</AsamCheckboxItem>
		<AsamButton native-type="submit" type="default" @click="staticTable?.clearSelection()"
			>清除树默认选择</AsamButton
		>
		<AsamTable
			ref="staticTable"
			:data="rows"
			row-key="id"
			selectable
			default-expand-all
			:default-selected-row-keys="[11]"
			:tree-props="{ children: customChildren ? 'nodes' : 'children', checkStrictly: true }"
			@selection-change="recordStatic"
		>
			<AsamTableColumn prop="label" label="静态树" />
		</AsamTable>
		<p class="example-paragraph" data-testid="tree-default-static">静态选择 {{ staticSelection.join(',') }}</p>
		<AsamTable
			:data="lazyRows"
			row-key="id"
			selectable
			lazy
			:default-selected-row-keys="[21]"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren', checkStrictly: true }"
			:load="load"
			@selection-change="recordLazy"
		>
			<AsamTableColumn prop="label" label="懒加载树（展开后解析默认选择）" />
		</AsamTable>
		<p class="example-paragraph" data-testid="tree-default-lazy">懒加载选择 {{ lazySelection.join(',') }}</p>
	</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableTreeDefaultsDemo' });
import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import type { AsamTableExpose, AsamTableProps } from '@asam-ui/ui';
interface Row {
	id: number;
	label: string;
	children?: Row[];
	nodes?: Row[];
	hasChildren?: boolean;
}
const customChildren = ref(false);
const staticTable = shallowRef<AsamTableExpose<Row>>();
const staticSelection = ref<number[]>([]),
	lazySelection = ref<number[]>([]);
const rows = computed<Row[]>(() => [
	{
		id: 1,
		label: '父节点',
		[customChildren.value ? 'nodes' : 'children']: [
			{ id: 11, label: '默认选中子节点' },
			{ id: 12, label: '其他子节点' }
		]
	}
]);
const lazyRows: Row[] = [{ id: 2, label: '待加载父节点', hasChildren: true }];
const timers = new Set<ReturnType<typeof setTimeout>>();
let disposed = false;
function recordStatic(selection: Row[]): void {
	staticSelection.value = selection.map((row) => row.id);
}
function recordLazy(selection: Row[]): void {
	lazySelection.value = selection.map((row) => row.id);
}
const load: AsamTableProps<Row>['load'] = (_row, _node, resolve) => {
	const timer = setTimeout(() => {
		timers.delete(timer);
		if (!disposed) resolve([{ id: 21, label: '解析后默认选中子节点' }]);
	}, 150);
	timers.add(timer);
};
onBeforeUnmount(() => {
	disposed = true;
	timers.forEach((timer) => clearTimeout(timer));
	timers.clear();
});
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamCheckboxItem v-model="customChildren">使用 nodes 子节点字段</AsamCheckboxItem>
		<AsamButton native-type="submit" type="default" @click="staticTable?.clearSelection()"
			>清除树默认选择</AsamButton
		>
		<AsamTable
			ref="staticTable"
			:data="rows"
			row-key="id"
			selectable
			default-expand-all
			:default-selected-row-keys="[11]"
			:tree-props="{ children: customChildren ? 'nodes' : 'children', checkStrictly: true }"
			@selection-change="recordStatic"
		>
			<AsamTableColumn prop="label" label="静态树" />
		</AsamTable>
		<p class="example-paragraph" data-testid="tree-default-static">静态选择 {{ staticSelection.join(',') }}</p>
		<AsamTable
			:data="lazyRows"
			row-key="id"
			selectable
			lazy
			:default-selected-row-keys="[21]"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren', checkStrictly: true }"
			:load="load"
			@selection-change="recordLazy"
		>
			<AsamTableColumn prop="label" label="懒加载树（展开后解析默认选择）" />
		</AsamTable>
		<p class="example-paragraph" data-testid="tree-default-lazy">懒加载选择 {{ lazySelection.join(',') }}</p>
	</div>
</template>
<script setup>
defineOptions({ name: 'AsamTableTreeDefaultsDemo' });
import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const customChildren = ref(false);
const staticTable = shallowRef();
const staticSelection = ref([]),
	lazySelection = ref([]);
const rows = computed(() => [
	{
		id: 1,
		label: '父节点',
		[customChildren.value ? 'nodes' : 'children']: [
			{ id: 11, label: '默认选中子节点' },
			{ id: 12, label: '其他子节点' }
		]
	}
]);
const lazyRows = [{ id: 2, label: '待加载父节点', hasChildren: true }];
const timers = new Set();
let disposed = false;
function recordStatic(selection) {
	staticSelection.value = selection.map((row) => row.id);
}
function recordLazy(selection) {
	lazySelection.value = selection.map((row) => row.id);
}
const load = (_row, _node, resolve) => {
	const timer = setTimeout(() => {
		timers.delete(timer);
		if (!disposed) resolve([{ id: 21, label: '解析后默认选中子节点' }]);
	}, 150);
	timers.add(timer);
};
onBeforeUnmount(() => {
	disposed = true;
	timers.forEach((timer) => clearTimeout(timer));
	timers.clear();
});
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

基础表格

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageBasicDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageBasicDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

可选择的树形数据

vue

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup v-model="treeProps.checkStrictly" class="mb-2">
			<AsamRadioButton :value="true" label="true" />
			<AsamRadioButton :value="false" label="false" />
		</AsamRadioGroup>
		<AsamTable :data="tableData" :tree-props="treeProps" row-key="id" default-expand-all>
			<AsamTableColumn type="selection" width="55" :selectable="selectable" />
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageCheckStrictlyDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';

import { reactive } from 'vue';

interface User {
	id: number;
	date: string;
	name: string;
	address: string;
	hasChildren?: boolean;
	children?: User[];
}

const treeProps = reactive({
	checkStrictly: false
});

const selectable = (row: User) => ![1, 31].includes(row.id);

const tableData: User[] = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号',
		children: [
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 33,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-2 {
	margin-bottom: var(--asam-space-sm);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup v-model="treeProps.checkStrictly" class="mb-2">
			<AsamRadioButton :value="true" label="true" />
			<AsamRadioButton :value="false" label="false" />
		</AsamRadioGroup>
		<AsamTable :data="tableData" :tree-props="treeProps" row-key="id" default-expand-all>
			<AsamTableColumn type="selection" width="55" :selectable="selectable" />
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageCheckStrictlyDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import { reactive } from 'vue';
const treeProps = reactive({
	checkStrictly: false
});
const selectable = (row) => ![1, 31].includes(row.id);
const tableData = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号',
		children: [
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 33,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-2 {
	margin-bottom: var(--asam-space-sm);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

自定义列模板

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTable :data="tableData" style="width: 100%">
		<!-- @vue-generic {User} -->
		<AsamTableColumn label="日期" width="180">
			<template #default="scope">
				<div style="display: flex; align-items: center">
					<AsamIcon><timer /></AsamIcon>
					<span style="margin-left: 10px">{{ scope.row.date }}</span>
				</div>
			</template>
		</AsamTableColumn>
		<!-- @vue-generic {User} -->
		<AsamTableColumn label="姓名" width="180">
			<template #default="scope">
				<AsamPopover effect="light" trigger="hover" placement="top" width="auto">
					<template #default>
						<div>姓名： {{ scope.row.name }}</div>
						<div>地址： {{ scope.row.address }}</div>
					</template>
					<template #reference>
						<AsamTag>{{ scope.row.name }}</AsamTag>
					</template>
				</AsamPopover>
			</template>
		</AsamTableColumn>
		<!-- @vue-generic {User} -->
		<AsamTableColumn label="操作">
			<template #default="scope">
				<AsamButton
				 type="default"
					size="small"
					@click="handleEdit(scope.$index, scope.row)"
				>
					编辑
				</AsamButton>
				<AsamButton
					size="small"
				 type="default"
					@click="handleDelete(scope.$index, scope.row)"
				>
					删除
				</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageCustomColumnDemo' });
import {
	AsamTable,
	AsamTableColumn,
	AsamIcon,
	AsamPopover,
	AsamTag,
	AsamButton
} from '@asam-ui/ui';

import { Timer } from '@asam-ui/icons-vue';

interface User {
	date: string;
	name: string;
	address: string;
}

const handleEdit = (index: number, row: User) => {
	console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
	console.log(index, row);
};

const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn label="日期" width="180">
			<template #default="scope">
				<div style="display: flex; align-items: center">
					<AsamIcon><timer /></AsamIcon>
					<span style="margin-left: 10px">{{ scope.row.date }}</span>
				</div>
			</template>
		</AsamTableColumn>

		<AsamTableColumn label="姓名" width="180">
			<template #default="scope">
				<AsamPopover effect="light" trigger="hover" placement="top" width="auto">
					<template #default>
						<div>姓名： {{ scope.row.name }}</div>
						<div>地址： {{ scope.row.address }}</div>
					</template>
					<template #reference>
						<AsamTag>{{ scope.row.name }}</AsamTag>
					</template>
				</AsamPopover>
			</template>
		</AsamTableColumn>

		<AsamTableColumn label="操作">
			<template #default="scope">
				<AsamButton
				 type="default"
					size="small"
					@click="handleEdit(scope.$index, scope.row)"
				>
					编辑
				</AsamButton>
				<AsamButton
					size="small"
				 type="default"
					@click="handleDelete(scope.$index, scope.row)"
				>
					删除
				</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageCustomColumnDemo' });
import {
	AsamTable,
	AsamTableColumn,
	AsamIcon,
	AsamPopover,
	AsamTag,
	AsamButton
} from '@asam-ui/ui';
import { Timer } from '@asam-ui/icons-vue';
const handleEdit = (index, row) => {
	console.log(index, row);
};
const handleDelete = (index, row) => {
	console.log(index, row);
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

自定义表头

vue

<template>
	<AsamTable :data="filterTableData" style="width: 100%">
		<AsamTableColumn label="日期" prop="date" />
		<AsamTableColumn label="姓名" prop="name" />
		<!-- @vue-generic {User} -->
		<AsamTableColumn align="right">
			<template #header>
				<AsamInput v-model="search" size="small" placeholder="输入关键字搜索" />
			</template>
			<template #default="scope">
				<AsamButton
				 type="default"
					size="small"
					@click="handleEdit(scope.$index, scope.row)"
				>
					编辑
				</AsamButton>
				<AsamButton
					size="small"
				 type="default"
					@click="handleDelete(scope.$index, scope.row)"
				>
					删除
				</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageCustomHeaderDemo' });
import { AsamTable, AsamTableColumn, AsamInput, AsamButton } from '@asam-ui/ui';

import { computed, ref } from 'vue';

interface User {
	date: string;
	name: string;
	address: string;
}

const search = ref('');
const filterTableData = computed(() =>
	tableData.filter(
		(data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
	)
);
const handleEdit = (index: number, row: User) => {
	console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
	console.log(index, row);
};

const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '约翰',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '摩根',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '杰西',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="filterTableData" style="width: 100%">
		<AsamTableColumn label="日期" prop="date" />
		<AsamTableColumn label="姓名" prop="name" />

		<AsamTableColumn align="right">
			<template #header>
				<AsamInput v-model="search" size="small" placeholder="输入关键字搜索" />
			</template>
			<template #default="scope">
				<AsamButton
				 type="default"
					size="small"
					@click="handleEdit(scope.$index, scope.row)"
				>
					编辑
				</AsamButton>
				<AsamButton
					size="small"
				 type="default"
					@click="handleDelete(scope.$index, scope.row)"
				>
					删除
				</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageCustomHeaderDemo' });
import { AsamTable, AsamTableColumn, AsamInput, AsamButton } from '@asam-ui/ui';
import { computed, ref } from 'vue';
const search = ref('');
const filterTableData = computed(() =>
	tableData.filter(
		(data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
	)
);
const handleEdit = (index, row) => {
	console.log(index, row);
};
const handleDelete = (index, row) => {
	console.log(index, row);
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '约翰',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '摩根',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '杰西',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

自定义索引

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn type="index" :index="indexMethod" />
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageCustomIndexDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const indexMethod = (index: number) => {
	return index * 2;
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn type="index" :index="indexMethod" />
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageCustomIndexDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const indexMethod = (index) => {
	return index * 2;
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	}
];
</script>

展开行

vue

<template>
	<div class="demo-root-layout">
		切换父级边框： <AsamSwitch v-model="parentBorder" /> 切换子级边框：
		<AsamSwitch v-model="childBorder" /> 保留展开状态：
		<AsamSwitch v-model="preserveExpanded" />
		<AsamTable
			:data="tableData"
			:border="parentBorder"
			:preserve-expanded-content="preserveExpanded"
			style="width: 100%"
		>
			<!-- @vue-generic {typeof tableData[number]} -->
			<AsamTableColumn type="expand">
				<template #default="props">
					<div m="4">
						<p class="example-paragraph" m="t-0 b-2">状态： {{ props.row.state }}</p>
						<p class="example-paragraph" m="t-0 b-2">城市： {{ props.row.city }}</p>
						<p class="example-paragraph" m="t-0 b-2">地址： {{ props.row.address }}</p>
						<p class="example-paragraph" m="t-0 b-2">邮编： {{ props.row.zip }}</p>
						<h3>家庭</h3>
						<AsamTable :data="props.row.family" :border="childBorder">
							<AsamTableColumn label="姓名" prop="name" />
							<AsamTableColumn label="状态" prop="state" />
							<AsamTableColumn label="城市" prop="city" />
							<AsamTableColumn label="地址" prop="address" />
							<AsamTableColumn label="邮编" prop="zip" />
						</AsamTable>
					</div>
				</template>
			</AsamTableColumn>
			<AsamTableColumn label="日期" prop="date" />
			<AsamTableColumn label="姓名" prop="name" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageExpandableRowDemo' });
import { AsamSwitch, AsamTable, AsamTableColumn } from '@asam-ui/ui';

import { ref } from 'vue';

const parentBorder = ref(false);
const childBorder = ref(false);
const preserveExpanded = ref(false);
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		切换父级边框： <AsamSwitch v-model="parentBorder" /> 切换子级边框：
		<AsamSwitch v-model="childBorder" /> 保留展开状态：
		<AsamSwitch v-model="preserveExpanded" />
		<AsamTable
			:data="tableData"
			:border="parentBorder"
			:preserve-expanded-content="preserveExpanded"
			style="width: 100%"
		>
			<AsamTableColumn type="expand">
				<template #default="props">
					<div m="4">
						<p class="example-paragraph" m="t-0 b-2">状态： {{ props.row.state }}</p>
						<p class="example-paragraph" m="t-0 b-2">城市： {{ props.row.city }}</p>
						<p class="example-paragraph" m="t-0 b-2">地址： {{ props.row.address }}</p>
						<p class="example-paragraph" m="t-0 b-2">邮编： {{ props.row.zip }}</p>
						<h3>家庭</h3>
						<AsamTable :data="props.row.family" :border="childBorder">
							<AsamTableColumn label="姓名" prop="name" />
							<AsamTableColumn label="状态" prop="state" />
							<AsamTableColumn label="城市" prop="city" />
							<AsamTableColumn label="地址" prop="address" />
							<AsamTableColumn label="邮编" prop="zip" />
						</AsamTable>
					</div>
				</template>
			</AsamTableColumn>
			<AsamTableColumn label="日期" prop="date" />
			<AsamTableColumn label="姓名" prop="name" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageExpandableRowDemo' });
import { AsamSwitch, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import { ref } from 'vue';
const parentBorder = ref(false);
const childBorder = ref(false);
const preserveExpanded = ref(false);
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: 'San Francisco',
		address: '3650 21st St, San Francisco',
		zip: 'CA 94114',
		family: [
			{
				name: 'Jerry',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Spike',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			},
			{
				name: 'Tyke',
				state: '加利福尼亚州',
				city: 'San Francisco',
				address: '3650 21st St, San Francisco',
				zip: 'CA 94114'
			}
		]
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

筛选

vue

<template>
	<div class="demo-root-layout">
		<AsamButton type="default" @click="resetDateFilter">重置日期筛选</AsamButton>
		<AsamButton type="default" @click="clearFilter">重置全部筛选条件</AsamButton>
		<AsamTable ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
			<AsamTableColumn
				prop="date"
				label="日期"
				sortable
				width="180"
				column-key="date"
				:filters="[
					{ text: '2016-05-01', value: '2016-05-01' },
					{ text: '2016-05-02', value: '2016-05-02' },
					{ text: '2016-05-03', value: '2016-05-03' },
					{ text: '2016-05-04', value: '2016-05-04' }
				]"
				:filter-method="filterHandler"
			/>
			<AsamTableColumn prop="name" label="姓名" width="180" />
			<AsamTableColumn prop="address" label="地址" :formatter="formatter" />

			<!-- @vue-generic {User} -->
			<AsamTableColumn
				prop="tag"
				label="标签"
				width="100"
				:filters="[
					{ text: '家', value: '家' },
					{ text: '办公室', value: '办公室' }
				]"
				:filter-method="filterTag"
				filter-placement="bottom-end"
			>
				<template #default="scope">
					<AsamTag
						:type="scope.row.tag === '家' ? 'primary' : 'success'"
						disable-transitions
					>
						{{ scope.row.tag }}
					</AsamTag>
				</template>
			</AsamTableColumn>
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFilterDemo' });
import { AsamButton, AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamTableColumnCtx, AsamTableExpose } from '@asam-ui/ui';

interface User {
	date: string;
	name: string;
	address: string;
	tag: string;
}

const tableRef = ref<AsamTableExpose<User>>();

const resetDateFilter = () => {
	tableRef.value!.clearFilter(['date']);
};
const clearFilter = () => {
	tableRef.value!.clearFilter();
};
const formatter = (row: User) => {
	return row.address;
};
const filterTag = (value: string, row: User) => {
	return row.tag === value;
};
const filterHandler = (value: string, row: User, column: AsamTableColumnCtx<User>) => {
	const property = column['property'];
	return property in row && Reflect.get(row, property) === value;
};

const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '办公室'
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamButton type="default" @click="resetDateFilter">重置日期筛选</AsamButton>
		<AsamButton type="default" @click="clearFilter">重置全部筛选条件</AsamButton>
		<AsamTable ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
			<AsamTableColumn
				prop="date"
				label="日期"
				sortable
				width="180"
				column-key="date"
				:filters="[
					{ text: '2016-05-01', value: '2016-05-01' },
					{ text: '2016-05-02', value: '2016-05-02' },
					{ text: '2016-05-03', value: '2016-05-03' },
					{ text: '2016-05-04', value: '2016-05-04' }
				]"
				:filter-method="filterHandler"
			/>
			<AsamTableColumn prop="name" label="姓名" width="180" />
			<AsamTableColumn prop="address" label="地址" :formatter="formatter" />

			<AsamTableColumn
				prop="tag"
				label="标签"
				width="100"
				:filters="[
					{ text: '家', value: '家' },
					{ text: '办公室', value: '办公室' }
				]"
				:filter-method="filterTag"
				filter-placement="bottom-end"
			>
				<template #default="scope">
					<AsamTag
						:type="scope.row.tag === '家' ? 'primary' : 'success'"
						disable-transitions
					>
						{{ scope.row.tag }}
					</AsamTag>
				</template>
			</AsamTableColumn>
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFilterDemo' });
import { AsamButton, AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';
import { ref } from 'vue';
const tableRef = ref();
const resetDateFilter = () => {
	tableRef.value.clearFilter(['date']);
};
const clearFilter = () => {
	tableRef.value.clearFilter();
};
const formatter = (row) => {
	return row.address;
};
const filterTag = (value, row) => {
	return row.tag === value;
};
const filterHandler = (value, row, column) => {
	const property = column['property'];
	return property in row && Reflect.get(row, property) === value;
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号',
		tag: '办公室'
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

固定列

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn fixed prop="date" label="日期" width="150" />
		<AsamTableColumn prop="name" label="姓名" width="120" />
		<AsamTableColumn prop="state" label="状态" width="120" />
		<AsamTableColumn prop="city" label="城市" width="120" />
		<AsamTableColumn prop="address" label="地址" width="600" />
		<AsamTableColumn prop="zip" label="邮编" width="120" />
		<AsamTableColumn fixed="right" label="操作" min-width="120">
			<template #default>
				<AsamButton link type="default" size="small" @click="handleClick">
					详情
				</AsamButton>
				<AsamButton link type="default" size="small">编辑</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFixedColumnDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';

const handleClick = () => {
	console.log('click');
};

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn fixed prop="date" label="日期" width="150" />
		<AsamTableColumn prop="name" label="姓名" width="120" />
		<AsamTableColumn prop="state" label="状态" width="120" />
		<AsamTableColumn prop="city" label="城市" width="120" />
		<AsamTableColumn prop="address" label="地址" width="600" />
		<AsamTableColumn prop="zip" label="邮编" width="120" />
		<AsamTableColumn fixed="right" label="操作" min-width="120">
			<template #default>
				<AsamButton link type="default" size="small" @click="handleClick">
					详情
				</AsamButton>
				<AsamButton link type="default" size="small">编辑</AsamButton>
			</template>
		</AsamTableColumn>
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFixedColumnDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';
const handleClick = () => {
	console.log('click');
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '家'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036',
		tag: '办公室'
	}
];
</script>

固定表头

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" height="250">
		<AsamTableColumn prop="date" label="日期" />
		<AsamTableColumn prop="name" label="姓名" />
		<AsamTableColumn prop="zip" label="邮编" />
		<AsamTableColumn label="地址信息" fixed="right">
			<AsamTableColumn prop="state" label="状态" />
			<AsamTableColumn prop="city" label="城市" />
			<AsamTableColumn prop="address" label="地址" min-width="200" />
		</AsamTableColumn>
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFixedColumnAndGroupHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" height="250">
		<AsamTableColumn prop="date" label="日期" />
		<AsamTableColumn prop="name" label="姓名" />
		<AsamTableColumn prop="zip" label="邮编" />
		<AsamTableColumn label="地址信息" fixed="right">
			<AsamTableColumn prop="state" label="状态" />
			<AsamTableColumn prop="city" label="城市" />
			<AsamTableColumn prop="address" label="地址" min-width="200" />
		</AsamTableColumn>
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFixedColumnAndGroupHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

固定列和表头

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" height="250">
		<AsamTableColumn fixed prop="date" label="日期" width="150" />
		<AsamTableColumn prop="name" label="姓名" width="120" />
		<AsamTableColumn prop="state" label="状态" width="120" />
		<AsamTableColumn prop="city" label="城市" width="320" />
		<AsamTableColumn prop="address" label="地址" width="600" />
		<AsamTableColumn prop="zip" label="邮编" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFixedColumnAndHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" height="250">
		<AsamTableColumn fixed prop="date" label="日期" width="150" />
		<AsamTableColumn prop="name" label="姓名" width="120" />
		<AsamTableColumn prop="state" label="状态" width="120" />
		<AsamTableColumn prop="city" label="城市" width="320" />
		<AsamTableColumn prop="address" label="地址" width="600" />
		<AsamTableColumn prop="zip" label="邮编" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFixedColumnAndHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

固定表头

vue

<template>
	<AsamTable :data="tableData" height="250" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFixedHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" height="250" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFixedHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

流体高度

vue

<template>
	<div class="demo-root-layout">
		<AsamTable :data="tableData" style="width: 100%" max-height="250">
			<AsamTableColumn fixed prop="date" label="日期" width="150" />
			<AsamTableColumn prop="name" label="姓名" width="120" />
			<AsamTableColumn prop="state" label="状态" width="120" />
			<AsamTableColumn prop="city" label="城市" width="120" />
			<AsamTableColumn prop="address" label="地址" width="600" />
			<AsamTableColumn prop="zip" label="邮编" width="120" />
			<!-- @vue-generic {(typeof tableData.value)[number]} -->
			<AsamTableColumn fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<AsamButton
						link
						type="default"
						size="small"
						@click.prevent="deleteRow(scope.$index)"
					>
						移除
					</AsamButton>
				</template>
			</AsamTableColumn>
		</AsamTable>
		<AsamButton type="default" class="mt-4" style="width: 100%" @click="onAddItem">
			添加项目
		</AsamButton>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageFixedHeaderWithFluidHeaderDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

const now = new Date();

const tableData = ref([
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
]);

const deleteRow = (index: number) => {
	tableData.value.splice(index, 1);
};

const onAddItem = () => {
	now.setDate(now.getDate() + 1);
	tableData.value.push({
		date: now.toISOString().slice(0, 10),
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	});
};
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-4 {
	margin-top: var(--asam-space-lg);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamTable :data="tableData" style="width: 100%" max-height="250">
			<AsamTableColumn fixed prop="date" label="日期" width="150" />
			<AsamTableColumn prop="name" label="姓名" width="120" />
			<AsamTableColumn prop="state" label="状态" width="120" />
			<AsamTableColumn prop="city" label="城市" width="120" />
			<AsamTableColumn prop="address" label="地址" width="600" />
			<AsamTableColumn prop="zip" label="邮编" width="120" />

			<AsamTableColumn fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<AsamButton
						link
						type="default"
						size="small"
						@click.prevent="deleteRow(scope.$index)"
					>
						移除
					</AsamButton>
				</template>
			</AsamTableColumn>
		</AsamTable>
		<AsamButton type="default" class="mt-4" style="width: 100%" @click="onAddItem">
			添加项目
		</AsamButton>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageFixedHeaderWithFluidHeaderDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const now = new Date();
const tableData = ref([
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
]);
const deleteRow = (index) => {
	tableData.value.splice(index, 1);
};
const onAddItem = () => {
	now.setDate(now.getDate() + 1);
	tableData.value.push({
		date: now.toISOString().slice(0, 10),
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	});
};
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-4 {
	margin-top: var(--asam-space-lg);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

多级表头

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="150" />
		<AsamTableColumn label="配送信息">
			<AsamTableColumn prop="name" label="姓名" width="120" />
			<AsamTableColumn label="地址信息">
				<AsamTableColumn prop="state" label="状态" width="120" />
				<AsamTableColumn prop="city" label="城市" width="120" />
				<AsamTableColumn prop="address" label="地址" />
				<AsamTableColumn prop="zip" label="邮编" width="120" />
			</AsamTableColumn>
		</AsamTableColumn>
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageGroupingHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="150" />
		<AsamTableColumn label="配送信息">
			<AsamTableColumn prop="name" label="姓名" width="120" />
			<AsamTableColumn label="地址信息">
				<AsamTableColumn prop="state" label="状态" width="120" />
				<AsamTableColumn prop="city" label="城市" width="120" />
				<AsamTableColumn prop="address" label="地址" />
				<AsamTableColumn prop="zip" label="邮编" width="120" />
			</AsamTableColumn>
		</AsamTableColumn>
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageGroupingHeaderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-08',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-06',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	},
	{
		date: '2016-05-07',
		name: '汤姆',
		state: '加利福尼亚州',
		city: '洛杉矶',
		address: '洛杉矶格罗夫街 189 号',
		zip: 'CA 90036'
	}
];
</script>

多选

vue

<template>
	<AsamTable
		ref="multipleTableRef"
		:data="tableData"
		row-key="id"
		style="width: 100%"
		@selection-change="handleSelectionChange"
	>
		<AsamTableColumn type="selection" :selectable="selectable" width="55" />
		<!-- @vue-generic {User} -->
		<AsamTableColumn label="日期" width="120">
			<template #default="scope">{{ scope.row.date }}</template>
		</AsamTableColumn>
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
	<div style="margin-top: var(--asam-space-lg)">
		<AsamButton type="default" @click="toggleSelection([tableData[1], tableData[2]])">
			切换第二、第三行的选中状态
		</AsamButton>
		<AsamButton type="default" @click="toggleSelection([tableData[1], tableData[2]], false)">
			按 selectable 切换选中状态
		</AsamButton>
		<AsamButton type="default" @click="toggleSelection()">清除选择</AsamButton>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageMultiSelectDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamTableExpose } from '@asam-ui/ui';

interface User {
	id: number;
	date: string;
	name: string;
	address: string;
}

const multipleTableRef = ref<AsamTableExpose<User>>();
const multipleSelection = ref<User[]>([]);

const selectable = (row: User) => ![1, 2].includes(row.id);
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
	if (rows) {
		rows.forEach((row) => {
			multipleTableRef.value!.toggleRowSelection(row, undefined, ignoreSelectable);
		});
	} else {
		multipleTableRef.value!.clearSelection();
	}
};
const handleSelectionChange = (val: User[]) => {
	multipleSelection.value = val;
};

const tableData: User[] = [
	{
		id: 1,
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 4,
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 5,
		date: '2016-05-08',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 6,
		date: '2016-05-06',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 7,
		date: '2016-05-07',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable
		ref="multipleTableRef"
		:data="tableData"
		row-key="id"
		style="width: 100%"
		@selection-change="handleSelectionChange"
	>
		<AsamTableColumn type="selection" :selectable="selectable" width="55" />

		<AsamTableColumn label="日期" width="120">
			<template #default="scope">{{ scope.row.date }}</template>
		</AsamTableColumn>
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
	<div style="margin-top: var(--asam-space-lg)">
		<AsamButton type="default" @click="toggleSelection([tableData[1], tableData[2]])">
			切换第二、第三行的选中状态
		</AsamButton>
		<AsamButton type="default" @click="toggleSelection([tableData[1], tableData[2]], false)">
			按 selectable 切换选中状态
		</AsamButton>
		<AsamButton type="default" @click="toggleSelection()">清除选择</AsamButton>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageMultiSelectDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const multipleTableRef = ref();
const multipleSelection = ref([]);
const selectable = (row) => ![1, 2].includes(row.id);
const toggleSelection = (rows, ignoreSelectable) => {
	if (rows) {
		rows.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined, ignoreSelectable);
		});
	} else {
		multipleTableRef.value.clearSelection();
	}
};
const handleSelectionChange = (val) => {
	multipleSelection.value = val;
};
const tableData = [
	{
		id: 1,
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 4,
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 5,
		date: '2016-05-08',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 6,
		date: '2016-05-06',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 7,
		date: '2016-05-07',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

合并行或列

vue

<template>
	<div class="demo-layout-1">
		<AsamTable :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" sortable label="金额 1" />
			<AsamTableColumn prop="amount2" sortable label="金额 2" />
			<AsamTableColumn prop="amount3" sortable label="金额 3" />
		</AsamTable>

		<AsamTable
			:data="tableData"
			:span-method="objectSpanMethod"
			border
			style="width: 100%; margin-top: var(--asam-space-lg)"
		>
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" label="金额 1" />
			<AsamTableColumn prop="amount2" label="金额 2" />
			<AsamTableColumn prop="amount3" label="金额 3" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageRowspanAndColspanDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

import type { AsamTableColumnCtx } from '@asam-ui/ui';

interface User {
	id: string;
	name: string;
	amount1: string;
	amount2: string;
	amount3: number;
}

interface SpanMethodProps {
	row: User;
	column: AsamTableColumnCtx<User>;
	rowIndex: number;
	columnIndex: number;
}

const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
	if (rowIndex % 2 === 0) {
		if (columnIndex === 0) {
			return [1, 2];
		} else if (columnIndex === 1) {
			return [0, 0];
		}
	}
};

const objectSpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
	if (columnIndex === 0) {
		if (rowIndex % 2 === 0) {
			return {
				rowspan: 2,
				colspan: 1
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0
			};
		}
	}
};

const tableData: User[] = [
	{
		id: '12987122',
		name: '汤姆',
		amount1: '234',
		amount2: '3.2',
		amount3: 10
	},
	{
		id: '12987123',
		name: '汤姆',
		amount1: '165',
		amount2: '4.43',
		amount3: 12
	},
	{
		id: '12987124',
		name: '汤姆',
		amount1: '324',
		amount2: '1.9',
		amount3: 9
	},
	{
		id: '12987125',
		name: '汤姆',
		amount1: '621',
		amount2: '2.2',
		amount3: 17
	},
	{
		id: '12987126',
		name: '汤姆',
		amount1: '539',
		amount2: '4.1',
		amount3: 15
	}
];
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

vue

<template>
	<div class="demo-layout-1">
		<AsamTable :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" sortable label="金额 1" />
			<AsamTableColumn prop="amount2" sortable label="金额 2" />
			<AsamTableColumn prop="amount3" sortable label="金额 3" />
		</AsamTable>

		<AsamTable
			:data="tableData"
			:span-method="objectSpanMethod"
			border
			style="width: 100%; margin-top: var(--asam-space-lg)"
		>
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" label="金额 1" />
			<AsamTableColumn prop="amount2" label="金额 2" />
			<AsamTableColumn prop="amount3" label="金额 3" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageRowspanAndColspanDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const arraySpanMethod = ({ rowIndex, columnIndex }) => {
	if (rowIndex % 2 === 0) {
		if (columnIndex === 0) {
			return [1, 2];
		} else if (columnIndex === 1) {
			return [0, 0];
		}
	}
};
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
	if (columnIndex === 0) {
		if (rowIndex % 2 === 0) {
			return {
				rowspan: 2,
				colspan: 1
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0
			};
		}
	}
};
const tableData = [
	{
		id: '12987122',
		name: '汤姆',
		amount1: '234',
		amount2: '3.2',
		amount3: 10
	},
	{
		id: '12987123',
		name: '汤姆',
		amount1: '165',
		amount2: '4.43',
		amount3: 12
	},
	{
		id: '12987124',
		name: '汤姆',
		amount1: '324',
		amount2: '1.9',
		amount3: 9
	},
	{
		id: '12987125',
		name: '汤姆',
		amount1: '621',
		amount2: '2.2',
		amount3: 17
	},
	{
		id: '12987126',
		name: '汤姆',
		amount1: '539',
		amount2: '4.1',
		amount3: 15
	}
];
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

显示溢出工具提示的表格

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn type="selection" width="55" />
		<!-- @vue-generic {User} -->
		<AsamTableColumn label="日期" width="120">
			<template #default="scope">{{ scope.row.date }}</template>
		</AsamTableColumn>
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn
			property="address"
			label="使用 show-overflow-tooltip"
			width="240"
			show-overflow-tooltip
		/>
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageShowOverflowTooltipDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

interface User {
	date: string;
	name: string;
	address: string;
}
const tableData: User[] = [
	{
		date: '2016-05-04',
		name: '艾琳娜·库茨纳',
		address: '萨尔州南莉莉洛尔贝格路 86c 号'
	},
	{
		date: '2016-05-03',
		name: '海伦·雅各比',
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'
	},
	{
		date: '2016-05-02',
		name: '布兰登·德克特',
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'
	},
	{
		date: '2016-05-01',
		name: '玛吉·史密斯',
		address: '爱达荷州西里卡多温莎路 23618 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%">
		<AsamTableColumn type="selection" width="55" />

		<AsamTableColumn label="日期" width="120">
			<template #default="scope">{{ scope.row.date }}</template>
		</AsamTableColumn>
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn
			property="address"
			label="使用 show-overflow-tooltip"
			width="240"
			show-overflow-tooltip
		/>
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageShowOverflowTooltipDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-04',
		name: '艾琳娜·库茨纳',
		address: '萨尔州南莉莉洛尔贝格路 86c 号'
	},
	{
		date: '2016-05-03',
		name: '海伦·雅各比',
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'
	},
	{
		date: '2016-05-02',
		name: '布兰登·德克特',
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'
	},
	{
		date: '2016-05-01',
		name: '玛吉·史密斯',
		address: '爱达荷州西里卡多温莎路 23618 号'
	}
];
</script>

单选

vue

<template>
	<AsamTable
		ref="singleTableRef"
		:data="tableData"
		highlight-current-row
		style="width: 100%"
		@current-change="handleCurrentChange"
	>
		<AsamTableColumn type="index" width="50" />
		<AsamTableColumn property="date" label="日期" width="120" />
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
	<div style="margin-top: var(--asam-space-lg)">
		<AsamButton type="default" @click="setCurrent(tableData[1])">选择第二行</AsamButton>
		<AsamButton type="default" @click="setCurrent()">清除选择</AsamButton>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageSingleSelectDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamTableExpose } from '@asam-ui/ui';

interface User {
	date: string;
	name: string;
	address: string;
}

const currentRow = ref();
const singleTableRef = ref<AsamTableExpose<User>>();

const setCurrent = (row?: User) => {
	singleTableRef.value!.setCurrentRow(row);
};
const handleCurrentChange = (val: User | null) => {
	currentRow.value = val;
};
const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable
		ref="singleTableRef"
		:data="tableData"
		highlight-current-row
		style="width: 100%"
		@current-change="handleCurrentChange"
	>
		<AsamTableColumn type="index" width="50" />
		<AsamTableColumn property="date" label="日期" width="120" />
		<AsamTableColumn property="name" label="姓名" width="120" />
		<AsamTableColumn property="address" label="地址" />
	</AsamTable>
	<div style="margin-top: var(--asam-space-lg)">
		<AsamButton type="default" @click="setCurrent(tableData[1])">选择第二行</AsamButton>
		<AsamButton type="default" @click="setCurrent()">清除选择</AsamButton>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageSingleSelectDemo' });
import { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const currentRow = ref();
const singleTableRef = ref();
const setCurrent = (row) => {
	singleTableRef.value.setCurrentRow(row);
};
const handleCurrentChange = (val) => {
	currentRow.value = val;
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

排序

vue

<template>
	<AsamTable
		:data="tableData"
		:default-sort="{ prop: 'date', order: 'descending' }"
		style="width: 100%"
	>
		<AsamTableColumn prop="date" label="日期" sortable width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" :formatter="formatter" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageSortDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

interface User {
	date: string;
	name: string;
	address: string;
}

const formatter = (row: User) => {
	return row.address;
};

const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable
		:data="tableData"
		:default-sort="{ prop: 'date', order: 'descending' }"
		style="width: 100%"
	>
		<AsamTableColumn prop="date" label="日期" sortable width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" :formatter="formatter" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageSortDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const formatter = (row) => {
	return row.address;
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

带斑马纹表格

vue

<template>
	<AsamTable :data="tableData" stripe style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageStripedDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" stripe style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageStripedDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

表尾合计行

vue

<template>
	<div class="demo-root-layout">
		<AsamTable :data="tableData" border show-summary style="width: 100%">
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" sortable label="金额 1" />
			<AsamTableColumn prop="amount2" sortable label="金额 2" />
			<AsamTableColumn prop="amount3" sortable label="金额 3" />
		</AsamTable>

		<AsamTable
			:data="tableData"
			border
			height="200"
			:summary-method="getSummaries"
			show-summary
			style="width: 100%; margin-top: var(--asam-space-lg)"
		>
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" label="费用 1 ($)" />
			<AsamTableColumn prop="amount2" label="费用 2 ($)" />
			<AsamTableColumn prop="amount3" label="费用 3 ($)" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageSummaryDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

import { h } from 'vue';

import type { VNode } from 'vue';
import type { AsamTableColumnCtx } from '@asam-ui/ui';

interface Product {
	id: string;
	name: string;
	amount1: string;
	amount2: string;
	amount3: number;
}

interface SummaryMethodProps<T extends Product = Product> {
	columns: AsamTableColumnCtx<T>[];
	data: T[];
}

const getSummaries = (param: SummaryMethodProps) => {
	const { columns, data } = param;
	const sums: (string | VNode)[] = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['总费用']);
			return;
		}
		const values = data.map((item) => Number(Reflect.get(item, column.property)));
		if (!values.every((value) => Number.isNaN(value))) {
			sums[index] = `$ ${values.reduce((prev, curr) => {
				const value = Number(curr);
				if (!Number.isNaN(value)) {
					return prev + curr;
				} else {
					return prev;
				}
			}, 0)}`;
		} else {
			sums[index] = 'N/A';
		}
	});

	return sums;
};

const tableData: Product[] = [
	{
		id: '12987122',
		name: '汤姆',
		amount1: '234',
		amount2: '3.2',
		amount3: 10
	},
	{
		id: '12987123',
		name: '汤姆',
		amount1: '165',
		amount2: '4.43',
		amount3: 12
	},
	{
		id: '12987124',
		name: '汤姆',
		amount1: '324',
		amount2: '1.9',
		amount3: 9
	},
	{
		id: '12987125',
		name: '汤姆',
		amount1: '621',
		amount2: '2.2',
		amount3: 17
	},
	{
		id: '12987126',
		name: '汤姆',
		amount1: '539',
		amount2: '4.1',
		amount3: 15
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamTable :data="tableData" border show-summary style="width: 100%">
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" sortable label="金额 1" />
			<AsamTableColumn prop="amount2" sortable label="金额 2" />
			<AsamTableColumn prop="amount3" sortable label="金额 3" />
		</AsamTable>

		<AsamTable
			:data="tableData"
			border
			height="200"
			:summary-method="getSummaries"
			show-summary
			style="width: 100%; margin-top: var(--asam-space-lg)"
		>
			<AsamTableColumn prop="id" label="ID" width="180" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="amount1" label="费用 1 ($)" />
			<AsamTableColumn prop="amount2" label="费用 2 ($)" />
			<AsamTableColumn prop="amount3" label="费用 3 ($)" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageSummaryDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
import { h } from 'vue';
const getSummaries = (param) => {
	const { columns, data } = param;
	const sums = [];
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['总费用']);
			return;
		}
		const values = data.map((item) => Number(Reflect.get(item, column.property)));
		if (!values.every((value) => Number.isNaN(value))) {
			sums[index] = `$ ${values.reduce((prev, curr) => {
				const value = Number(curr);
				if (!Number.isNaN(value)) {
					return prev + curr;
				} else {
					return prev;
				}
			}, 0)}`;
		} else {
			sums[index] = 'N/A';
		}
	});
	return sums;
};
const tableData = [
	{
		id: '12987122',
		name: '汤姆',
		amount1: '234',
		amount2: '3.2',
		amount3: 10
	},
	{
		id: '12987123',
		name: '汤姆',
		amount1: '165',
		amount2: '4.43',
		amount3: 12
	},
	{
		id: '12987124',
		name: '汤姆',
		amount1: '324',
		amount2: '1.9',
		amount3: 9
	},
	{
		id: '12987125',
		name: '汤姆',
		amount1: '621',
		amount2: '2.2',
		amount3: 17
	},
	{
		id: '12987126',
		name: '汤姆',
		amount1: '539',
		amount2: '4.1',
		amount3: 15
	}
];
</script>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

追加内容与汇总行

append 用于最后一条数据之后的操作区域。完整说明。

追加内容与汇总行

vue

<template>
	<div>
		<p class="example-paragraph">追加内容位于汇总行上方；固定高度时滚动到底部查看追加操作。</p>
		<label>
			<span>布局</span>
			<AsamSelect v-model="layout">
				<AsamOption :label="'auto'" :value="'auto'">auto</AsamOption>
				<AsamOption :label="'fixed'" :value="'fixed'">fixed</AsamOption>
			</AsamSelect>
		</label>
		<AsamCheckboxItem v-model="showSummary">汇总</AsamCheckboxItem>
		<AsamCheckboxItem v-model="showAppend">追加内容</AsamCheckboxItem>
		<AsamCheckboxItem v-model="empty">空表</AsamCheckboxItem>
		<AsamCheckboxItem v-model="customSummary">自定义 VNode 汇总</AsamCheckboxItem>
		<AsamCheckboxItem v-model="fixedHeight">固定高度</AsamCheckboxItem>
		<AsamTable
			:data="visibleRows"
			:table-layout="layout"
			:show-summary="showSummary"
			:summary-method="customSummary ? summaries : undefined"
			:height="fixedHeight ? 260 : undefined"
			row-key="id"
			border
		>
			<AsamTableColumn prop="name" label="商品" min-width="160" />
			<AsamTableColumn prop="amount" label="数量" min-width="120" />
			<template v-if="showAppend" #append>
				<div class="append-actions">
					<AsamButton type="default" @click="add">追加一行</AsamButton>
					<span>已追加 {{ added }} 行</span>
				</div>
			</template>
			<template #empty>暂无商品，可通过追加操作添加。</template>
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableAppendSummaryDemo' });
import { computed, h, ref } from 'vue';
import {
	AsamSelect,
	AsamOption,
	AsamCheckboxItem,
	AsamButton,
	AsamTable,
	AsamTableColumn
} from '@asam-ui/ui';
import type { AsamTableProps } from '@asam-ui/ui';
interface Product {
	id: number;
	name: string;
	amount: number;
}
const layout = ref<'auto' | 'fixed'>('auto');
const showSummary = ref(true),
	showAppend = ref(true),
	empty = ref(false);
const customSummary = ref(false),
	fixedHeight = ref(false),
	added = ref(0);
const rows = ref<Product[]>([
	{ id: 1, name: '商品 A', amount: 2 },
	{ id: 2, name: '商品 B', amount: 3 }
]);
const visibleRows = computed(() => (empty.value ? [] : rows.value));
const summaries: NonNullable<AsamTableProps<Product>['summaryMethod']> = ({ data }) => [
	h('strong', '数量合计'),
	String(data.reduce((sum, row) => sum + row.amount, 0))
];
function add() {
	const id = rows.value.length + 1;
	rows.value.push({ id, name: `商品 ${id}`, amount: 1 });
	added.value++;
	empty.value = false;
}
</script>

<style scoped>
label {
	display: inline-flex;
	align-items: center;
	gap: var(--asam-space-xs);
	margin: var(--asam-space-sm);
}

.append-actions {
	display: flex;
	align-items: center;
	gap: var(--asam-space-md);
	padding: var(--asam-space-md);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

vue

<template>
	<div>
		<p class="example-paragraph">追加内容位于汇总行上方；固定高度时滚动到底部查看追加操作。</p>
		<label>
			<span>布局</span>
			<AsamSelect v-model="layout">
				<AsamOption :label="'auto'" :value="'auto'">auto</AsamOption>
				<AsamOption :label="'fixed'" :value="'fixed'">fixed</AsamOption>
			</AsamSelect>
		</label>
		<AsamCheckboxItem v-model="showSummary">汇总</AsamCheckboxItem>
		<AsamCheckboxItem v-model="showAppend">追加内容</AsamCheckboxItem>
		<AsamCheckboxItem v-model="empty">空表</AsamCheckboxItem>
		<AsamCheckboxItem v-model="customSummary">自定义 VNode 汇总</AsamCheckboxItem>
		<AsamCheckboxItem v-model="fixedHeight">固定高度</AsamCheckboxItem>
		<AsamTable
			:data="visibleRows"
			:table-layout="layout"
			:show-summary="showSummary"
			:summary-method="customSummary ? summaries : undefined"
			:height="fixedHeight ? 260 : undefined"
			row-key="id"
			border
		>
			<AsamTableColumn prop="name" label="商品" min-width="160" />
			<AsamTableColumn prop="amount" label="数量" min-width="120" />
			<template v-if="showAppend" #append>
				<div class="append-actions">
					<AsamButton type="default" @click="add">追加一行</AsamButton>
					<span>已追加 {{ added }} 行</span>
				</div>
			</template>
			<template #empty>暂无商品，可通过追加操作添加。</template>
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableAppendSummaryDemo' });
import {
	AsamSelect,
	AsamOption,
	AsamCheckboxItem,
	AsamButton,
	AsamTable,
	AsamTableColumn
} from '@asam-ui/ui';
import { computed, h, ref } from 'vue';
const layout = ref('auto');
const showSummary = ref(true),
	showAppend = ref(true),
	empty = ref(false);
const customSummary = ref(false),
	fixedHeight = ref(false),
	added = ref(0);
const rows = ref([
	{ id: 1, name: '商品 A', amount: 2 },
	{ id: 2, name: '商品 B', amount: 3 }
]);
const visibleRows = computed(() => (empty.value ? [] : rows.value));
const summaries = ({ data }) => [
	h('strong', '数量合计'),
	String(data.reduce((sum, row) => sum + row.amount, 0))
];
function add() {
	const id = rows.value.length + 1;
	rows.value.push({ id, name: `商品 ${id}`, amount: 1 });
	added.value++;
	empty.value = false;
}
</script>

<style scoped>
label {
	display: inline-flex;
	align-items: center;
	gap: var(--asam-space-xs);
	margin: var(--asam-space-sm);
}

.append-actions {
	display: flex;
	align-items: center;
	gap: var(--asam-space-md);
	padding: var(--asam-space-md);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

表格布局

vue

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup v-model="tableLayout" class="mb-2">
			<AsamRadioButton value="fixed">fixed</AsamRadioButton>
			<AsamRadioButton value="auto">auto</AsamRadioButton>
		</AsamRadioGroup>
		<AsamTable :data="tableData" :table-layout="tableLayout">
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageTableLayoutDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';

import { ref } from 'vue';

import type { AsamTableExpose } from '@asam-ui/ui';

const tableLayout = ref<AsamTableExpose['tableLayout']>('fixed');

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-2 {
	margin-bottom: var(--asam-space-sm);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamRadioGroup v-model="tableLayout" class="mb-2">
			<AsamRadioButton value="fixed">fixed</AsamRadioButton>
			<AsamRadioButton value="auto">auto</AsamRadioButton>
		</AsamRadioGroup>
		<AsamTable :data="tableData" :table-layout="tableLayout">
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageTableLayoutDemo' });
import { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import { ref } from 'vue';
const tableLayout = ref('fixed');
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mb-2 {
	margin-bottom: var(--asam-space-sm);
}
</style>

<style scoped>
.demo-root-layout {
	display: grid;
	gap: var(--asam-space-md);
	justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

提示内容格式化

vue

<template>
	<AsamTable
		:data="tableData"
		show-overflow-tooltip
		:tooltip-formatter="tableRowFormatter"
		style="width: 100%"
	>
		<AsamTableColumn prop="address" label="扩展表格格式化器" width="240" />
		<!-- @vue-generic {TableData} -->
		<AsamTableColumn
			prop="tags"
			label="格式化对象"
			width="240"
			:tooltip-formatter="({ row }) => row.tags.join(', ')"
		>
			<template #default="{ row }">
				<AsamTag v-for="tag in row.tags" :key="tag" class="tag-item" type="primary">
					{{ tag }}
				</AsamTag>
			</template>
		</AsamTableColumn>
		<AsamTableColumn prop="url" label="使用 VNode" width="240" :tooltip-formatter="withVNode" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageTooltipFormatterDemo' });
import { AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';

import { h } from 'vue';
import { AsamLink, type AsamTableTooltipData } from '@asam-ui/ui';

type TableData = {
	address: string;
	tags: string[];
	url: string;
};

const tableData: TableData[] = [
	{
		address: '萨尔州南莉莉洛尔贝格路 86c 号',
		tags: ['办公室', '家', '公园', '花园'],
		url: '/component-AsamTable.html'
	},
	{
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号',
		tags: ['error', 'warning', 'success', 'info'],
		url: '/component-AsamTable.html'
	},
	{
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号',
		tags: ['one', 'two', 'three', 'four', 'five'],
		url: '/component-AsamTable.html'
	},
	{
		address: '爱达荷州西里卡多温莎路 23618 号',
		tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
		url: '/component-AsamTable.html'
	}
];

const tableRowFormatter = (data: AsamTableTooltipData<TableData>) => {
	return `${data.cellValue}：表格格式化内容`;
};

const withVNode = (data: AsamTableTooltipData<TableData>) => {
	return h(AsamLink, { type: 'primary', href: data.cellValue }, () =>
		h('span', null, data.cellValue)
	);
};
</script>

<style scoped>
p {
	margin: 10px;
	padding: 0;
}

.tag-item + .tag-item {
	margin-left: 5px;
}
</style>

vue

<template>
	<AsamTable
		:data="tableData"
		show-overflow-tooltip
		:tooltip-formatter="tableRowFormatter"
		style="width: 100%"
	>
		<AsamTableColumn prop="address" label="扩展表格格式化器" width="240" />

		<AsamTableColumn
			prop="tags"
			label="格式化对象"
			width="240"
			:tooltip-formatter="({ row }) => row.tags.join(', ')"
		>
			<template #default="{ row }">
				<AsamTag v-for="tag in row.tags" :key="tag" class="tag-item" type="primary">
					{{ tag }}
				</AsamTag>
			</template>
		</AsamTableColumn>
		<AsamTableColumn prop="url" label="使用 VNode" width="240" :tooltip-formatter="withVNode" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageTooltipFormatterDemo' });
import { AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';
import { h } from 'vue';
import { AsamLink } from '@asam-ui/ui';
const tableData = [
	{
		address: '萨尔州南莉莉洛尔贝格路 86c 号',
		tags: ['办公室', '家', '公园', '花园'],
		url: '/component-AsamTable.html'
	},
	{
		address: '伊利诺伊州南弗兰克菲尔德 A 街 760 号',
		tags: ['error', 'warning', 'success', 'info'],
		url: '/component-AsamTable.html'
	},
	{
		address: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号',
		tags: ['one', 'two', 'three', 'four', 'five'],
		url: '/component-AsamTable.html'
	},
	{
		address: '爱达荷州西里卡多温莎路 23618 号',
		tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
		url: '/component-AsamTable.html'
	}
];
const tableRowFormatter = (data) => {
	return `${data.cellValue}：表格格式化内容`;
};
const withVNode = (data) => {
	return h(AsamLink, { type: 'primary', href: data.cellValue }, () =>
		h('span', null, data.cellValue)
	);
};
</script>

<style scoped>
p {
	margin: 10px;
	padding: 0;
}

.tag-item + .tag-item {
	margin-left: 5px;
}
</style>

树形数据与懒加载

vue

<template>
	<div class="demo-layout-1">
		<AsamTable
			:data="tableData"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			default-expand-all
		>
			<AsamTableColumn prop="date" label="日期" sortable />
			<AsamTableColumn prop="name" label="姓名" sortable />
			<AsamTableColumn prop="address" label="地址" sortable />
		</AsamTable>

		<AsamTable
			:data="tableData1"
			style="width: 100%"
			row-key="id"
			border
			lazy
			:load="load"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageTreeAndLazyDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

interface User {
	id: number;
	date: string;
	name: string;
	address: string;
	hasChildren?: boolean;
	children?: User[];
}

const load = (row: User, treeNode: unknown, resolve: (data: User[]) => void) => {
	setTimeout(() => {
		resolve([
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]);
	}, 1000);
};

const tableData: User[] = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号',
		children: [
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];

const tableData1: User[] = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		hasChildren: true,
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

vue

<template>
	<div class="demo-layout-1">
		<AsamTable
			:data="tableData"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			default-expand-all
		>
			<AsamTableColumn prop="date" label="日期" sortable />
			<AsamTableColumn prop="name" label="姓名" sortable />
			<AsamTableColumn prop="address" label="地址" sortable />
		</AsamTable>

		<AsamTable
			:data="tableData1"
			style="width: 100%"
			row-key="id"
			border
			lazy
			:load="load"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<AsamTableColumn prop="date" label="日期" />
			<AsamTableColumn prop="name" label="姓名" />
			<AsamTableColumn prop="address" label="地址" />
		</AsamTable>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageTreeAndLazyDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const load = (row, treeNode, resolve) => {
	setTimeout(() => {
		resolve([
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]);
	}, 1000);
};
const tableData = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号',
		children: [
			{
				id: 31,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			},
			{
				id: 32,
				date: '2016-05-01',
				name: '王小虎',
				address: '洛杉矶格罗夫街 189 号'
			}
		]
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];
const tableData1 = [
	{
		id: 1,
		date: '2016-05-02',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 2,
		date: '2016-05-04',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 3,
		date: '2016-05-01',
		name: '王小虎',
		hasChildren: true,
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		id: 4,
		date: '2016-05-03',
		name: '王小虎',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style scoped>
.demo-layout-1 {
	display: grid;
	gap: var(--asam-space-md);
}
</style>

带边框表格

vue

<template>
	<AsamTable :data="tableData" border style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageWithBorderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

vue

<template>
	<AsamTable :data="tableData" border style="width: 100%">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageWithBorderDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

带状态表格

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamTableUsageWithStatusDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';

interface User {
	date: string;
	name: string;
	address: string;
}

const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};

const tableData: User[] = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style>
.el-table .warning-row {
	--el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
	--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

vue

<template>
	<AsamTable :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
		<AsamTableColumn prop="date" label="日期" width="180" />
		<AsamTableColumn prop="name" label="姓名" width="180" />
		<AsamTableColumn prop="address" label="地址" />
	</AsamTable>
</template>

<script setup>
defineOptions({ name: 'AsamTableUsageWithStatusDemo' });
import { AsamTable, AsamTableColumn } from '@asam-ui/ui';
const tableRowClassName = ({ rowIndex }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};
const tableData = [
	{
		date: '2016-05-03',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-02',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-04',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	},
	{
		date: '2016-05-01',
		name: '汤姆',
		address: '洛杉矶格罗夫街 189 号'
	}
];
</script>

<style>
.el-table .warning-row {
	--el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
	--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

实例、类型与边界

公开 API 与下列完整 SFC 来自同一组件入口。TS 和 JS 演示分别提供所有本地依赖文件；类型约束只出现在 TS 中。远程请求与业务持久化由宿主承担。

API

类型 `AsamTableRow`

类型 `AsamTableRowKey`

类型 `AsamTableRowKeyGetter`

(row: Row): AsamTableRowKey

属性 `AsamTableProps`

属性名	说明	类型	默认值
`data`	表数据	`Row[] \| undefined`	`() => []`
`tableLayout`	原生自动或固定布局；追加内容和合计行顺序遵循原生表格。	`enum"auto" \| "fixed"`完整类型：`("auto" \| "fixed") \| undefined`	—
`selectable`	—	`boolean \| undefined`	`false`
`rowKey`	行数据的 Key，用来优化 Table 的渲染；在使用reserve-selection功能与显示树形数据时，该属性是必填的。详情	`string \| AsamTableRowKeyGetter<Row> \| undefined`	`'id'`
`defaultSelectedRowKeys`	—	`AsamTableRowKey[] \| undefined`	`() => []`
`reserveSelection`	—	`boolean \| undefined`	`true`
`loading`	—	`boolean \| undefined`	`false`
`minWidth`	—	`string \| undefined`	`'100%'`
`pagination`	—	`AsamPaginationProps \| undefined`	—
`allowDragLastColumn`	是否允许拖动最后一列	`boolean \| undefined`	`false`
`preserveExpandedContent`	在折叠后是否在DOM中保留展开行内容	`boolean \| undefined`	`false`
`style`	—	`AsamTableProps<Row>["style"]`	`false`
`className`	—	`string \| undefined`	—
`width`	—	`string \| number \| undefined`	—
`height`	table 的高度。默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	`string \| number \| undefined`	—
`maxHeight`	table 的最大高度。合法的值为数字或者单位为 px 的高度。	`string \| number \| undefined`	—
`fit`	列的宽度是否自撑开	`boolean \| undefined`	`false`
`stripe`	是否为斑马纹 table	`boolean \| undefined`	`false`
`border`	是否带有纵向边框	`boolean \| undefined`	`false`
`showHeader`	是否显示表头	`boolean \| undefined`	`false`
`showSummary`	是否在表尾显示合计行	`boolean \| undefined`	`false`
`sumText`	显示摘要行第一列的文本	`string \| undefined`	—
`summaryMethod`	自定义的合计计算方法	`(AsamTableProps<Row>)["summaryMethod"]`	—
`rowClassName`	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	`(AsamTableProps<Row>)["rowClassName"]`	—
`rowStyle`	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	`(AsamTableProps<Row>)["rowStyle"]`	—
`cellClassName`	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	`(AsamTableProps<Row>)["cellClassName"]`	—
`cellStyle`	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	`(AsamTableProps<Row>)["cellStyle"]`	—
`headerRowClassName`	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	`(AsamTableProps<Row>)["headerRowClassName"]`	—
`headerRowStyle`	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	`(AsamTableProps<Row>)["headerRowStyle"]`	—
`headerCellClassName`	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	`(AsamTableProps<Row>)["headerCellClassName"]`	—
`headerCellStyle`	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	`(AsamTableProps<Row>)["headerCellStyle"]`	—
`highlightCurrentRow`	是否要高亮当前行	`boolean \| undefined`	`false`
`currentRowKey`	当前行的 key，只写属性	`string \| number \| undefined`	—
`emptyText`	空数据时显示的文本内容，也可以通过 #empty 设置	`string \| undefined`	`'暂无数据'`
`expandRowKeys`	可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。	`string[] \| undefined`	—
`defaultExpandAll`	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	`boolean \| undefined`	`false`
`rowExpandable`	启用可展开行，当表格具有 type="expand" 列时有效	`(AsamTableProps<Row>)["rowExpandable"]`	—
`defaultSort`	默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序	`AsamTableSort \| undefined`	—
`tooltipEffect`	溢出的 tooltip 的 effect	`string \| undefined`	—
`tooltipOptions`	溢出提示配置，参阅提示组件参数。	`(AsamTableProps<Row>)["tooltipOptions"]`	—
`spanMethod`	合并行或列的计算方法	`(AsamTableProps<Row>)["spanMethod"]`	—
`selectOnIndeterminate`	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	`boolean \| undefined`	`false`
`indent`	展示树形数据时，树节点的缩进	`number \| undefined`	—
`treeProps`	渲染嵌套数据的配置选项	`(AsamTableProps<Row>)["treeProps"]`	—
`lazy`	是否懒加载子节点数据	`boolean \| undefined`	`false`
`load`	加载子节点数据的函数，lazy 为 true 时生效	`(AsamTableProps<Row>)["load"]`	—
`scrollbarAlwaysOn`	总是显示滚动条	`boolean \| undefined`	`false`
`flexible`	确保主轴的最小尺寸，以便不超过内容	`boolean \| undefined`	`false`
`showOverflowTooltip`	是否隐藏溢出内容并在悬停单元格时显示提示，作用于全部列。	`(AsamTableProps<Row>)["showOverflowTooltip"]`	`false`
`tooltipFormatter`	格式化单元格提示内容的函数，show-overflow-tooltip 为 true 时生效。	`(AsamTableProps<Row>)["tooltipFormatter"]`	—
`appendFilterPanelTo`	挂载到哪个 DOM 元素	`string \| undefined`	—
`scrollbarTabindex`	body 的滚动条的包裹容器 tabindex	`string \| number \| undefined`	—
`nativeScrollbar`	是否使用原生滚动条样式	`boolean \| undefined`	`false`
`size`	Table 的尺寸	`enum"large" \| "big" \| "default" \| "small"`完整类型：`AsamControlSize \| undefined`	—

事件 `AsamTableEmits`

属性名	说明	类型	默认值
`select`	—	`[selection: Row[], row: Row]`	—
`select-all`	—	`[selection: Row[]]`	—
`selection-change`	—	`[selection: Row[]]`	—
`cell-mouse-enter`	—	`[row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent]`	—
`cell-mouse-leave`	—	`[row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent]`	—
`cell-contextmenu`	—	`[row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: PointerEvent]`	—
`cell-click`	—	`[row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: PointerEvent]`	—
`cell-dblclick`	—	`[row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent]`	—
`row-click`	—	`[row: Row, column: AsamTableColumnCtx<Row> \| null, event: PointerEvent]`	—
`row-contextmenu`	—	`[row: Row, column: AsamTableColumnCtx<Row> \| null, event: PointerEvent]`	—
`row-dblclick`	—	`[row: Row, column: AsamTableColumnCtx<Row> \| null, event: MouseEvent]`	—
`header-click`	—	`[column: AsamTableColumnCtx<Row>, event: PointerEvent]`	—
`header-contextmenu`	—	`[column: AsamTableColumnCtx<Row>, event: PointerEvent]`	—
`sort-change`	—	`[sort: { column: AsamTableColumnCtx<Row>; prop: string \| null; order: "ascending" \| "descending" \| null; }]`	—
`filter-change`	—	`[filters: Record<string, string[]>]`	—
`current-change`	—	`[currentRow: Row \| null, oldCurrentRow: Row \| null]`	—
`header-dragend`	—	`[newWidth: number, oldWidth: number, column: AsamTableColumnCtx<Row>, event: MouseEvent]`	—
`expand-change`	—	`[row: Row, expanded: boolean \| Row[]]`	—
`scroll`	—	`[position: { scrollLeft: number; scrollTop: number; }]`	—
`page-change`	—	`[page: number]`	—
`page-size-change`	—	`[pageSize: number]`	—

插槽 `AsamTableSlots`

属性名	说明	类型	默认值
`default`	—	`(() => unknown) \| undefined`	—
`append`	原生追加插槽；布局及合计行顺序遵循固定上游版本。	`(() => unknown) \| undefined`	—
`empty`	—	`(() => unknown) \| undefined`	—
`toolbar`	—	`((props: { selection: Row[]; }) => unknown) \| undefined`	—

实例方法与状态 `AsamTableExpose`

属性名	说明	类型	默认值
`sort`	手动排序表格。参数 prop 属性指定排序列，order 指定排序顺序。	`(prop: string, order: string) => void`	—
`context`	—	`(AsamTableExpose<Row>)["context"]`	—
`tableLayout`	—	`enum"auto" \| "fixed"`完整类型：`"auto" \| "fixed"`	—
`allowDragLastColumn`	是否允许拖动最后一列	`boolean`	—
`ns`	—	`(AsamTableExpose<Row>)["ns"]`	—
`layout`	—	`(AsamTableExpose<Row>)["layout"]`	—
`store`	—	`(AsamTableExpose<Row>)["store"]`	—
`columns`	—	`(AsamTableExpose<Row>)["columns"]`	—
`handleMouseLeave`	—	`() => void`	—
`tableId`	—	`string`	—
`tableSize`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`"" \| "large" \| "default" \| "small"`	—
`isHidden`	—	`boolean`	—
`isEmpty`	—	`boolean`	—
`renderExpanded`	—	`(AsamTableExpose<Row>)["renderExpanded"]`	—
`resizeProxyVisible`	—	`boolean`	—
`resizeState`	—	`{ width: null \| number; height: null \| number; headerHeight: null \| number; }`	—
`isGroup`	—	`boolean`	—
`bodyWidth`	—	`string`	—
`tableBodyStyles`	—	`{ width: string; }`	—
`emptyBlockStyle`	—	`{ width: string; height: string; } \| undefined`	—
`debouncedUpdateLayout`	—	`(AsamTableExpose<Row>)["debouncedUpdateLayout"]`	—
`setCurrentRow`	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	`(AsamTableExpose<Row>)["setCurrentRow"]`	—
`getSelectionRows`	返回当前选中的行	`(AsamTableExpose<Row>)["getSelectionRows"]`	—
`getHalfSelectionRows`	返回当前半选中的行	`(AsamTableExpose<Row>)["getHalfSelectionRows"]`	—
`toggleRowSelection`	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否	`(AsamTableExpose<Row>)["toggleRowSelection"]`	—
`clearSelection`	用于多选表格，清空用户的选择	`() => void`	—
`clearFilter`	传入由columnKey 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器	`(columnKeys?: string[] \| string) => void`	—
`toggleAllSelection`	用于多选表格，切换全选和全不选	`() => void`	—
`toggleRowExpansion`	用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。	`(AsamTableExpose<Row>)["toggleRowExpansion"]`	—
`clearSort`	用于清空排序条件，数据会恢复成未排序的状态	`() => void`	—
`doLayout`	对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局	`() => void`	—
`updateKeyChildren`	适用于 lazy Table, 需要设置 rowKey, 更新 key children	`(AsamTableExpose<Row>)["updateKeyChildren"]`	—
`t`	—	`AsamTableExpose<Row>["t"]`	—
`setDragVisible`	—	`(visible: boolean) => void`	—
`computedSumText`	—	`string`	—
`computedEmptyText`	—	`string`	—
`computedTooltipEffect`	—	`string \| undefined`	—
`computedTooltipOptions`	—	`(AsamTableExpose<Row>)["computedTooltipOptions"]`	—
`scrollbarViewStyle`	—	`{ display: string; verticalAlign: string; }`	—
`scrollbarStyle`	—	`{ height: string; maxHeight?: undefined; } \| { maxHeight: string; height?: undefined; } \| { height?: undefined; maxHeight?: undefined; }`	—
`scrollTo`	滚动到一组特定坐标	`(options: ScrollToOptions \| number, yCoord?: number) => void`	—
`setScrollLeft`	设置水平滚动位置	`(left?: number) => void`	—
`setScrollTop`	设置垂直滚动位置	`(top?: number) => void`	—
`scrollBarRef`	—	`(AsamTableExpose<Row>)["scrollBarRef"]`	—
`handleHeaderFooterMousewheel`	—	`(event: WheelEvent, delta: { pixelX: number; pixelY: number; }) => void`	—
`getSelection`	—	`() => Row[]`	—

类型 `AsamTableInstance`

属性名	说明	类型	默认值
`sort`	手动排序表格。参数 prop 属性指定排序列，order 指定排序顺序。	`(prop: string, order: string) => void`	—
`context`	—	`(AsamTableInstance<Row>)["context"]`	—
`tableLayout`	—	`enum"auto" \| "fixed"`完整类型：`"auto" \| "fixed"`	—
`allowDragLastColumn`	是否允许拖动最后一列	`boolean`	—
`ns`	—	`(AsamTableInstance<Row>)["ns"]`	—
`layout`	—	`(AsamTableInstance<Row>)["layout"]`	—
`store`	—	`(AsamTableInstance<Row>)["store"]`	—
`columns`	—	`(AsamTableInstance<Row>)["columns"]`	—
`handleMouseLeave`	—	`() => void`	—
`tableId`	—	`string`	—
`tableSize`	—	`enum"" \| "large" \| "default" \| "small"`完整类型：`"" \| "large" \| "default" \| "small"`	—
`isHidden`	—	`boolean`	—
`isEmpty`	—	`boolean`	—
`renderExpanded`	—	`(AsamTableInstance<Row>)["renderExpanded"]`	—
`resizeProxyVisible`	—	`boolean`	—
`resizeState`	—	`{ width: null \| number; height: null \| number; headerHeight: null \| number; }`	—
`isGroup`	—	`boolean`	—
`bodyWidth`	—	`string`	—
`tableBodyStyles`	—	`{ width: string; }`	—
`emptyBlockStyle`	—	`{ width: string; height: string; } \| undefined`	—
`debouncedUpdateLayout`	—	`(AsamTableInstance<Row>)["debouncedUpdateLayout"]`	—
`setCurrentRow`	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	`(AsamTableInstance<Row>)["setCurrentRow"]`	—
`getSelectionRows`	返回当前选中的行	`(AsamTableInstance<Row>)["getSelectionRows"]`	—
`getHalfSelectionRows`	返回当前半选中的行	`(AsamTableInstance<Row>)["getHalfSelectionRows"]`	—
`toggleRowSelection`	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否	`(AsamTableInstance<Row>)["toggleRowSelection"]`	—
`clearSelection`	用于多选表格，清空用户的选择	`() => void`	—
`clearFilter`	传入由columnKey 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器	`(columnKeys?: string[] \| string) => void`	—
`toggleAllSelection`	用于多选表格，切换全选和全不选	`() => void`	—
`toggleRowExpansion`	用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。	`(AsamTableInstance<Row>)["toggleRowExpansion"]`	—
`clearSort`	用于清空排序条件，数据会恢复成未排序的状态	`() => void`	—
`doLayout`	对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局	`() => void`	—
`updateKeyChildren`	适用于 lazy Table, 需要设置 rowKey, 更新 key children	`(AsamTableInstance<Row>)["updateKeyChildren"]`	—
`t`	—	`AsamTableInstance<Row>["t"]`	—
`setDragVisible`	—	`(visible: boolean) => void`	—
`computedSumText`	—	`string`	—
`computedEmptyText`	—	`string`	—
`computedTooltipEffect`	—	`string \| undefined`	—
`computedTooltipOptions`	—	`(AsamTableInstance<Row>)["computedTooltipOptions"]`	—
`scrollbarViewStyle`	—	`{ display: string; verticalAlign: string; }`	—
`scrollbarStyle`	—	`{ height: string; maxHeight?: undefined; } \| { maxHeight: string; height?: undefined; } \| { height?: undefined; maxHeight?: undefined; }`	—
`scrollTo`	滚动到一组特定坐标	`(options: ScrollToOptions \| number, yCoord?: number) => void`	—
`setScrollLeft`	设置水平滚动位置	`(left?: number) => void`	—
`setScrollTop`	设置垂直滚动位置	`(top?: number) => void`	—
`scrollBarRef`	—	`(AsamTableInstance<Row>)["scrollBarRef"]`	—
`handleHeaderFooterMousewheel`	—	`(event: WheelEvent, delta: { pixelX: number; pixelY: number; }) => void`	—
`getSelection`	—	`() => Row[]`	—

类型 `AsamTableCellCls`

类型 `AsamTableCellStyle`

类型 `AsamTableColumnCls`

类型 `AsamTableColumnStyle`

类型 `AsamTableFilter`

属性名	说明	类型	默认值
`column`	—	`AsamTableColumnCtx<T>`	—
`values`	—	`string[]`	—
`silent`	—	`any`	—

类型 `AsamTableRenderRowData`

属性名	说明	类型	默认值
`store`	—	`(AsamTableRenderRowData<T>)["store"]`	—
`_self`	—	`AsamTableContext<T>`	—
`column`	—	`AsamTableColumnCtx<T>`	—
`row`	—	`T`	—
`$index`	—	`number`	—
`cellIndex`	—	`number`	—
`treeNode`	—	`AsamTableTreeNode \| undefined`	—
`expanded`	—	`boolean`	—

类型 `AsamTableSort`

属性名	说明	类型	默认值
`prop`	—	`string`	—
`order`	—	`enum"ascending" \| "descending"`完整类型：`AsamTableSort["order"]`	—
`init`	—	`any`	—
`silent`	—	`any`	—

类型 `AsamTableSummaryMethod`

(data: { columns: AsamTableColumnCtx<T>[]; data: T[]; }): (string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>)[]

类型 `AsamTableContext`

属性名	说明	类型	默认值
`$ready`	—	`boolean`	—
`hoverState`	—	`(AsamTableContext<T>)["hoverState"]`	—
`renderExpanded`	—	`(AsamTableContext<T>)["renderExpanded"]`	—
`store`	—	`(AsamTableContext<T>)["store"]`	—
`layout`	—	`(AsamTableContext<T>)["layout"]`	—
`refs`	—	`AsamTableRefs`	—
`tableId`	—	`string`	—
`state`	—	`AsamTableContext<T>["state"]`	—
`emit`	—	`AsamTableNativeEmits<T>`	—
`effect`	渲染副作用实例。	`ReactiveEffect<any>`	—
`data`	—	`AsamTableV2Expose["$refs"]`	—
`uid`	—	`number`	—
`type`	—	`ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any>`	—
`parent`	—	`AsamTableV2Expose["$"] \| null`	—
`root`	—	`AsamTableV2Expose["$"]`	—
`appContext`	—	`AsamTableContext<T>["appContext"]`	—
`vnode`	父虚拟 DOM 中代表当前组件的 VNode。	`VNode<RendererNode, RendererElement, { [key: string]: any; }>`	—
`subTree`	当前组件自身虚拟 DOM 树的根 VNode。	`VNode<RendererNode, RendererElement, { [key: string]: any; }>`	—
`update`	强制更新渲染副作用。	`() => void`	—
`job`	交给调度器的渲染任务，会检查是否需要更新。	`AsamTableContext<T>["job"]`	—
`proxy`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`exposed`	—	`Record<string, any> \| null`	—
`exposeProxy`	—	`Record<string, any> \| null`	—
`props`	—	`AsamTableV2Expose["$refs"]`	—
`attrs`	—	`AsamTableV2Expose["$refs"]`	—
`slots`	—	`AsamTableContext<T>["slots"]`	—
`isMounted`	—	`boolean`	—
`isUnmounted`	—	`boolean`	—
`isDeactivated`	—	`boolean`	—

类型 `AsamTableColumnCtx`

属性名	说明	类型	默认值
`id`	—	`string`	—
`realWidth`	—	`number \| null`	—
`type`	—	`string`	—
`label`	—	`string`	—
`className`	—	`string`	—
`labelClassName`	—	`string`	—
`property`	—	`string`	—
`prop`	—	`string`	—
`width`	—	`string \| number \| undefined`	—
`minWidth`	—	`string \| number`	—
`renderHeader`	—	`(AsamTableColumnCtx<T>)["renderHeader"]`	—
`sortable`	—	`string \| boolean`	—
`sortMethod`	—	`(a: T, b: T) => number`	—
`sortBy`	—	`string \| string[] \| ((row: T, index: number, array?: T[]) => string)`	—
`resizable`	—	`boolean`	—
`columnKey`	—	`string`	—
`rawColumnKey`	—	`string`	—
`align`	—	`string`	—
`headerAlign`	—	`string`	—
`showOverflowTooltip`	—	`(AsamTableColumnCtx<T>)["showOverflowTooltip"]`	—
`tooltipFormatter`	—	`AsamTableOverflowTooltipFormatter<T> \| undefined`	—
`fixed`	—	`string \| boolean`	—
`formatter`	—	`(row: T, column: AsamTableColumnCtx<T>, cellValue: any, index: number) => VNode \| string`	—
`selectable`	—	`(row: T, index: number) => boolean`	—
`reserveSelection`	—	`boolean`	—
`filterMethod`	—	`(AsamTableColumnCtx<T>)["filterMethod"]`	—
`filteredValue`	—	`string[]`	—
`filters`	—	`AsamTableColumnCtx<T>["filters"]`	—
`filterPlacement`	—	`string`	—
`filterMultiple`	—	`boolean`	—
`filterClassName`	—	`string`	—
`index`	—	`number \| ((index: number) => number)`	—
`sortOrders`	—	`(AsamTableSort["order"] \| null)[]`	—
`renderCell`	—	`(data: any) => VNode \| VNode[]`	—
`colSpan`	—	`number`	—
`rowSpan`	—	`number`	—
`children`	—	`AsamTableColumnCtx<T>[] \| undefined`	—
`level`	—	`number`	—
`filterable`	—	`(AsamTableColumnCtx<T>)["filterable"]`	—
`order`	—	`enum"ascending" \| "descending"`完整类型：`AsamTableSort["order"] \| null`	—
`isColumnGroup`	—	`boolean`	—
`isSubColumn`	—	`boolean`	—
`columns`	—	`AsamTableColumnCtx<T>[]`	—
`getColumnIndex`	—	`() => number`	—
`no`	—	`number`	—
`filterOpened`	—	`boolean \| undefined`	—
`renderFilterIcon`	—	`((scope: any) => VNode) \| undefined`	—
`renderExpand`	—	`((scope: any) => VNode) \| undefined`	—

类型 `AsamTableConfigContext`

属性名	说明	类型	默认值
`showOverflowTooltip`	—	`(AsamTableConfigContext)["showOverflowTooltip"]`	—
`tooltipEffect`	—	`string \| undefined`	—
`tooltipOptions`	—	`(AsamTableConfigContext)["tooltipOptions"]`	—
`tooltipFormatter`	—	`AsamTableOverflowTooltipFormatter<any> \| undefined`	—

类型 `AsamTableRefs`

属性名	说明	类型	默认值
`tableWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`headerWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`footerWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`fixedBodyWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`rightFixedBodyWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`bodyWrapper`	—	`AsamTableRefs["tableWrapper"]`	—
`appendWrapper`	—	`AsamTableRefs["tableWrapper"]`	—

类型 `AsamTableTooltipData`

属性名	说明	类型	默认值
`row`	—	`T`	—
`column`	—	`AsamTableColumnCtx<T>`	—
`cellValue`	—	`any`	—

类型 `AsamTableTreeNode`

属性名	说明	类型	默认值
`expanded`	—	`boolean \| undefined`	—
`loading`	—	`boolean \| undefined`	—
`noLazyChildren`	—	`boolean \| undefined`	—
`indent`	—	`number \| undefined`	—
`level`	—	`number \| undefined`	—
`display`	—	`boolean \| undefined`	—

用法与契约补充说明

默认选中遍历 treeProps.children（默认 children）的所有后代，支持嵌套字符串与函数 row-key；懒加载 resolve 后继续应用默认意图，公开 updateKeyChildren 更新已记录子节点。用户清除、单行取消、全选清除或关联父行取消后，无关数据刷新不会恢复被取消的默认后代。完整 tree-defaults 示例包含自定义 nodes、静态后代与延迟解析子节点，宿主取消自有计时器。

参数与事件补充说明

AsamTableRow 公开类型视图

import type { AsamTableRow } from '@asam-ui/ui';

// AsamTableRow
type PublicContract = AsamTableRow;

组合契约按分支生效；请同时查看公开类型。

AsamTableRowKey 公开类型视图

import type { AsamTableRowKey } from '@asam-ui/ui';

// AsamTableRowKey
type PublicContract = AsamTableRowKey;

AsamTableRowKeyGetter 公开类型视图

import type { AsamTableRowKeyGetter, AsamTableRowKey } from '@asam-ui/ui';

// AsamTableRowKeyGetter
type PublicContract<Row extends object = object> = {
	(row: Row): AsamTableRowKey;
};

完整表格契约，并保留 ASAM 选择、页脚与加载扩展。

参数与事件说明

`data`

必填：否；声明来源：ASAM 声明。

默认值与来源

() => []（源码表达式；ASAM 声明）

`tableLayout`

必填：否；声明来源：ASAM 声明。

tableLayout 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："auto" / "fixed"

默认值与来源

未知 / 未声明

固定上游文档默认：fixed（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'fixed'（2.14.7；源码事实，未作为 ASAM 运行实测）

`selectable`

必填：否；声明来源：ASAM 声明。

必填：否；声明来源：ASAM 声明。

reserveSelection 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

true（源码表达式；ASAM 声明）

`loading`

必填：否；声明来源：ASAM 声明。

loading 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（源码表达式；ASAM 声明）

`minWidth`

必填：否；声明来源：ASAM 声明。

默认值与来源

'100%'（源码表达式；ASAM 声明）

`pagination`

必填：否；声明来源：ASAM 声明。

pagination 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

pagination.small: boolean | undefined — 上游声明
枚举：false / true
pagination.popperClass: AsamTableOverflowTooltipOptions["className"] — 上游声明
枚举：false
pagination.popperStyle: AsamTableProps<Row>["style"] — 上游声明
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
pagination.teleported: PublicMember<NonNullable<AsamPaginationProps | undefined>, "teleported"> — 上游声明
枚举：false / true
pagination.disabled: boolean | undefined — 上游声明
枚举：false / true
pagination.layout: string | undefined — 上游声明
pagination.total: number | undefined — 上游声明
pagination.currentPage: number | undefined — 上游声明
pagination.pageSize: number | undefined — 上游声明
pagination.defaultPageSize: number | undefined — 上游声明
pagination.pageCount: number | undefined — 上游声明
pagination.pagerCount: number | undefined — 上游声明
pagination.defaultCurrentPage: number | undefined — 上游声明
pagination.pageSizes: number[] | undefined — 上游声明
pagination.prevText: string | undefined — 上游声明
pagination.prevIcon: PublicMember<NonNullable<AsamPaginationProps | undefined>, "prevIcon"> — 上游声明
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamPaginationProps | undefined>, "prevIcon">>, (...args: never[]) => unknown>>[1]): any
- pagination.prevIcon.__isFragment: undefined — 依赖声明
- pagination.prevIcon.__isTeleport: undefined — 依赖声明
- pagination.prevIcon.__isSuspense: undefined — 依赖声明
pagination.nextText: string | undefined — 上游声明
pagination.nextIcon: PublicMember<NonNullable<AsamPaginationProps | undefined>, "nextIcon"> — 上游声明
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamPaginationProps | undefined>, "nextIcon">>, (...args: never[]) => unknown>>[1]): any
- pagination.nextIcon.__isFragment: undefined — 依赖声明
- pagination.nextIcon.__isTeleport: undefined — 依赖声明
- pagination.nextIcon.__isSuspense: undefined — 依赖声明
pagination.background: boolean | undefined — 上游声明
枚举：false / true
pagination.hideOnSinglePage: boolean | undefined — 上游声明
枚举：false / true
pagination.appendSizeTo: string | undefined — 上游声明
pagination.size: AsamControlSize | undefined — ASAM 声明
枚举："large" / "big" / "default" / "small"

`allowDragLastColumn`

必填：否；声明来源：ASAM 声明。

allowDragLastColumn 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

`preserveExpandedContent`

必填：否；声明来源：ASAM 声明。

preserveExpandedContent 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

`style`

必填：否；声明来源：上游声明。

style 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）

`className`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`width`

固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）

`showSummary`

必填：否；声明来源：上游声明。

showSummary 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`rowClassName`

必填：否；声明来源：上游声明。

rowClassName 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["rowClassName"]>, (...args: never[]) => unknown>>[0]): string

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`rowStyle`

必填：否；声明来源：上游声明。

rowStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["rowStyle"]>, (...args: never[]) => unknown>>[0]): AsamTableV2HeaderCellSlotProps["style"]

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`cellClassName`

必填：否；声明来源：上游声明。

cellClassName 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["cellClassName"]>, (...args: never[]) => unknown>>[0]): string

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`cellStyle`

必填：否；声明来源：上游声明。

cellStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["cellStyle"]>, (...args: never[]) => unknown>>[0]): AsamTableV2HeaderCellSlotProps["style"]

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`headerRowClassName`

必填：否；声明来源：上游声明。

headerRowClassName 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["headerRowClassName"]>, (...args: never[]) => unknown>>[0]): string

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`headerRowStyle`

必填：否；声明来源：上游声明。

headerRowStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["headerRowStyle"]>, (...args: never[]) => unknown>>[0]): AsamTableV2HeaderCellSlotProps["style"]

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`headerCellClassName`

必填：否；声明来源：上游声明。

headerCellClassName 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["headerCellClassName"]>, (...args: never[]) => unknown>>[0]): string

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`headerCellStyle`

必填：否；声明来源：上游声明。

headerCellStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["headerCellStyle"]>, (...args: never[]) => unknown>>[0]): AsamTableV2HeaderCellSlotProps["style"]

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`highlightCurrentRow`

必填：否；声明来源：上游声明。

highlightCurrentRow 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`rowExpandable`

必填：否；声明来源：上游声明。

rowExpandable 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(row: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["rowExpandable"]>, (...args: never[]) => unknown>>[0], index: number): boolean

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`defaultSort`

必填：否；声明来源：上游声明。

defaultSort 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

defaultSort.prop: string — 上游声明
用作初始排序列的属性。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultSort.order: AsamTableSort["order"] — 上游声明
初始排序方向；只有提供 prop 且省略 order 时，默认使用升序。
固定上游文档默认：ascending；条件：已提供 prop，且省略 order。（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
枚举："ascending" / "descending"
defaultSort.init: any — 上游声明
defaultSort.silent: any — 上游声明

固定上游文档默认：^[object]`{ enterable: true, placement: 'top', showArrow: true, hideAfter: 200, popperOptions: { strategy: 'fixed' } }`（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`spanMethod`

必填：否；声明来源：上游声明。

spanMethod 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableProps<Row>)["spanMethod"]>, (...args: never[]) => unknown>>[0]): number[] | { rowspan: number; colspan: number; } | undefined

默认值与来源

未知 / 未声明

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`selectOnIndeterminate`

必填：否；声明来源：上游声明。

selectOnIndeterminate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）

`indent`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游文档默认：16（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：16（2.14.7；源码事实，未作为 ASAM 运行实测）

`treeProps`

必填：否；声明来源：上游声明。

treeProps 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

treeProps.hasChildren: string | undefined — 上游声明
表示存在懒加载子项的行字段名。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂中的字面字段（未执行）：'hasChildren'（2.14.7；源码事实，未作为 ASAM 运行实测）
treeProps.children: string | undefined — 上游声明
包含嵌套子数据的行字段名。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂中的字面字段（未执行）：'children'（2.14.7；源码事实，未作为 ASAM 运行实测）
treeProps.checkStrictly: boolean | undefined — 上游声明
为 true 时父子选择相互独立；为 false 时父子选择关联。
固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂中的字面字段（未执行）：false（2.14.7；源码事实，未作为 ASAM 运行实测）
枚举：false / true

默认值与来源

未知 / 未声明

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）

`tooltipFormatter`

必填：否；声明来源：上游声明。

tooltipFormatter 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

`nativeScrollbar`

必填：否；声明来源：上游声明。

nativeScrollbar 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

`size`

必填：否；声明来源：ASAM 声明。

size 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："large" / "big" / "default" / "small"

AsamTableProps 公开类型视图

import type { VNode } from 'vue';
import type { AsamTableProps, AsamTableRowKeyGetter, AsamTableRowKey, AsamPaginationProps, AsamTableOverflowTooltipOptions, AsamTableV2Props, AsamTableV2Expose, AsamControlSize, AsamTableSummaryMethod, AsamTableColumnCtx, AsamTableColumnCls, AsamTableColumnStyle, AsamTableV2HeaderCellSlotProps, AsamTableCellCls, AsamTableCellStyle, AsamTableSort, AsamTableTreeNode, AsamTableOverflowTooltipFormatter } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamTableProps
type PublicContract<Row extends object = object> = {
	"data"?: Row[] | undefined;
	"tableLayout"?: ("auto" | "fixed") | undefined;
	"selectable"?: boolean | undefined;
	"rowKey"?: string | AsamTableRowKeyGetter<Row> | undefined;
	"defaultSelectedRowKeys"?: AsamTableRowKey[] | undefined;
	"reserveSelection"?: boolean | undefined;
	"loading"?: boolean | undefined;
	"minWidth"?: string | undefined;
	"pagination"?: AsamPaginationProps | undefined;
	"allowDragLastColumn"?: boolean | undefined;
	"preserveExpandedContent"?: boolean | undefined;
	"style"?: AsamTableProps<Row>["style"];
	"className"?: string | undefined;
	"width"?: string | number | undefined;
	"height"?: string | number | undefined;
	"maxHeight"?: string | number | undefined;
	"fit"?: boolean | undefined;
	"stripe"?: boolean | undefined;
	"border"?: boolean | undefined;
	"showHeader"?: boolean | undefined;
	"showSummary"?: boolean | undefined;
	"sumText"?: string | undefined;
	"summaryMethod"?: (AsamTableProps<Row>)["summaryMethod"];
	"rowClassName"?: (AsamTableProps<Row>)["rowClassName"];
	"rowStyle"?: (AsamTableProps<Row>)["rowStyle"];
	"cellClassName"?: (AsamTableProps<Row>)["cellClassName"];
	"cellStyle"?: (AsamTableProps<Row>)["cellStyle"];
	"headerRowClassName"?: (AsamTableProps<Row>)["headerRowClassName"];
	"headerRowStyle"?: (AsamTableProps<Row>)["headerRowStyle"];
	"headerCellClassName"?: (AsamTableProps<Row>)["headerCellClassName"];
	"headerCellStyle"?: (AsamTableProps<Row>)["headerCellStyle"];
	"highlightCurrentRow"?: boolean | undefined;
	"currentRowKey"?: string | number | undefined;
	"emptyText"?: string | undefined;
	"expandRowKeys"?: string[] | undefined;
	"defaultExpandAll"?: boolean | undefined;
	"rowExpandable"?: (AsamTableProps<Row>)["rowExpandable"];
	"defaultSort"?: AsamTableSort | undefined;
	"tooltipEffect"?: string | undefined;
	"tooltipOptions"?: (AsamTableProps<Row>)["tooltipOptions"];
	"spanMethod"?: (AsamTableProps<Row>)["spanMethod"];
	"selectOnIndeterminate"?: boolean | undefined;
	"indent"?: number | undefined;
	"treeProps"?: (AsamTableProps<Row>)["treeProps"];
	"lazy"?: boolean | undefined;
	"load"?: (AsamTableProps<Row>)["load"];
	"scrollbarAlwaysOn"?: boolean | undefined;
	"flexible"?: boolean | undefined;
	"showOverflowTooltip"?: (AsamTableProps<Row>)["showOverflowTooltip"];
	"tooltipFormatter"?: (AsamTableProps<Row>)["tooltipFormatter"];
	"appendFilterPanelTo"?: string | undefined;
	"scrollbarTabindex"?: string | number | undefined;
	"nativeScrollbar"?: boolean | undefined;
	"size"?: AsamControlSize | undefined;
};

参数与事件说明

`page-size-change`

必填：是；声明来源：ASAM 声明。

AsamTableEmits 公开类型视图

import type { AsamTableEmits, AsamTableColumnCtx } from '@asam-ui/ui';

// AsamTableEmits
type PublicContract<Row extends object = object> = {
	"select": [selection: Row[], row: Row];
	"select-all": [selection: Row[]];
	"selection-change": [selection: Row[]];
	"cell-mouse-enter": [row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent];
	"cell-mouse-leave": [row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent];
	"cell-contextmenu": [row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: PointerEvent];
	"cell-click": [row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: PointerEvent];
	"cell-dblclick": [row: Row, column: AsamTableColumnCtx<Row>, cell: HTMLTableCellElement, event: MouseEvent];
	"row-click": [row: Row, column: AsamTableColumnCtx<Row> | null, event: PointerEvent];
	"row-contextmenu": [row: Row, column: AsamTableColumnCtx<Row> | null, event: PointerEvent];
	"row-dblclick": [row: Row, column: AsamTableColumnCtx<Row> | null, event: MouseEvent];
	"header-click": [column: AsamTableColumnCtx<Row>, event: PointerEvent];
	"header-contextmenu": [column: AsamTableColumnCtx<Row>, event: PointerEvent];
	"sort-change": [sort: { column: AsamTableColumnCtx<Row>; prop: string | null; order: "ascending" | "descending" | null; }];
	"filter-change": [filters: Record<string, string[]>];
	"current-change": [currentRow: Row | null, oldCurrentRow: Row | null];
	"header-dragend": [newWidth: number, oldWidth: number, column: AsamTableColumnCtx<Row>, event: MouseEvent];
	"expand-change": [row: Row, expanded: boolean | Row[]];
	"scroll": [position: { scrollLeft: number; scrollTop: number; }];
	"page-change": [page: number];
	"page-size-change": [pageSize: number];
};

事件参数：(props: { selection: Row[]; }): unknown

AsamTableSlots 公开类型视图

import type { AsamTableSlots } from '@asam-ui/ui';

// AsamTableSlots
type PublicContract<Row extends object = object> = {
	"default"?: (() => unknown) | undefined;
	"append"?: (() => unknown) | undefined;
	"empty"?: (() => unknown) | undefined;
	"toolbar"?: ((props: { selection: Row[]; }) => unknown) | undefined;
};

必填：是；声明来源：上游声明。

resizeState 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

resizeState.width: number | null — 上游声明
resizeState.height: number | null — 上游声明
resizeState.headerHeight: number | null — 上游声明

`isGroup`

必填：是；声明来源：上游声明。

isGroup 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`bodyWidth`

必填：是；声明来源：上游声明。

`tableBodyStyles`

必填：是；声明来源：上游声明。

tableBodyStyles 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

tableBodyStyles.width: string — 上游声明

`emptyBlockStyle`

必填：是；声明来源：上游声明。

emptyBlockStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

emptyBlockStyle.width: string — 上游声明
emptyBlockStyle.height: string — 上游声明

`computedSumText`

必填：是；声明来源：上游声明。

`computedEmptyText`

必填：是；声明来源：上游声明。

`computedTooltipEffect`

必填：是；声明来源：上游声明。

`computedTooltipOptions`

必填：是；声明来源：上游声明。

computedTooltipOptions 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`scrollbarViewStyle`

必填：是；声明来源：上游声明。

scrollbarViewStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

scrollbarViewStyle.display: string — 上游声明
scrollbarViewStyle.verticalAlign: string — 上游声明

`scrollbarStyle`

必填：是；声明来源：上游声明。

scrollbarStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

scrollbarStyle.height: string — 上游声明
scrollbarStyle.maxHeight: undefined — 上游声明
scrollbarStyle.maxHeight: string — 上游声明
scrollbarStyle.height: undefined — 上游声明

AsamTableExpose 公开类型视图

import type { VNode, Ref, ReactiveEffect, ConcreteComponent, ComputedOptions, MethodOptions, AppContext, RendererNode, RendererElement, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions } from 'vue';
import type { AsamTableExpose, AsamTableContext, AsamTableRefs, AsamTableColumnCtx, AsamTableV2Props, AsamTableNativeEmits, AsamTableSort, AsamTableV2Expose, AsamTableFilter, AsamTableOverflowTooltipOptions, AsamScrollbarDirection } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamTableExpose
type PublicContract<Row extends object = object> = {
	readonly "sort": (prop: string, order: string) => void;
	readonly "context": (AsamTableExpose<Row>)["context"];
	readonly "tableLayout": "auto" | "fixed";
	readonly "allowDragLastColumn": boolean;
	readonly "ns": (AsamTableExpose<Row>)["ns"];
	readonly "layout": (AsamTableExpose<Row>)["layout"];
	readonly "store": (AsamTableExpose<Row>)["store"];
	readonly "columns": (AsamTableExpose<Row>)["columns"];
	readonly "handleMouseLeave": () => void;
	readonly "tableId": string;
	readonly "tableSize": "" | "large" | "default" | "small";
	readonly "isHidden": boolean;
	readonly "isEmpty": boolean;
	readonly "renderExpanded": (AsamTableExpose<Row>)["renderExpanded"];
	readonly "resizeProxyVisible": boolean;
	readonly "resizeState": { width: null | number; height: null | number; headerHeight: null | number; };
	readonly "isGroup": boolean;
	readonly "bodyWidth": string;
	readonly "tableBodyStyles": { width: string; };
	readonly "emptyBlockStyle": { width: string; height: string; } | undefined;
	readonly "debouncedUpdateLayout": (AsamTableExpose<Row>)["debouncedUpdateLayout"];
	readonly "setCurrentRow": (AsamTableExpose<Row>)["setCurrentRow"];
	readonly "getSelectionRows": (AsamTableExpose<Row>)["getSelectionRows"];
	readonly "getHalfSelectionRows": (AsamTableExpose<Row>)["getHalfSelectionRows"];
	readonly "toggleRowSelection": (AsamTableExpose<Row>)["toggleRowSelection"];
	readonly "clearSelection": () => void;
	readonly "clearFilter": (columnKeys?: string[] | string) => void;
	readonly "toggleAllSelection": () => void;
	readonly "toggleRowExpansion": (AsamTableExpose<Row>)["toggleRowExpansion"];
	readonly "clearSort": () => void;
	readonly "doLayout": () => void;
	readonly "updateKeyChildren": (AsamTableExpose<Row>)["updateKeyChildren"];
	readonly "t": AsamTableExpose<Row>["t"];
	readonly "setDragVisible": (visible: boolean) => void;
	readonly "computedSumText": string;
	readonly "computedEmptyText": string;
	readonly "computedTooltipEffect": string | undefined;
	readonly "computedTooltipOptions": (AsamTableExpose<Row>)["computedTooltipOptions"];
	readonly "scrollbarViewStyle": { display: string; verticalAlign: string; };
	readonly "scrollbarStyle": { height: string; maxHeight?: undefined; } | { maxHeight: string; height?: undefined; } | { height?: undefined; maxHeight?: undefined; };
	readonly "scrollTo": (options: ScrollToOptions | number, yCoord?: number) => void;
	readonly "setScrollLeft": (left?: number) => void;
	readonly "setScrollTop": (top?: number) => void;
	readonly "scrollBarRef": (AsamTableExpose<Row>)["scrollBarRef"];
	readonly "handleHeaderFooterMousewheel": (event: WheelEvent, delta: { pixelX: number; pixelY: number; }) => void;
	"getSelection": () => Row[];
};

resizeState 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

resizeState.width: number | null — 上游声明
resizeState.height: number | null — 上游声明
resizeState.headerHeight: number | null — 上游声明

`isGroup`

必填：是；声明来源：上游声明。

isGroup 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`bodyWidth`

必填：是；声明来源：上游声明。

`tableBodyStyles`

必填：是；声明来源：上游声明。

tableBodyStyles 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

tableBodyStyles.width: string — 上游声明

`emptyBlockStyle`

必填：是；声明来源：上游声明。

emptyBlockStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

emptyBlockStyle.width: string — 上游声明
emptyBlockStyle.height: string — 上游声明

`computedSumText`

必填：是；声明来源：上游声明。

`computedEmptyText`

必填：是；声明来源：上游声明。

`computedTooltipEffect`

必填：是；声明来源：上游声明。

`computedTooltipOptions`

必填：是；声明来源：上游声明。

computedTooltipOptions 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`scrollbarViewStyle`

必填：是；声明来源：上游声明。

scrollbarViewStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

scrollbarViewStyle.display: string — 上游声明
scrollbarViewStyle.verticalAlign: string — 上游声明

`scrollbarStyle`

必填：是；声明来源：上游声明。

scrollbarStyle 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

scrollbarStyle.height: string — 上游声明
scrollbarStyle.maxHeight: undefined — 上游声明
scrollbarStyle.maxHeight: string — 上游声明
scrollbarStyle.height: undefined — 上游声明

AsamTableInstance 公开类型视图

import type { VNode, Ref, ReactiveEffect, ConcreteComponent, ComputedOptions, MethodOptions, AppContext, RendererNode, RendererElement, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions } from 'vue';
import type { AsamTableInstance, AsamTableContext, AsamTableRefs, AsamTableColumnCtx, AsamTableV2Props, AsamTableNativeEmits, AsamTableSort, AsamTableV2Expose, AsamTableFilter, AsamTableOverflowTooltipOptions, AsamScrollbarDirection } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamTableInstance
type PublicContract<Row extends object = object> = {
	readonly "sort": (prop: string, order: string) => void;
	readonly "context": (AsamTableInstance<Row>)["context"];
	readonly "tableLayout": "auto" | "fixed";
	readonly "allowDragLastColumn": boolean;
	readonly "ns": (AsamTableInstance<Row>)["ns"];
	readonly "layout": (AsamTableInstance<Row>)["layout"];
	readonly "store": (AsamTableInstance<Row>)["store"];
	readonly "columns": (AsamTableInstance<Row>)["columns"];
	readonly "handleMouseLeave": () => void;
	readonly "tableId": string;
	readonly "tableSize": "" | "large" | "default" | "small";
	readonly "isHidden": boolean;
	readonly "isEmpty": boolean;
	readonly "renderExpanded": (AsamTableInstance<Row>)["renderExpanded"];
	readonly "resizeProxyVisible": boolean;
	readonly "resizeState": { width: null | number; height: null | number; headerHeight: null | number; };
	readonly "isGroup": boolean;
	readonly "bodyWidth": string;
	readonly "tableBodyStyles": { width: string; };
	readonly "emptyBlockStyle": { width: string; height: string; } | undefined;
	readonly "debouncedUpdateLayout": (AsamTableInstance<Row>)["debouncedUpdateLayout"];
	readonly "setCurrentRow": (AsamTableInstance<Row>)["setCurrentRow"];
	readonly "getSelectionRows": (AsamTableInstance<Row>)["getSelectionRows"];
	readonly "getHalfSelectionRows": (AsamTableInstance<Row>)["getHalfSelectionRows"];
	readonly "toggleRowSelection": (AsamTableInstance<Row>)["toggleRowSelection"];
	readonly "clearSelection": () => void;
	readonly "clearFilter": (columnKeys?: string[] | string) => void;
	readonly "toggleAllSelection": () => void;
	readonly "toggleRowExpansion": (AsamTableInstance<Row>)["toggleRowExpansion"];
	readonly "clearSort": () => void;
	readonly "doLayout": () => void;
	readonly "updateKeyChildren": (AsamTableInstance<Row>)["updateKeyChildren"];
	readonly "t": AsamTableInstance<Row>["t"];
	readonly "setDragVisible": (visible: boolean) => void;
	readonly "computedSumText": string;
	readonly "computedEmptyText": string;
	readonly "computedTooltipEffect": string | undefined;
	readonly "computedTooltipOptions": (AsamTableInstance<Row>)["computedTooltipOptions"];
	readonly "scrollbarViewStyle": { display: string; verticalAlign: string; };
	readonly "scrollbarStyle": { height: string; maxHeight?: undefined; } | { maxHeight: string; height?: undefined; } | { height?: undefined; maxHeight?: undefined; };
	readonly "scrollTo": (options: ScrollToOptions | number, yCoord?: number) => void;
	readonly "setScrollLeft": (left?: number) => void;
	readonly "setScrollTop": (top?: number) => void;
	readonly "scrollBarRef": (AsamTableInstance<Row>)["scrollBarRef"];
	readonly "handleHeaderFooterMousewheel": (event: WheelEvent, delta: { pixelX: number; pixelY: number; }) => void;
	"getSelection": () => Row[];
};

组合契约按分支生效；请同时查看公开类型。

AsamTableCellCls 公开类型视图

import type { AsamTableCellCls } from '@asam-ui/ui';

// AsamTableCellCls
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = AsamTableCellCls<T>;

此辅助类型包含大型基础声明；完整契约见公开类型视图。

组合契约按分支生效；请同时查看公开类型。

AsamTableCellStyle 公开类型视图

import type { AsamTableCellStyle } from '@asam-ui/ui';

// AsamTableCellStyle
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = AsamTableCellStyle<T>;

组合契约按分支生效；请同时查看公开类型。

AsamTableColumnCls 公开类型视图

import type { AsamTableColumnCls } from '@asam-ui/ui';

// AsamTableColumnCls
type PublicContract<T> = AsamTableColumnCls<T>;

此辅助类型包含大型基础声明；完整契约见公开类型视图。

组合契约按分支生效；请同时查看公开类型。

AsamTableColumnStyle 公开类型视图

import type { AsamTableColumnStyle } from '@asam-ui/ui';

// AsamTableColumnStyle
type PublicContract<T> = AsamTableColumnStyle<T>;

参数与事件说明

`column`

必填：是；声明来源：上游声明。

column 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`values`

必填：是；声明来源：上游声明。

values 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`silent`

必填：是；声明来源：上游声明。

AsamTableFilter 公开类型视图

import type { AsamTableFilter, AsamTableColumnCtx, AsamTableV2Props } from '@asam-ui/ui';

// AsamTableFilter
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = {
	"column": AsamTableColumnCtx<T>;
	"values": string[];
	"silent": any;
};

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`row`

必填：是；声明来源：上游声明。

`$index`

必填：是；声明来源：上游声明。

`cellIndex`

必填：是；声明来源：上游声明。

`treeNode`

必填：否；声明来源：上游声明。

treeNode 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

treeNode.expanded: boolean | undefined — 上游声明
枚举：false / true
treeNode.loading: boolean | undefined — 上游声明
枚举：false / true
treeNode.noLazyChildren: boolean | undefined — 上游声明
枚举：false / true
treeNode.indent: number | undefined — 上游声明
treeNode.level: number | undefined — 上游声明
treeNode.display: boolean | undefined — 上游声明
枚举：false / true

`expanded`

必填：是；声明来源：上游声明。

expanded 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

AsamTableRenderRowData 公开类型视图

import type { VNode, Ref, ReactiveEffect, ConcreteComponent, ComputedOptions, MethodOptions, AppContext, RendererNode, RendererElement, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions } from 'vue';
import type { AsamTableRenderRowData, AsamTableContext, AsamTableV2Expose, AsamTableRefs, AsamTableColumnCtx, AsamTableV2Props, AsamTableV2HeaderCellSlotProps, AsamTableNativeEmits, AsamTableSort, AsamTableTreeNode } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamTableRenderRowData
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = {
	"store": (AsamTableRenderRowData<T>)["store"];
	"_self": AsamTableContext<T>;
	"column": AsamTableColumnCtx<T>;
	"row": T;
	"$index": number;
	"cellIndex": number;
	"treeNode"?: AsamTableTreeNode | undefined;
	"expanded": boolean;
};

参数与事件说明

`prop`

必填：是；声明来源：上游声明。

`order`

必填：是；声明来源：上游声明。

order 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："ascending" / "descending"

`init`

必填：否；声明来源：上游声明。

`silent`

必填：否；声明来源：上游声明。

AsamTableSort 公开类型视图

import type { AsamTableSort, AsamTableV2HeaderCellSlotProps, AsamTableV2Props } from '@asam-ui/ui';

// AsamTableSort
type PublicContract = {
	"prop": string;
	"order": AsamTableSort["order"];
	"init"?: any;
	"silent"?: any;
};

AsamTableSummaryMethod 公开类型视图

import type { VNode } from 'vue';
import type { AsamTableSummaryMethod, AsamTableColumnCtx } from '@asam-ui/ui';

// AsamTableSummaryMethod
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = {
	(data: { columns: AsamTableColumnCtx<T>[]; data: T[]; }): (string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>)[];
};

参数与事件说明

`$ready`

必填：是；声明来源：上游声明。

$ready 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`hoverState`

必填：否；声明来源：上游声明。

hoverState 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

hoverState.cell: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
hoverState.column: AsamTableColumnCtx<T> — 上游声明
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
hoverState.row: T — 上游声明

`renderExpanded`

必填：是；声明来源：上游声明。

renderExpanded 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(__0: Parameters<Extract<NonNullable<(AsamTableContext<T>)["renderExpanded"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[] | undefined

`store`

必填：是；声明来源：上游声明。

store 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`layout`

必填：是；声明来源：上游声明。

layout 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

layout.observers: (NonNullable<(AsamTableContext<T>)["layout"]>)["observers"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.table: AsamTableContext<T> — 上游声明
- layout.table.$ready: boolean — 上游声明
  枚举：false / true
- layout.table.hoverState: AsamTableContext<T>["hoverState"] — 上游声明
  - layout.table.hoverState.cell: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.hoverState.column: AsamTableColumnCtx<T> — 上游声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.hoverState.row: T — 上游声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- layout.table.renderExpanded: AsamTableContext<T>["renderExpanded"] — 上游声明
  事件参数：(__0: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(AsamTableContext<T>)["layout"]>)["table"]>)["renderExpanded"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[] | undefined
- layout.table.store: AsamTableContext<T>["store"] — 上游声明
  嵌套展开边界：大型实例类型；完整类型见公开类型视图。
- layout.table.layout: AsamTableContext<T>["layout"] — 上游声明
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- layout.table.refs: AsamTableRefs — 上游声明
  - layout.table.refs.tableWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.headerWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.footerWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.fixedBodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.rightFixedBodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.bodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.refs.appendWrapper: AsamTableRefs["tableWrapper"] — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.tableId: string — 上游声明
- layout.table.state: AsamTableContext<T>["state"] — 上游声明
  - layout.table.state.isGroup: Ref<boolean, boolean> — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.state.resizeState: Ref<{ width: any; height: any; }, { width: any; height: any; }> — 上游声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.state.doLayout: () => void — 上游声明
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.state.debouncedUpdateLayout: () => void — 上游声明
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- layout.table.emit: AsamTableNativeEmits<T> — 上游声明
  事件参数：(e: "select", selection: T[], row: T): void
  事件参数：(e: "select-all", selection: T[]): void
  事件参数：(e: "selection-change", newSelection: T[]): void
  事件参数：(e: "cell-mouse-enter" | "cell-mouse-leave" | "cell-dblclick", row: T, column: AsamTableColumnCtx<T>, cell: HTMLTableCellElement, event: MouseEvent): void
  事件参数：(e: "cell-contextmenu" | "cell-click", row: T, column: AsamTableColumnCtx<T>, cell: HTMLTableCellElement, event: PointerEvent): void
  事件参数：(e: "row-dblclick", row: T, column: AsamTableColumnCtx<T> | null, event: MouseEvent): void
  事件参数：(e: "row-click" | "row-contextmenu", row: T, column: AsamTableColumnCtx<T> | null, event: PointerEvent): void
  事件参数：(e: "header-click" | "header-contextmenu", column: AsamTableColumnCtx<T>, event: PointerEvent): void
  事件参数：(e: "sort-change", data: { column: AsamTableColumnCtx<T>; prop: string | null; order: AsamTableSort["order"] | null; }): void
  事件参数：(e: "filter-change", newFilters: Record<string, string[]>): void
  事件参数：(e: "current-change", currentRow: T | null, oldCurrentRow: T | null): void
  事件参数：(e: "header-dragend", newWidth: number, oldWidth: number, column: AsamTableColumnCtx<T>, event: MouseEvent): void
  事件参数：(e: "expand-change", row: T, expandedRows: T[]): void
  事件参数：(e: "expand-change", row: T, expanded: boolean): void
  事件参数：(e: "scroll", data: { scrollLeft: number; scrollTop: number; }): void
- layout.table.effect: ReactiveEffect<any> — 依赖声明
  渲染副作用实例。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.data: AsamTableV2Expose["$refs"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.uid: number — 依赖声明
- layout.table.type: ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any> — 依赖声明
  事件参数：(props: {}, ctx: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(AsamTableContext<T>)["layout"]>)["table"]>)["type"]>, (...args: never[]) => unknown>>[1]): any
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.parent: AsamTableV2Expose["$"] | null — 依赖声明
  - layout.table.parent.uid: number — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.type: ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any> — 依赖声明
    事件参数：(props: {}, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<(NonNullable<(NonNullable<(AsamTableContext<T>)["layout"]>)["table"]>)["parent"]>, "type">>, (...args: never[]) => unknown>>[1]): any
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.parent: AsamTableV2Expose["$"] | null — 依赖声明
    嵌套展开边界：递归引用；完整类型见公开类型视图。
  - layout.table.parent.root: AsamTableV2Expose["$"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.appContext: AsamTableContext<T>["appContext"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
    父虚拟 DOM 中代表当前组件的 VNode。
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.subTree: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
    当前组件自身虚拟 DOM 树的根 VNode。
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.effect: ReactiveEffect<any> — 依赖声明
    渲染副作用实例。
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.update: () => void — 依赖声明
    强制更新渲染副作用。
    事件参数：(): void
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.job: AsamTableContext<T>["job"] — 依赖声明
    交给调度器的渲染任务，会检查是否需要更新。
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.proxy: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.exposed: Record<string, any> | null — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.exposeProxy: Record<string, any> | null — 依赖声明
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.data: AsamTableV2Expose["$refs"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.props: AsamTableV2Expose["$refs"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.attrs: AsamTableV2Expose["$refs"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.slots: AsamTableContext<T>["slots"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.refs: AsamTableV2Expose["$refs"] — 依赖声明
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.emit: (event: string, ...args: any[]) => void — 依赖声明
    事件参数：(event: string, ...args: any[]): void
    嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
  - layout.table.parent.isMounted: boolean — 依赖声明
    枚举：false / true
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.isUnmounted: boolean — 依赖声明
    枚举：false / true
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - layout.table.parent.isDeactivated: boolean — 依赖声明
    枚举：false / true
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- layout.table.root: AsamTableV2Expose["$"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.appContext: AsamTableContext<T>["appContext"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
  父虚拟 DOM 中代表当前组件的 VNode。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.subTree: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
  当前组件自身虚拟 DOM 树的根 VNode。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.update: () => void — 依赖声明
  强制更新渲染副作用。
  事件参数：(): void
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.job: AsamTableContext<T>["job"] — 依赖声明
  交给调度器的渲染任务，会检查是否需要更新。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.proxy: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null — 依赖声明
- layout.table.exposed: Record<string, any> | null — 依赖声明
- layout.table.exposeProxy: Record<string, any> | null — 依赖声明
- layout.table.props: AsamTableV2Expose["$refs"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.attrs: AsamTableV2Expose["$refs"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.slots: AsamTableContext<T>["slots"] — 依赖声明
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- layout.table.isMounted: boolean — 依赖声明
  枚举：false / true
- layout.table.isUnmounted: boolean — 依赖声明
  枚举：false / true
- layout.table.isDeactivated: boolean — 依赖声明
  枚举：false / true
layout.store: AsamTableContext<T>["store"] — 上游声明
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
layout.columns: AsamTableColumnCtx<T>[] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.fit: boolean — 上游声明
枚举：false / true
layout.showHeader: boolean — 上游声明
枚举：false / true
layout.heightMap: Record<string, string | number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.height: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.scrollX: Ref<boolean, boolean> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.scrollY: Ref<boolean, boolean> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.bodyWidth: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.fixedWidth: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.rightFixedWidth: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.tableHeight: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.headerHeight: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.appendHeight: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.footerHeight: Ref<number | null, number | null> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
layout.gutterWidth: number — 上游声明
layout.updateScrollY: () => boolean — 上游声明
事件参数：(): boolean
layout.setHeight: (value: string | number | null, prop?: string) => void — 上游声明
事件参数：(value: string | number | null, prop?: string | undefined): void
layout.setMaxHeight: (value: string | number | null) => void — 上游声明
事件参数：(value: string | number | null): void
layout.getFlattenColumns: () => AsamTableColumnCtx<T>[] — 上游声明
事件参数：(): AsamTableColumnCtx<T>[]
layout.updateElsHeight: () => void — 上游声明
事件参数：(): void
layout.headerDisplayNone: (elm: AsamTableRefs["tableWrapper"]) => boolean — 上游声明
事件参数：(elm: AsamTableRefs["tableWrapper"]): boolean
layout.updateColumnsWidth: () => void — 上游声明
事件参数：(): void
layout.addObserver: (NonNullable<(AsamTableContext<T>)["layout"]>)["addObserver"] — 上游声明
事件参数：(observer: Parameters<Extract<NonNullable<(NonNullable<(AsamTableContext<T>)["layout"]>)["addObserver"]>, (...args: never[]) => unknown>>[0]): void
layout.removeObserver: (NonNullable<(AsamTableContext<T>)["layout"]>)["removeObserver"] — 上游声明
事件参数：(observer: Parameters<Extract<NonNullable<(NonNullable<(AsamTableContext<T>)["layout"]>)["removeObserver"]>, (...args: never[]) => unknown>>[0]): void
layout.notifyObservers: (event: string) => void — 上游声明
事件参数：(event: string): void

`refs`

必填：是；声明来源：上游声明。

refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

refs.tableWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.headerWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.footerWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.fixedBodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.rightFixedBodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.bodyWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
refs.appendWrapper: AsamTableRefs["tableWrapper"] — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`tableId`

必填：是；声明来源：上游声明。

`state`

必填：是；声明来源：上游声明。

state 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

state.isGroup: Ref<boolean, boolean> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
state.resizeState: Ref<{ width: any; height: any; }, { width: any; height: any; }> — 上游声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
state.doLayout: () => void — 上游声明
事件参数：(): void
state.debouncedUpdateLayout: () => void — 上游声明
事件参数：(): void

`emit`

必填：是；声明来源：上游声明。

emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(e: "select", selection: T[], row: T): void

事件参数：(e: "select-all", selection: T[]): void

事件参数：(e: "selection-change", newSelection: T[]): void

事件参数：(e: "cell-mouse-enter" | "cell-mouse-leave" | "cell-dblclick", row: T, column: AsamTableColumnCtx<T>, cell: HTMLTableCellElement, event: MouseEvent): void

事件参数：(e: "cell-contextmenu" | "cell-click", row: T, column: AsamTableColumnCtx<T>, cell: HTMLTableCellElement, event: PointerEvent): void

事件参数：(e: "row-dblclick", row: T, column: AsamTableColumnCtx<T> | null, event: MouseEvent): void

事件参数：(e: "row-click" | "row-contextmenu", row: T, column: AsamTableColumnCtx<T> | null, event: PointerEvent): void

事件参数：(e: "header-click" | "header-contextmenu", column: AsamTableColumnCtx<T>, event: PointerEvent): void

事件参数：(e: "sort-change", data: { column: AsamTableColumnCtx<T>; prop: string | null; order: AsamTableSort["order"] | null; }): void

事件参数：(e: "filter-change", newFilters: Record<string, string[]>): void

事件参数：(e: "current-change", currentRow: T | null, oldCurrentRow: T | null): void

事件参数：(e: "header-dragend", newWidth: number, oldWidth: number, column: AsamTableColumnCtx<T>, event: MouseEvent): void

事件参数：(e: "expand-change", row: T, expandedRows: T[]): void

事件参数：(e: "expand-change", row: T, expanded: boolean): void

事件参数：(e: "scroll", data: { scrollLeft: number; scrollTop: number; }): void

`effect`

必填：是；声明来源：依赖声明。

effect 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`data`

必填：是；声明来源：依赖声明。

data 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`uid`

必填：是；声明来源：依赖声明。

`type`

必填：是；声明来源：依赖声明。

type 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: {}, ctx: Parameters<Extract<NonNullable<ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any>>, (...args: never[]) => unknown>>[1]): any

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`parent`

必填：是；声明来源：依赖声明。

parent 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

parent.uid: number — 依赖声明
parent.type: ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any> — 依赖声明
事件参数：(props: {}, ctx: Parameters<Extract<NonNullable<PublicMember<NonNullable<AsamTableV2Expose["$"] | null>, "type">>, (...args: never[]) => unknown>>[1]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.parent: AsamTableV2Expose["$"] | null — 依赖声明
嵌套展开边界：递归引用；完整类型见公开类型视图。
parent.root: AsamTableV2Expose["$"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.appContext: AsamTableContext<T>["appContext"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
父虚拟 DOM 中代表当前组件的 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.subTree: VNode<RendererNode, RendererElement, { [key: string]: any; }> — 依赖声明
当前组件自身虚拟 DOM 树的根 VNode。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.effect: ReactiveEffect<any> — 依赖声明
渲染副作用实例。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.update: () => void — 依赖声明
强制更新渲染副作用。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.job: AsamTableContext<T>["job"] — 依赖声明
交给调度器的渲染任务，会检查是否需要更新。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.proxy: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null — 依赖声明
parent.exposed: Record<string, any> | null — 依赖声明
parent.exposeProxy: Record<string, any> | null — 依赖声明
parent.data: AsamTableV2Expose["$refs"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.props: AsamTableV2Expose["$refs"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.attrs: AsamTableV2Expose["$refs"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.slots: AsamTableContext<T>["slots"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.refs: AsamTableV2Expose["$refs"] — 依赖声明
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.emit: (event: string, ...args: any[]) => void — 依赖声明
事件参数：(event: string, ...args: any[]): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
parent.isMounted: boolean — 依赖声明
枚举：false / true
parent.isUnmounted: boolean — 依赖声明
枚举：false / true
parent.isDeactivated: boolean — 依赖声明
枚举：false / true

`root`

必填：是；声明来源：依赖声明。

root 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`appContext`

必填：是；声明来源：依赖声明。

appContext 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`vnode`

必填：是；声明来源：依赖声明。

vnode 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`subTree`

必填：是；声明来源：依赖声明。

subTree 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`update`

必填：是；声明来源：依赖声明。

update 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`job`

必填：是；声明来源：依赖声明。

job 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`proxy`

必填：是；声明来源：依赖声明。

`exposed`

isDeactivated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

AsamTableContext 公开类型视图

import type { VNode, Ref, ReactiveEffect, ConcreteComponent, ComputedOptions, MethodOptions, RendererNode, RendererElement, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions } from 'vue';
import type { AsamTableContext, AsamTableV2Expose, AsamTableRefs, AsamTableColumnCtx, AsamTableV2HeaderCellSlotProps, AsamTableNativeEmits, AsamTableSort, AsamTableV2Props } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamTableContext
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; } = any> = {
	"$ready": boolean;
	"hoverState"?: (AsamTableContext<T>)["hoverState"];
	"renderExpanded": (AsamTableContext<T>)["renderExpanded"];
	"store": (AsamTableContext<T>)["store"];
	"layout": (AsamTableContext<T>)["layout"];
	"refs": AsamTableRefs;
	"tableId": string;
	"state": AsamTableContext<T>["state"];
	"emit": AsamTableNativeEmits<T>;
	"effect": ReactiveEffect<any>;
	"data": AsamTableV2Expose["$refs"];
	"uid": number;
	"type": ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions, {}, any>;
	"parent": AsamTableV2Expose["$"] | null;
	"root": AsamTableV2Expose["$"];
	"appContext": AsamTableContext<T>["appContext"];
	"vnode": VNode<RendererNode, RendererElement, { [key: string]: any; }>;
	"subTree": VNode<RendererNode, RendererElement, { [key: string]: any; }>;
	"update": () => void;
	"job": AsamTableContext<T>["job"];
	"proxy": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"exposed": Record<string, any> | null;
	"exposeProxy": Record<string, any> | null;
	"props": AsamTableV2Expose["$refs"];
	"attrs": AsamTableV2Expose["$refs"];
	"slots": AsamTableContext<T>["slots"];
	"isMounted": boolean;
	"isUnmounted": boolean;
	"isDeactivated": boolean;
};

参数与事件说明

事件参数：(data: Parameters<Extract<NonNullable<(AsamTableColumnCtx<T>)["renderHeader"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

`sortable`

必填：是；声明来源：上游声明。

sortable 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`sortMethod`

必填：是；声明来源：上游声明。

sortMethod 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(a: T, b: T): number

`sortBy`

必填：是；声明来源：上游声明。

sortBy 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(row: T, index: number, array?: T[] | undefined): string

`resizable`

必填：是；声明来源：上游声明。

resizable 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

必填：是；声明来源：上游声明。

filteredValue 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`filters`

必填：是；声明来源：上游声明。

`filterPlacement`

必填：是；声明来源：上游声明。

`filterMultiple`

必填：是；声明来源：上游声明。

filterMultiple 参数与事件数据

必填：是；声明来源：上游声明。

order 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："ascending" / "descending"

`isColumnGroup`

必填：是；声明来源：上游声明。

isColumnGroup 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`isSubColumn`

必填：是；声明来源：上游声明。

isSubColumn 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`columns`

必填：是；声明来源：上游声明。

columns 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`getColumnIndex`

必填：是；声明来源：上游声明。

getColumnIndex 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): number

`no`

必填：是；声明来源：上游声明。

`filterOpened`

必填：否；声明来源：上游声明。

filterOpened 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`renderFilterIcon`

必填：否；声明来源：上游声明。

renderFilterIcon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(scope: any): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

`renderExpand`

必填：否；声明来源：上游声明。

renderExpand 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(scope: any): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

AsamTableColumnCtx 公开类型视图

import type { VNode } from 'vue';
import type { AsamTableColumnCtx, AsamTableV2HeaderCellSlotProps, AsamTableV2Props, AsamTableV2Expose, AsamTableOverflowTooltipFormatter, AsamTableSort } from '@asam-ui/ui';

// AsamTableColumnCtx
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; } = { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = {
	"id": string;
	"realWidth": number | null;
	"type": string;
	"label": string;
	"className": string;
	"labelClassName": string;
	"property": string;
	"prop": string;
	"width"?: string | number | undefined;
	"minWidth": string | number;
	"renderHeader": (AsamTableColumnCtx<T>)["renderHeader"];
	"sortable": string | boolean;
	"sortMethod": (a: T, b: T) => number;
	"sortBy": string | string[] | ((row: T, index: number, array?: T[]) => string);
	"resizable": boolean;
	"columnKey": string;
	"rawColumnKey": string;
	"align": string;
	"headerAlign": string;
	"showOverflowTooltip"?: (AsamTableColumnCtx<T>)["showOverflowTooltip"];
	"tooltipFormatter"?: AsamTableOverflowTooltipFormatter<T> | undefined;
	"fixed": string | boolean;
	"formatter": (row: T, column: AsamTableColumnCtx<T>, cellValue: any, index: number) => VNode | string;
	"selectable": (row: T, index: number) => boolean;
	"reserveSelection": boolean;
	"filterMethod": (AsamTableColumnCtx<T>)["filterMethod"];
	"filteredValue": string[];
	"filters": AsamTableColumnCtx<T>["filters"];
	"filterPlacement": string;
	"filterMultiple": boolean;
	"filterClassName": string;
	"index": number | ((index: number) => number);
	"sortOrders": (AsamTableSort["order"] | null)[];
	"renderCell": (data: any) => VNode | VNode[];
	"colSpan": number;
	"rowSpan": number;
	"children"?: AsamTableColumnCtx<T>[] | undefined;
	"level": number;
	"filterable": (AsamTableColumnCtx<T>)["filterable"];
	"order": AsamTableSort["order"] | null;
	"isColumnGroup": boolean;
	"isSubColumn": boolean;
	"columns": AsamTableColumnCtx<T>[];
	"getColumnIndex": () => number;
	"no": number;
	"filterOpened"?: boolean | undefined;
	"renderFilterIcon"?: ((scope: any) => VNode) | undefined;
	"renderExpand"?: ((scope: any) => VNode) | undefined;
};

参数与事件说明

`showOverflowTooltip`

必填：否；声明来源：上游声明。

showOverflowTooltip 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

事件参数：(data: { row: any; column: AsamTableColumnCtx<any>; cellValue: any; }): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>

AsamTableConfigContext 公开类型视图

import type { VNode } from 'vue';
import type { AsamTableConfigContext, AsamTableV2Props, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx } from '@asam-ui/ui';

// AsamTableConfigContext
type PublicContract = {
	"showOverflowTooltip"?: (AsamTableConfigContext)["showOverflowTooltip"];
	"tooltipEffect"?: string | undefined;
	"tooltipOptions"?: (AsamTableConfigContext)["tooltipOptions"];
	"tooltipFormatter"?: AsamTableOverflowTooltipFormatter<any> | undefined;
};

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

AsamTableRefs 公开类型视图

import type { AsamTableRefs } from '@asam-ui/ui';

// AsamTableRefs
type PublicContract = {
	"tableWrapper": AsamTableRefs["tableWrapper"];
	"headerWrapper": AsamTableRefs["tableWrapper"];
	"footerWrapper": AsamTableRefs["tableWrapper"];
	"fixedBodyWrapper": AsamTableRefs["tableWrapper"];
	"rightFixedBodyWrapper": AsamTableRefs["tableWrapper"];
	"bodyWrapper": AsamTableRefs["tableWrapper"];
	"appendWrapper": AsamTableRefs["tableWrapper"];
	[key: string]: any;
};

参数与事件说明

`row`

必填：是；声明来源：上游声明。

`column`

必填：是；声明来源：上游声明。

column 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`cellValue`

必填：是；声明来源：上游声明。

AsamTableTooltipData 公开类型视图

import type { AsamTableTooltipData, AsamTableColumnCtx, AsamTableV2Props } from '@asam-ui/ui';

// AsamTableTooltipData
type PublicContract<T extends { [x: string]: any; [x: number]: any; [x: symbol]: any; }> = {
	"row": T;
	"column": AsamTableColumnCtx<T>;
	"cellValue": any;
};

枚举：false / true

`indent`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：16（2.14.7；源码事实，未作为 ASAM 运行实测）

`level`

必填：否；声明来源：上游声明。

`display`

必填：否；声明来源：上游声明。

display 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

AsamTableTreeNode 公开类型视图

import type { AsamTableTreeNode, AsamTableV2Props } from '@asam-ui/ui';

// AsamTableTreeNode
type PublicContract = {
	"expanded"?: boolean | undefined;
	"loading"?: boolean | undefined;
	"noLazyChildren"?: boolean | undefined;
	"indent"?: number | undefined;
	"level"?: number | undefined;
	"display"?: boolean | undefined;
};

使用场景 ​

契约与组合 ​

完整实例公开面 ​

模板与预览边界 ​

基础用法与状态 ​

基础用法与状态

树后代与懒加载默认选择 ​

树后代与懒加载默认选择

基础表格 ​

基础表格

可选择的树形数据 ​

可选择的树形数据

自定义列模板 ​

自定义列模板

自定义表头 ​

自定义表头

自定义索引 ​

自定义索引

展开行 ​

展开行

筛选 ​

筛选

固定列 ​

固定列

固定表头 ​

固定表头

固定列和表头 ​

固定列和表头

固定表头 ​

固定表头

流体高度 ​

流体高度

多级表头 ​

多级表头

多选 ​

多选

合并行或列 ​

合并行或列

显示溢出工具提示的表格 ​

显示溢出工具提示的表格

单选 ​

单选

排序 ​

排序

带斑马纹表格 ​

带斑马纹表格

表尾合计行 ​

表尾合计行

追加内容与汇总行 ​

追加内容与汇总行

表格布局 ​

表格布局

提示内容格式化 ​

提示内容格式化

树形数据与懒加载 ​

树形数据与懒加载

带边框表格 ​

带边框表格

带状态表格 ​

带状态表格

实例、类型与边界 ​

API

类型 AsamTableRow

类型 AsamTableRowKey

类型 AsamTableRowKeyGetter

属性 AsamTableProps

事件 AsamTableEmits

插槽 AsamTableSlots

实例方法与状态 AsamTableExpose

类型 AsamTableInstance

类型 AsamTableCellCls

类型 AsamTableCellStyle

类型 AsamTableColumnCls

类型 AsamTableColumnStyle

类型 AsamTableFilter

类型 AsamTableRenderRowData

类型 AsamTableSort

类型 AsamTableSummaryMethod

类型 AsamTableContext

使用场景

契约与组合

完整实例公开面

模板与预览边界

基础用法与状态

树后代与懒加载默认选择

基础表格

可选择的树形数据

自定义列模板

自定义表头

自定义索引

展开行

筛选

固定列

固定表头

固定列和表头

固定表头

流体高度

多级表头

多选

合并行或列

显示溢出工具提示的表格

单选

排序

带斑马纹表格

表尾合计行

追加内容与汇总行

表格布局

提示内容格式化

树形数据与懒加载

带边框表格

带状态表格

实例、类型与边界

类型 `AsamTableRow`

类型 `AsamTableRowKey`

类型 `AsamTableRowKeyGetter`

属性 `AsamTableProps`

事件 `AsamTableEmits`

插槽 `AsamTableSlots`

实例方法与状态 `AsamTableExpose`

类型 `AsamTableInstance`

类型 `AsamTableCellCls`

类型 `AsamTableCellStyle`

类型 `AsamTableColumnCls`

类型 `AsamTableColumnStyle`

类型 `AsamTableFilter`

类型 `AsamTableRenderRowData`

类型 `AsamTableSort`

类型 `AsamTableSummaryMethod`

类型 `AsamTableContext`

类型 `AsamTableColumnCtx`

类型 `AsamTableConfigContext`

类型 `AsamTableRefs`

类型 `AsamTableTooltipData`

类型 `AsamTableTreeNode`

用法与契约补充说明

契约与组合

契约与组合

契约与组合

契约与组合

完整实例公开面

模板与预览边界

追加内容与汇总行

更多参数与事件说明

完整实例公开面

`data`

`tableLayout`

`selectable`

`rowKey`

`defaultSelectedRowKeys`

`reserveSelection`

`loading`

`minWidth`

`pagination`

`allowDragLastColumn`

`preserveExpandedContent`

`style`

`className`

`width`

`height`