使用场景 ​
在固定视窗内展示较大的数据集,只渲染可见行。
契约与组合 ​
columns 是渲染列定义,data 是宿主数据;width / height 必须是实际视窗尺寸。 完整说明。
此入口渲染公开 原生虚拟表格,透传全部原生 props、监听器和 slots,并通过公开 ref 转发实例方法与 live 对象。 完整说明。
选择、编辑、过滤、排序、合并与动态树由 renderer / slots 和宿主状态组合承接。 完整说明。
合并使用 row slot 的 cells,复制 VNode 后设置宽高;不要改传入的 cells。 完整说明。
scrollTo / scrollToLeft / scrollToTop / scrollToRow 是公开滚动方法。 完整说明。
组合能力与类型 ​
第一列复选框通过 cellRenderer 与宿主选择状态组合,renderers 完整示例同时包含表头全选及半选;不要假定 TableV2 自带 Table 的选择列注册机制。 完整说明。
原生 slot 与声明边界 ​
固定 2.14.7 的 #cell scope 不包含 cellData,使用 rowData 与 column 读取业务值;column.cellRenderer 回调则有计算后的 cellData。两条路径的参数不同,本入口分别保留原生类型与透传行为。
原生实例 $props 类型未声明 onUpdate:expandedRowKeys 监听器键,运行时仍会触发 update:expandedRowKeys。 完整说明。
受控排序与覆盖层 ​
注意:固定版本首次排序事件可能返回 undefined,受控排序须兼容该值。 完整说明。
基础用法与状态 ​
基础用法与状态
<template>
<div class="virtual-table-host">
<AsamAutoResizer>
<template #default="{ width, height }">
<AsamTableV2
v-bind="{ width, height, columns, data: rows, rowKey: 'id', rowHeight: 40 }"
/>
</template>
</AsamAutoResizer>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2BasicDemo' });
import { AsamAutoResizer, AsamTableV2, AsamTableV2Alignment } from '@asam-ui/ui';
import type { AsamTableV2Columns } from '@asam-ui/ui';
interface Row {
id: number;
name: string;
count: number;
}
const columns: AsamTableV2Columns<Row> = [
{ key: 'name', dataKey: 'name', title: '名称', width: 180 },
{ key: 'count', dataKey: 'count', title: '数量', width: 100, align: AsamTableV2Alignment.RIGHT }
];
const rows: Row[] = Array.from({ length: 100 }, (_, index) => ({
id: index,
name: '本地记录 ' + (index + 1),
count: index + 1
}));
</script>
<style scoped>
.virtual-table-host {
height: 240px;
width: 100%;
}
</style>
<template>
<div class="virtual-table-host">
<AsamAutoResizer>
<template #default="{ width, height }">
<AsamTableV2
v-bind="{ width, height, columns, data: rows, rowKey: 'id', rowHeight: 40 }"
/>
</template>
</AsamAutoResizer>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2BasicDemo' });
import { AsamAutoResizer, AsamTableV2, AsamTableV2Alignment } from '@asam-ui/ui';
const columns = [
{ key: 'name', dataKey: 'name', title: '名称', width: 180 },
{ key: 'count', dataKey: 'count', title: '数量', width: 100, align: AsamTableV2Alignment.RIGHT }
];
const rows = Array.from({ length: 100 }, (_, index) => ({
id: index,
name: '本地记录 ' + (index + 1),
count: index + 1
}));
</script>
<style scoped>
.virtual-table-host {
height: 240px;
width: 100%;
}
</style>
四档视觉尺寸与原生行高 ​
四档视觉尺寸与原生行高
<template>
<label>
ASAM 视觉尺寸
<AsamSelect v-model="size">
<AsamOption v-for="item in sizes" :key="item" :value="item" :label="item">{{
item
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph">原生 rowHeight 保持 50;ASAM 四档只改变视觉 tokens。</p>
<AsamTableV2
aria-label="四档视觉尺寸示例"
:size="size"
:width="360"
:height="220"
:columns="columns"
:data="rows"
/>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2DensityDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';
import type { AsamControlSize, AsamTableV2Columns } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'] as const;
const size = ref<AsamControlSize>('default');
const columns: AsamTableV2Columns<unknown> = [
{ key: 'name', dataKey: 'name', title: '名称', width: 300 }
];
const rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<label>
ASAM 视觉尺寸
<AsamSelect v-model="size">
<AsamOption v-for="item in sizes" :key="item" :value="item" :label="item">{{
item
}}</AsamOption>
</AsamSelect>
</label>
<p class="example-paragraph">原生 rowHeight 保持 50;ASAM 四档只改变视觉 tokens。</p>
<AsamTableV2
aria-label="四档视觉尺寸示例"
:size="size"
:width="360"
:height="220"
:columns="columns"
:data="rows"
/>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2DensityDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
const columns = [{ key: 'name', dataKey: 'name', title: '名称', width: 300 }];
const rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
固定与分组、排序过滤和状态组合 ​
固定与分组、排序过滤和状态组合
<template>
<div class="demo-root-layout">
<label>筛选名称 <AsamInput v-model="query" /></label>
<AsamCheckboxItem v-model="empty">空数据</AsamCheckboxItem>
<AsamCheckboxItem v-model="loading">显示覆盖层</AsamCheckboxItem>
<AsamButton native-type="submit" type="default" @click="compact = !compact"
>调整容器宽度</AsamButton
>
<div :style="{ width: compact ? '480px' : '640px', height: '340px', maxWidth: '100%' }">
<AsamAutoResizer>
<template #default="{ width, height }">
<AsamTableV2
:columns="columns"
:data="empty ? [] : displayed"
:fixed-data="empty ? [] : [sticky]"
:width="width"
:height="height"
:header-height="[30, 40]"
:footer-height="36"
:sort-state="sortState"
:row-event-handlers="rowEvents"
:row-class="rowClass"
row-key="id"
@column-sort="sort"
@scroll="scroll = `${$event.scrollTop}:${$event.scrollLeft}`"
@end-reached="endReached++"
>
<template #header="scope"><GroupHeader v-bind="scope" /></template>
<template #footer>
<p class="example-paragraph" role="status">
共 {{ displayed.length }} 行;滚动 {{ scroll }};触底
{{ endReached }}
<span data-testid="v2-sort-source"
>最近排序请求 {{ lastSortRequest }}</span
>
</p>
</template>
<template #empty><p class="example-paragraph">没有匹配的记录</p></template>
<template v-if="loading" #overlay>
<div class="ui030-loading-overlay" role="status">正在加载本地记录</div>
</template>
</AsamTableV2>
</template>
</AsamAutoResizer>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2LayoutStatesDemo' });
import { computed, h, ref } from 'vue';
import type { FunctionalComponent } from 'vue';
import {
AsamInput,
AsamCheckboxItem,
AsamButton,
AsamAutoResizer,
AsamTableV2,
AsamTableV2FixedDir,
AsamTableV2Placeholder,
AsamTableV2SortOrder
} from '@asam-ui/ui';
import type {
AsamTableV2Columns,
AsamTableV2CustomizedHeaderSlotParam,
AsamTableV2ColumnSortParams,
AsamTableV2SortState,
AsamTableV2RowEventHandlers,
AsamTableV2RowClassNameGetter
} from '@asam-ui/ui';
interface Row {
id: number;
name: string;
count: number;
detail: string;
}
const rows = ref<Row[]>(
Array.from({ length: 100 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
count: 100 - id,
detail: `记录 ${id + 1} 的完整说明`
}))
);
const sticky: Row = { id: -1, name: '固定汇总行', count: 5050, detail: '始终位于表头下方' };
const columns: AsamTableV2Columns<unknown> = [
{
key: 'name',
dataKey: 'name',
title: '名称',
width: 180,
sortable: true,
fixed: AsamTableV2FixedDir.LEFT
},
{ key: 'count', dataKey: 'count', title: '数量', width: 120, sortable: true },
{ key: 'detail', dataKey: 'detail', title: '说明', width: 300 },
{ key: 'id', dataKey: 'id', title: '编号', width: 100, fixed: AsamTableV2FixedDir.RIGHT }
];
const query = ref('');
const empty = ref(false);
const loading = ref(false);
const compact = ref(false);
const hovered = ref(-2);
const scroll = ref('0:0');
const endReached = ref(0);
const sortState = ref<AsamTableV2SortState>({});
const lastSortRequest = ref('未触发');
const displayed = computed(() => rows.value.filter((row) => row.name.includes(query.value)));
function sort({ key, order }: AsamTableV2ColumnSortParams<unknown>): void {
lastSortRequest.value = `${String(key)}:${String(order)}`;
// Native 2.14.7 can emit undefined for a column absent from controlled sortState.
const nextOrder = order ?? AsamTableV2SortOrder.ASC;
sortState.value = { [key]: nextOrder };
rows.value.sort((a, b) => {
const difference =
key === 'count'
? a.count - b.count
: a.name.localeCompare(b.name, 'zh-CN', { numeric: true });
return nextOrder === AsamTableV2SortOrder.ASC ? difference : -difference;
});
}
const rowEvents: AsamTableV2RowEventHandlers = {
onMouseenter: ({ rowIndex }) => {
hovered.value = rowIndex;
},
onMouseleave: () => {
hovered.value = -2;
}
};
const rowClass: AsamTableV2RowClassNameGetter<unknown> = ({ rowIndex }) =>
rowIndex === hovered.value ? 'ui030-hovered' : rowIndex % 2 ? 'ui030-striped' : '';
const GroupHeader: FunctionalComponent<AsamTableV2CustomizedHeaderSlotParam> = ({
cells,
columns: current,
headerIndex
}) => {
if (headerIndex === 1) return cells;
return current.map((column, index) =>
column.placeholderSign === AsamTableV2Placeholder
? cells[index]
: h(
'div',
{ class: 'el-table-v2__header-cell', style: { width: `${column.width}px` } },
column.fixed ? '固定区' : '记录信息'
)
);
};
</script>
<style>
.ui030-loading-overlay {
height: 100%;
display: grid;
place-items: center;
background: var(--asam-color-surface);
opacity: 0.9;
}
.ui030-hovered {
background: var(--asam-color-primary-hover);
}
.ui030-striped {
background: var(--asam-color-surface);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.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>
<template>
<div class="demo-root-layout">
<label>筛选名称 <AsamInput v-model="query" /></label>
<AsamCheckboxItem v-model="empty">空数据</AsamCheckboxItem>
<AsamCheckboxItem v-model="loading">显示覆盖层</AsamCheckboxItem>
<AsamButton native-type="submit" type="default" @click="compact = !compact"
>调整容器宽度</AsamButton
>
<div :style="{ width: compact ? '480px' : '640px', height: '340px', maxWidth: '100%' }">
<AsamAutoResizer>
<template #default="{ width, height }">
<AsamTableV2
:columns="columns"
:data="empty ? [] : displayed"
:fixed-data="empty ? [] : [sticky]"
:width="width"
:height="height"
:header-height="[30, 40]"
:footer-height="36"
:sort-state="sortState"
:row-event-handlers="rowEvents"
:row-class="rowClass"
row-key="id"
@column-sort="sort"
@scroll="scroll = `${$event.scrollTop}:${$event.scrollLeft}`"
@end-reached="endReached++"
>
<template #header="scope"><GroupHeader v-bind="scope" /></template>
<template #footer>
<p class="example-paragraph" role="status">
共 {{ displayed.length }} 行;滚动 {{ scroll }};触底
{{ endReached }}
<span data-testid="v2-sort-source"
>最近排序请求 {{ lastSortRequest }}</span
>
</p>
</template>
<template #empty><p class="example-paragraph">没有匹配的记录</p></template>
<template v-if="loading" #overlay>
<div class="ui030-loading-overlay" role="status">正在加载本地记录</div>
</template>
</AsamTableV2>
</template>
</AsamAutoResizer>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2LayoutStatesDemo' });
import { computed, h, ref } from 'vue';
import {
AsamInput,
AsamCheckboxItem,
AsamButton,
AsamAutoResizer,
AsamTableV2,
AsamTableV2FixedDir,
AsamTableV2Placeholder,
AsamTableV2SortOrder
} from '@asam-ui/ui';
const rows = ref(
Array.from({ length: 100 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
count: 100 - id,
detail: `记录 ${id + 1} 的完整说明`
}))
);
const sticky = { id: -1, name: '固定汇总行', count: 5050, detail: '始终位于表头下方' };
const columns = [
{
key: 'name',
dataKey: 'name',
title: '名称',
width: 180,
sortable: true,
fixed: AsamTableV2FixedDir.LEFT
},
{ key: 'count', dataKey: 'count', title: '数量', width: 120, sortable: true },
{ key: 'detail', dataKey: 'detail', title: '说明', width: 300 },
{ key: 'id', dataKey: 'id', title: '编号', width: 100, fixed: AsamTableV2FixedDir.RIGHT }
];
const query = ref('');
const empty = ref(false);
const loading = ref(false);
const compact = ref(false);
const hovered = ref(-2);
const scroll = ref('0:0');
const endReached = ref(0);
const sortState = ref({});
const lastSortRequest = ref('未触发');
const displayed = computed(() => rows.value.filter((row) => row.name.includes(query.value)));
function sort({ key, order }) {
lastSortRequest.value = `${String(key)}:${String(order)}`;
// Native 2.14.7 can emit undefined for a column absent from controlled sortState.
const nextOrder = order ?? AsamTableV2SortOrder.ASC;
sortState.value = { [key]: nextOrder };
rows.value.sort((a, b) => {
const difference =
key === 'count'
? a.count - b.count
: a.name.localeCompare(b.name, 'zh-CN', { numeric: true });
return nextOrder === AsamTableV2SortOrder.ASC ? difference : -difference;
});
}
const rowEvents = {
onMouseenter: ({ rowIndex }) => {
hovered.value = rowIndex;
},
onMouseleave: () => {
hovered.value = -2;
}
};
const rowClass = ({ rowIndex }) =>
rowIndex === hovered.value ? 'ui030-hovered' : rowIndex % 2 ? 'ui030-striped' : '';
const GroupHeader = ({ cells, columns: current, headerIndex }) => {
if (headerIndex === 1) return cells;
return current.map((column, index) =>
column.placeholderSign === AsamTableV2Placeholder
? cells[index]
: h(
'div',
{ class: 'el-table-v2__header-cell', style: { width: `${column.width}px` } },
column.fixed ? '固定区' : '记录信息'
)
);
};
</script>
<style>
.ui030-loading-overlay {
height: 100%;
display: grid;
place-items: center;
background: var(--asam-color-surface);
opacity: 0.9;
}
.ui030-hovered {
background: var(--asam-color-primary-hover);
}
.ui030-striped {
background: var(--asam-color-surface);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.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>
选择与行内编辑(多文件) ​
选择与行内编辑(多文件)
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-root-layout" };
const _hoisted_2: any = {
class: "example-paragraph",
role: "status"
};
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const SelectionCell_vue_1: any = __importDefault(require("./SelectionCell.vue"));
const EditorCell_vue_1: any = __importDefault(require("./EditorCell.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamTableV2RenderersDemo' },
__name: 'Demo',
setup(__props?: any) {
const rows: any = (0, vue_3.ref)(Array.from({ length: 200 }, (_?: any, id?: any) => ({
id,
name: `记录 ${id + 1}`,
checked: false,
editing: false
})));
const table: any = (0, vue_3.ref)();
const drafts: any = new Map();
const columns: any = (0, vue_3.computed)(() => [
{
key: 'selection',
width: 60,
fixed: ui_1.AsamTableV2FixedDir.LEFT,
headerCellRenderer: () => (0, vue_3.h)(SelectionCell_vue_1.default, {
label: '选择所有记录',
checked: rows.value.every((row?: any) => row.checked),
indeterminate: rows.value.some((row?: any) => row.checked) &&
!rows.value.every((row?: any) => row.checked),
onChange: (checked?: any) => rows.value.forEach((row?: any) => {
row.checked = checked;
})
}),
cellRenderer: ({ rowData }: any) => (0, vue_3.h)(SelectionCell_vue_1.default, {
label: `选择记录 ${rowData.id + 1}`,
checked: rowData.checked,
onChange: (checked?: any) => {
rowData.checked = checked;
}
})
},
{
key: 'name',
dataKey: 'name',
title: '名称(点击编辑)',
width: 360,
cellRenderer: ({ rowData }: any) => (0, vue_3.h)(EditorCell_vue_1.default, {
label: `编辑记录 ${rowData.id + 1}`,
value: rowData.name,
editing: rowData.editing,
onStart: () => {
drafts.set(rowData.id, rowData.name);
rowData.editing = true;
},
onChange: (value?: any) => {
rowData.name = value;
},
onFinish: () => {
rowData.editing = false;
drafts.delete(rowData.id);
},
onCancel: () => {
rowData.name = drafts.get(rowData.id) ?? rowData.name;
rowData.editing = false;
drafts.delete(rowData.id);
}
})
},
{ key: 'id', dataKey: 'id', title: '稳定行键', width: 140 }
]);
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createElementVNode)("p", _hoisted_2, " 选中 " + (0, vue_2.toDisplayString)(rows.value.filter((row?: any) => row.checked).length) + " 行;首行 " + (0, vue_2.toDisplayString)(rows.value[0].name), 1 /* TEXT */),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[0] || (_cache[0] = ($event?: any) => (table.value?.scrollToRow(rows.value.length - 1, 'end')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("查看最后一行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (table.value?.scrollToRow(0, 'start')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("返回首行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamTableV2), {
ref_key: "table",
ref: table,
columns: columns.value,
data: rows.value,
width: 640,
height: 260,
"row-key": "id",
"row-height": 44,
"scrollbar-always-on": true
}, null, 8 /* PROPS */, ["columns", "data"])
]));
};
}
});
exports.default.__scopeId = "data-v-44322d88";
},
"EditorCell.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-root-layout" };
const ui_1: any = require("@asam-ui/ui");
const vue_3: any = require("vue");
exports.default = (0, vue_1.defineComponent)({
__name: 'EditorCell',
props: {
value: { type: String, required: true },
label: { type: String, required: true },
editing: { type: Boolean, required: true }
},
emits: ["change", "start", "finish", "cancel"],
setup(__props: any, { emit: __emit }: any) {
const props: any = __props;
const emit: any = __emit;
const input: any = (0, vue_3.ref)();
(0, vue_3.watch)(() => props.editing, async (value?: any) => {
if (value) {
await (0, vue_3.nextTick)();
input.value?.focus();
}
});
function change(value?: any) {
if (typeof value === 'string')
emit('change', value);
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(__props.editing)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamInput), {
key: 0,
ref_key: "input",
ref: input,
"model-value": __props.value,
"aria-label": __props.label,
onInput: change,
onBlur: _cache[0] || (_cache[0] = ($event?: any) => (emit('finish'))),
onKeydown: [
_cache[1] || (_cache[1] = (0, vue_2.withKeys)(($event?: any) => (emit('finish')), ["enter"])),
_cache[2] || (_cache[2] = (0, vue_2.withKeys)(($event?: any) => (emit('cancel')), ["esc"]))
]
}, null, 8 /* PROPS */, ["model-value", "aria-label"]))
: ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamButton), {
key: 1,
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (emit('start')))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createTextVNode)((0, vue_2.toDisplayString)(__props.value), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
]));
};
}
});
exports.default.__scopeId = "data-v-1ae14af3";
},
"Row.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
},
"SelectionCell.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'SelectionCell',
props: {
checked: { type: Boolean, required: true },
label: { type: String, required: true },
indeterminate: { type: Boolean, required: false }
},
emits: ["change"],
setup(__props: any, { emit: __emit }: any) {
const emit: any = __emit;
function change(value?: any) {
if (typeof value === 'boolean')
emit('change', value);
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
"aria-label": __props.label,
"model-value": __props.checked,
indeterminate: __props.indeterminate,
onChange: change
}, null, 8 /* PROPS */, ["aria-label", "model-value", "indeterminate"]));
};
}
});
},
};
const __dependencies: any = {"Demo.vue":{"./SelectionCell.vue":"SelectionCell.vue","./EditorCell.vue":"EditorCell.vue","./Row.js":"Row.ts"},"EditorCell.vue":{},"Row.ts":{},"SelectionCell.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-root-layout[data-v-44322d88] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout[data-v-44322d88] > :is(p, pre, output) {
margin-block: 0;
}
p[data-v-44322d88]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.demo-root-layout[data-v-1ae14af3] {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout[data-v-1ae14af3] > :is(p, pre, output) {
margin-block: 0;
}
</style>
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-root-layout" };
const _hoisted_2 = {
class: "example-paragraph",
role: "status"
};
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const SelectionCell_vue_1 = __importDefault(require("./SelectionCell.vue"));
const EditorCell_vue_1 = __importDefault(require("./EditorCell.vue"));
exports.default = Object.assign({ name: 'AsamTableV2RenderersDemo' }, {
__name: 'Demo',
setup(__props) {
const rows = (0, vue_2.ref)(Array.from({ length: 200 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
checked: false,
editing: false
})));
const table = (0, vue_2.ref)();
const drafts = new Map();
const columns = (0, vue_2.computed)(() => [
{
key: 'selection',
width: 60,
fixed: ui_1.AsamTableV2FixedDir.LEFT,
headerCellRenderer: () => (0, vue_2.h)(SelectionCell_vue_1.default, {
label: '选择所有记录',
checked: rows.value.every((row) => row.checked),
indeterminate: rows.value.some((row) => row.checked) &&
!rows.value.every((row) => row.checked),
onChange: (checked) => rows.value.forEach((row) => {
row.checked = checked;
})
}),
cellRenderer: ({ rowData }) => (0, vue_2.h)(SelectionCell_vue_1.default, {
label: `选择记录 ${rowData.id + 1}`,
checked: rowData.checked,
onChange: (checked) => {
rowData.checked = checked;
}
})
},
{
key: 'name',
dataKey: 'name',
title: '名称(点击编辑)',
width: 360,
cellRenderer: ({ rowData }) => (0, vue_2.h)(EditorCell_vue_1.default, {
label: `编辑记录 ${rowData.id + 1}`,
value: rowData.name,
editing: rowData.editing,
onStart: () => {
drafts.set(rowData.id, rowData.name);
rowData.editing = true;
},
onChange: (value) => {
rowData.name = value;
},
onFinish: () => {
rowData.editing = false;
drafts.delete(rowData.id);
},
onCancel: () => {
rowData.name = drafts.get(rowData.id) ?? rowData.name;
rowData.editing = false;
drafts.delete(rowData.id);
}
})
},
{ key: 'id', dataKey: 'id', title: '稳定行键', width: 140 }
]);
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createElementVNode)("p", _hoisted_2, " 选中 " + (0, vue_1.toDisplayString)(rows.value.filter((row) => row.checked).length) + " 行;首行 " + (0, vue_1.toDisplayString)(rows.value[0].name), 1 /* TEXT */),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[0] || (_cache[0] = $event => (table.value?.scrollToRow(rows.value.length - 1, 'end')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("查看最后一行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[1] || (_cache[1] = $event => (table.value?.scrollToRow(0, 'start')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("返回首行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamTableV2), {
ref_key: "table",
ref: table,
columns: columns.value,
data: rows.value,
width: 640,
height: 260,
"row-key": "id",
"row-height": 44,
"scrollbar-always-on": true
}, null, 8 /* PROPS */, ["columns", "data"])
]));
};
}
});
exports.default.__scopeId = "data-v-be25633e";
},
"EditorCell.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-root-layout" };
const ui_1 = require("@asam-ui/ui");
const vue_2 = require("vue");
exports.default = {
__name: 'EditorCell',
props: {
value: { type: String, required: true },
label: { type: String, required: true },
editing: { type: Boolean, required: true }
},
emits: ['change', 'start', 'finish', 'cancel'],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const input = (0, vue_2.ref)();
(0, vue_2.watch)(() => props.editing, async (value) => {
if (value) {
await (0, vue_2.nextTick)();
input.value?.focus();
}
});
function change(value) {
if (typeof value === 'string')
emit('change', value);
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(__props.editing)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamInput), {
key: 0,
ref_key: "input",
ref: input,
"model-value": __props.value,
"aria-label": __props.label,
onInput: change,
onBlur: _cache[0] || (_cache[0] = $event => (emit('finish'))),
onKeydown: [
_cache[1] || (_cache[1] = (0, vue_1.withKeys)($event => (emit('finish')), ["enter"])),
_cache[2] || (_cache[2] = (0, vue_1.withKeys)($event => (emit('cancel')), ["esc"]))
]
}, null, 8 /* PROPS */, ["model-value", "aria-label"]))
: ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamButton), {
key: 1,
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (emit('start')))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createTextVNode)((0, vue_1.toDisplayString)(__props.value), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
]));
};
}
};
exports.default.__scopeId = "data-v-e6137077";
},
"Row.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
},
"SelectionCell.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'SelectionCell',
props: {
checked: { type: Boolean, required: true },
label: { type: String, required: true },
indeterminate: { type: Boolean, required: false, default: undefined }
},
emits: ['change'],
setup(__props, { emit: __emit }) {
const emit = __emit;
function change(value) {
if (typeof value === 'boolean')
emit('change', value);
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
"aria-label": __props.label,
"model-value": __props.checked,
indeterminate: __props.indeterminate,
onChange: change
}, null, 8 /* PROPS */, ["aria-label", "model-value", "indeterminate"]));
};
}
};
},
};
const __dependencies = {"Demo.vue":{"./SelectionCell.vue":"SelectionCell.vue","./EditorCell.vue":"EditorCell.vue"},"EditorCell.vue":{},"Row.js":{},"SelectionCell.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-root-layout[data-v-be25633e] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout[data-v-be25633e] > :is(p, pre, output) {
margin-block: 0;
}
p[data-v-be25633e]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.demo-root-layout[data-v-e6137077] {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout[data-v-e6137077] > :is(p, pre, output) {
margin-block: 0;
}
</style>
跨行列悬停 ​
cellProps 在每个单元格附加宿主的 mouseenter / mouseleave 与列、行标记。宿主记录当前行列,以 ASAM token 同时高亮整条可见行与该列所有可见单元格,离开单元格时清除。它与 layout-states 中仅跟踪行的悬停是两个完整用途,不改变虚拟滚动或选择逻辑。
跨行列悬停
<template>
<section>
<p class="example-paragraph" role="status">
{{
hoveredRow < 0
? '未悬停'
: `悬停第 ${hoveredRow + 1} 行、第 ${hoveredColumn + 1} 列`
}}
</p>
<AsamTableV2
:columns="columns"
:data="rows"
:cell-props="cellProps"
:width="600"
:height="300"
row-key="id"
/>
</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2CrossHoveringDemo' });
import { ref } from 'vue';
import { AsamTableV2 } from '@asam-ui/ui';
import type { AsamTableV2Columns, AsamTableV2ExtraCellPropGetter } from '@asam-ui/ui';
const columns: AsamTableV2Columns<string> = ['名称', '所属组', '说明'].map((title, index) => ({
key: `value${index}`,
dataKey: `value${index}`,
title,
width: 200
}));
const rows = Array.from({ length: 60 }, (_, id) => ({
id,
value0: `记录 ${id + 1}`,
value1: `组 ${Math.floor(id / 5) + 1}`,
value2: `说明 ${id + 1}`
}));
const hoveredRow = ref(-1);
const hoveredColumn = ref(-1);
const cellProps: AsamTableV2ExtraCellPropGetter<string> = ({ columnIndex, rowIndex }) => ({
'data-column': columnIndex,
'data-record': rowIndex,
style: {
backgroundColor:
columnIndex === hoveredColumn.value || rowIndex === hoveredRow.value
? 'var(--asam-color-primary-hover)'
: undefined
},
onMouseenter: () => {
hoveredRow.value = rowIndex;
hoveredColumn.value = columnIndex;
},
onMouseleave: () => {
hoveredRow.value = -1;
hoveredColumn.value = -1;
}
});
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<section>
<p class="example-paragraph" role="status">
{{
hoveredRow < 0
? '未悬停'
: `悬停第 ${hoveredRow + 1} 行、第 ${hoveredColumn + 1} 列`
}}
</p>
<AsamTableV2
:columns="columns"
:data="rows"
:cell-props="cellProps"
:width="600"
:height="300"
row-key="id"
/>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2CrossHoveringJsDemo' });
import { ref } from 'vue';
import { AsamTableV2 } from '@asam-ui/ui';
const columns = ['名称', '所属组', '说明'].map((title, index) => ({
key: `value${index}`,
dataKey: `value${index}`,
title,
width: 200
}));
const rows = Array.from({ length: 60 }, (_, id) => ({
id,
value0: `记录 ${id + 1}`,
value1: `组 ${Math.floor(id / 5) + 1}`,
value2: `说明 ${id + 1}`
}));
const hoveredRow = ref(-1);
const hoveredColumn = ref(-1);
const cellProps = ({ columnIndex, rowIndex }) => ({
'data-column': columnIndex,
'data-record': rowIndex,
style: {
backgroundColor:
columnIndex === hoveredColumn.value || rowIndex === hoveredRow.value
? 'var(--asam-color-primary-hover)'
: undefined
},
onMouseenter: () => {
hoveredRow.value = rowIndex;
hoveredColumn.value = columnIndex;
},
onMouseleave: () => {
hoveredRow.value = -1;
hoveredColumn.value = -1;
}
});
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
单列 sortBy 受控排序 ​
sortBy 保存单个 { key, order },示例在 column-sort 回调中回写此对象,并由宿主 computed 对数据副本排序。 完整说明。
单列 sortBy 受控排序
<template>
<section>
<p class="example-paragraph" role="status">
单列排序 {{ sortBy.key }}:{{ sortBy.order }};首行 {{ displayed[0]?.name }}
</p>
<AsamTableV2
:columns="columns"
:data="displayed"
:sort-by="sortBy"
:width="500"
:height="300"
row-key="id"
@column-sort="sort"
/>
</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2SortByDemo' });
import { computed, ref } from 'vue';
import { AsamTableV2, AsamTableV2SortOrder } from '@asam-ui/ui';
import type {
AsamTableV2Columns,
AsamTableV2ColumnSortParams,
AsamTableV2SortBy
} from '@asam-ui/ui';
const columns: AsamTableV2Columns<unknown> = [
{ key: 'name', dataKey: 'name', title: '名称', width: 300, sortable: true },
{ key: 'count', dataKey: 'count', title: '数量', width: 200, sortable: true }
];
const rows = Array.from({ length: 12 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
count: 12 - id
}));
const sortBy = ref<AsamTableV2SortBy>({ key: 'count', order: AsamTableV2SortOrder.ASC });
const displayed = computed(() => {
const { key, order } = sortBy.value;
return [...rows].sort((left, right) => {
const difference =
key === 'count'
? left.count - right.count
: left.name.localeCompare(right.name, 'zh-CN', { numeric: true });
return order === AsamTableV2SortOrder.ASC ? difference : -difference;
});
});
function sort({ key, order }: AsamTableV2ColumnSortParams<unknown>): void {
// The host owns both the single-column descriptor and the displayed data.
sortBy.value = { key, order: order ?? AsamTableV2SortOrder.ASC };
}
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<section>
<p class="example-paragraph" role="status">
单列排序 {{ sortBy.key }}:{{ sortBy.order }};首行 {{ displayed[0]?.name }}
</p>
<AsamTableV2
:columns="columns"
:data="displayed"
:sort-by="sortBy"
:width="500"
:height="300"
row-key="id"
@column-sort="sort"
/>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2SortByJsDemo' });
import { computed, ref } from 'vue';
import { AsamTableV2, AsamTableV2SortOrder } from '@asam-ui/ui';
const columns = [
{ key: 'name', dataKey: 'name', title: '名称', width: 300, sortable: true },
{ key: 'count', dataKey: 'count', title: '数量', width: 200, sortable: true }
];
const rows = Array.from({ length: 12 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
count: 12 - id
}));
const sortBy = ref({ key: 'count', order: AsamTableV2SortOrder.ASC });
const displayed = computed(() => {
const { key, order } = sortBy.value;
return [...rows].sort((left, right) => {
const difference =
key === 'count'
? left.count - right.count
: left.name.localeCompare(right.name, 'zh-CN', { numeric: true });
return order === AsamTableV2SortOrder.ASC ? difference : -difference;
});
});
function sort({ key, order }) {
// The host owns both the single-column descriptor and the displayed data.
sortBy.value = { key, order: order ?? AsamTableV2SortOrder.ASC };
}
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
随滚动切换吸顶组 ​
示例将 scroll 事件的 scrollTop 保存为宿主状态,根据显式 rowHeight 和分组记录数计算当前组,再通过 computed 更新 fixedData。 完整说明。
随滚动切换吸顶组
<template>
<section class="ui037-sticky-scroll">
<AsamButton native-type="submit" type="default" @click="table?.scrollToTop(480)"
>定位第三组</AsamButton
>
<AsamButton native-type="submit" type="default" @click="table?.scrollToTop(0)"
>返回首组</AsamButton
>
<p class="example-paragraph" role="status">当前吸顶 {{ fixedData[0]?.name }};滚动 {{ scrollTop }}</p>
<AsamTableV2
ref="table"
:columns="columns"
:data="rows.slice(1)"
:fixed-data="fixedData"
:row-height="rowHeight"
:row-class="rowClass"
:width="600"
:height="300"
row-key="id"
@scroll="onScroll"
/>
</section>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableV2StickyScrollDemo' });
import { computed, ref, shallowRef } from 'vue';
import { AsamButton, AsamTableV2 } from '@asam-ui/ui';
import type {
AsamTableV2Columns,
AsamTableV2Expose,
AsamTableV2RowClassNameGetter
} from '@asam-ui/ui';
const columns: AsamTableV2Columns<unknown> = [
{ key: 'name', dataKey: 'name', title: '名称', width: 220 },
{ key: 'detail', dataKey: 'detail', title: '说明', width: 380 }
];
const groupLength = 6;
const rowHeight = 40;
const rows = Array.from({ length: 120 }, (_, id) => ({
id,
name: id % groupLength === 0 ? `第 ${id / groupLength + 1} 组` : `记录 ${id}`,
detail: id % groupLength === 0 ? '滚动到下一组时替换此吸顶记录' : '普通记录'
}));
const table = shallowRef<AsamTableV2Expose>();
const scrollTop = ref(0);
const fixedData = computed(() => {
const groupIndex = Math.min(
Math.floor(scrollTop.value / (rowHeight * groupLength)),
rows.length / groupLength - 1
);
return rows.slice(groupIndex * groupLength, groupIndex * groupLength + 1);
});
const rowClass: AsamTableV2RowClassNameGetter<unknown> = ({ rowIndex }) =>
rowIndex < 0 ? 'ui037-active-sticky' : '';
function onScroll({ scrollTop: next }: { scrollTop: number }): void {
scrollTop.value = next;
}
</script>
<style>
.ui037-sticky-scroll .ui037-active-sticky {
background: var(--asam-color-primary-hover);
font-weight: 600;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<section class="ui037-sticky-scroll">
<AsamButton native-type="submit" type="default" @click="table?.scrollToTop(480)"
>定位第三组</AsamButton
>
<AsamButton native-type="submit" type="default" @click="table?.scrollToTop(0)"
>返回首组</AsamButton
>
<p class="example-paragraph" role="status">当前吸顶 {{ fixedData[0]?.name }};滚动 {{ scrollTop }}</p>
<AsamTableV2
ref="table"
:columns="columns"
:data="rows.slice(1)"
:fixed-data="fixedData"
:row-height="rowHeight"
:row-class="rowClass"
:width="600"
:height="300"
row-key="id"
@scroll="onScroll"
/>
</section>
</template>
<script setup>
defineOptions({ name: 'AsamTableV2StickyScrollJsDemo' });
import { computed, ref, shallowRef } from 'vue';
import { AsamButton, AsamTableV2 } from '@asam-ui/ui';
const columns = [
{ key: 'name', dataKey: 'name', title: '名称', width: 220 },
{ key: 'detail', dataKey: 'detail', title: '说明', width: 380 }
];
const groupLength = 6;
const rowHeight = 40;
const rows = Array.from({ length: 120 }, (_, id) => ({
id,
name: id % groupLength === 0 ? `第 ${id / groupLength + 1} 组` : `记录 ${id}`,
detail: id % groupLength === 0 ? '滚动到下一组时替换此吸顶记录' : '普通记录'
}));
const table = shallowRef();
const scrollTop = ref(0);
const fixedData = computed(() => {
const groupIndex = Math.min(
Math.floor(scrollTop.value / (rowHeight * groupLength)),
rows.length / groupLength - 1
);
return rows.slice(groupIndex * groupLength, groupIndex * groupLength + 1);
});
const rowClass = ({ rowIndex }) => (rowIndex < 0 ? 'ui037-active-sticky' : '');
function onScroll({ scrollTop: next }) {
scrollTop.value = next;
}
</script>
<style>
.ui037-sticky-scroll .ui037-active-sticky {
background: var(--asam-color-primary-hover);
font-weight: 600;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
表头 renderer 筛选(多文件) ​
状态列的 headerCellRenderer 渲染本地 HeaderFilter SFC,由表头按钮打开原生 dialog。 完整说明。
表头 renderer 筛选(多文件)
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = {
class: "example-paragraph",
role: "status"
};
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const HeaderFilter_vue_1: any = __importDefault(require("./HeaderFilter.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamTableV2HeaderFilterDemo' },
__name: 'Demo',
setup(__props?: any) {
const completedOnly: any = (0, vue_3.ref)(false);
const rows: any = Array.from({ length: 100 }, (_?: any, id?: any) => ({
id,
name: `记录 ${id + 1}`,
completed: id % 2 === 0,
state: id % 2 === 0 ? '已完成' : '待处理'
}));
const displayed: any = (0, vue_3.computed)(() => rows.filter((row?: any) => !completedOnly.value || row.completed));
const columns: any = [
{ key: 'name', dataKey: 'name', title: '名称', width: 350 },
{
key: 'state',
dataKey: 'state',
title: '状态',
width: 250,
headerCellRenderer: ({ column }: any) => (0, vue_3.h)(HeaderFilter_vue_1.default, {
title: String(column.title),
enabled: completedOnly.value,
onApply: (enabled?: any) => {
completedOnly.value = enabled;
}
})
}
];
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", null, [
(0, vue_2.createElementVNode)("p", _hoisted_1, " 表头筛选 " + (0, vue_2.toDisplayString)(completedOnly.value ? '已完成' : '全部') + ";共 " + (0, vue_2.toDisplayString)(displayed.value.length) + " 行 ", 1 /* TEXT */),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamTableV2), {
columns: columns,
data: displayed.value,
width: 600,
height: 300,
"row-key": "id"
}, null, 8 /* PROPS */, ["data"])
]));
};
}
});
exports.default.__scopeId = "data-v-ba4e0020";
},
"HeaderFilter.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const vue_3: any = require("vue");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamTableV2HeaderFilter' },
__name: 'HeaderFilter',
props: {
title: { type: String, required: true },
enabled: { type: Boolean, required: true }
},
emits: { apply: (enabled?: any) => typeof enabled === 'boolean' },
setup(__props: any, { emit: __emit }: any) {
const props: any = __props;
const emit: any = __emit;
const dialogOpen: any = (0, vue_3.ref)(false);
const draft: any = (0, vue_3.ref)(false);
function open() {
draft.value = props.enabled;
dialogOpen.value = true;
}
function apply(enabled?: any) {
emit('apply', enabled);
dialogOpen.value = false;
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", null, [
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)(__props.title), 1 /* TEXT */),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
"aria-label": `筛选${__props.title}`,
onClick: open
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["aria-label"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamDialog), {
modelValue: dialogOpen.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event?: any) => ((dialogOpen).value = $event)),
title: `${__props.title}筛选条件`,
"aria-label": `${__props.title}筛选条件`
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("form", {
onSubmit: _cache[3] || (_cache[3] = (0, vue_2.withModifiers)(($event?: any) => (apply(draft.value)), ["prevent"]))
}, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: draft.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((draft).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("仅显示已完成", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "submit"
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("确认筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (apply(false)))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("重置筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (dialogOpen.value = false))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("取消筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
], 32 /* NEED_HYDRATION */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "title", "aria-label"])
]));
};
}
});
exports.default.__scopeId = "data-v-2150239c";
},
};
const __dependencies: any = {"Demo.vue":{"./HeaderFilter.vue":"HeaderFilter.vue"},"HeaderFilter.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-ba4e0020]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
form[data-v-2150239c] {
display: grid;
gap: 8px;
}
</style>
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = {
class: "example-paragraph",
role: "status"
};
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const HeaderFilter_vue_1 = __importDefault(require("./HeaderFilter.vue"));
exports.default = Object.assign({ name: 'AsamTableV2HeaderFilterJsDemo' }, {
__name: 'Demo',
setup(__props) {
const completedOnly = (0, vue_2.ref)(false);
const rows = Array.from({ length: 100 }, (_, id) => ({
id,
name: `记录 ${id + 1}`,
completed: id % 2 === 0,
state: id % 2 === 0 ? '已完成' : '待处理'
}));
const displayed = (0, vue_2.computed)(() => rows.filter((row) => !completedOnly.value || row.completed));
const columns = [
{ key: 'name', dataKey: 'name', title: '名称', width: 350 },
{
key: 'state',
dataKey: 'state',
title: '状态',
width: 250,
headerCellRenderer: ({ column }) => (0, vue_2.h)(HeaderFilter_vue_1.default, {
title: String(column.title),
enabled: completedOnly.value,
onApply: (enabled) => {
completedOnly.value = enabled;
}
})
}
];
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", null, [
(0, vue_1.createElementVNode)("p", _hoisted_1, " 表头筛选 " + (0, vue_1.toDisplayString)(completedOnly.value ? '已完成' : '全部') + ";共 " + (0, vue_1.toDisplayString)(displayed.value.length) + " 行 ", 1 /* TEXT */),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamTableV2), {
columns: columns,
data: displayed.value,
width: 600,
height: 300,
"row-key": "id"
}, null, 8 /* PROPS */, ["data"])
]));
};
}
});
exports.default.__scopeId = "data-v-4479d62a";
},
"HeaderFilter.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const ui_1 = require("@asam-ui/ui");
const vue_2 = require("vue");
exports.default = Object.assign({ name: 'AsamTableV2HeaderFilter' }, {
__name: 'HeaderFilter',
props: {
title: { type: String, required: true },
enabled: { type: Boolean, required: true }
},
emits: { apply: (enabled) => typeof enabled === 'boolean' },
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const dialogOpen = (0, vue_2.ref)(false);
const draft = (0, vue_2.ref)(false);
function open() {
draft.value = props.enabled;
dialogOpen.value = true;
}
function apply(enabled) {
emit('apply', enabled);
dialogOpen.value = false;
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", null, [
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)(__props.title), 1 /* TEXT */),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
"aria-label": `筛选${__props.title}`,
onClick: open
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["aria-label"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamDialog), {
modelValue: dialogOpen.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((dialogOpen).value = $event)),
title: `${__props.title}筛选条件`,
"aria-label": `${__props.title}筛选条件`
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("form", {
onSubmit: _cache[3] || (_cache[3] = (0, vue_1.withModifiers)($event => (apply(draft.value)), ["prevent"]))
}, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: draft.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((draft).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("仅显示已完成", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "submit"
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("确认筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => (apply(false)))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("重置筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (dialogOpen.value = false))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("取消筛选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
], 32 /* NEED_HYDRATION */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "title", "aria-label"])
]));
};
}
});
exports.default.__scopeId = "data-v-f373b411";
},
};
const __dependencies = {"Demo.vue":{"./HeaderFilter.vue":"HeaderFilter.vue"},"HeaderFilter.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-4479d62a]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
form[data-v-f373b411] {
display: grid;
gap: 8px;
}
</style>
行列合并(多文件) ​
行列合并(多文件)
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const RowRenderer_vue_1: any = __importDefault(require("./RowRenderer.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamTableV2SpansDemo' },
__name: 'Demo',
setup(__props?: any) {
const merge: any = (0, vue_3.ref)(true);
const mode: any = (0, vue_3.ref)('both');
const cellProps: any = ({ rowIndex, columnIndex }: any) => ({
'data-merged': merge.value && rowIndex % 2 === 0 && columnIndex === 0
? mode.value === 'both'
? '2x2'
: mode.value === 'row'
? '2x1'
: '1x2'
: undefined
});
const columns: any = ['name', 'group', 'count', 'note'].map((key?: any, index?: any) => ({
key,
dataKey: key,
title: ['姓名', '分组', '数量', '备注'][index] ?? key,
width: 140
}));
const rows: any = Array.from({ length: 100 }, (_?: any, id?: any) => ({
id,
name: `合并记录 ${id + 1}`,
group: `分组 ${Math.floor(id / 2)}`,
count: id,
note: '独立未合并列'
}));
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)(vue_2.Fragment, null, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: merge.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((merge).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("合并两行两列", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createElementVNode)("label", null, [
_cache[6] || (_cache[6] = (0, vue_2.createTextVNode)("合并方向 ", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: mode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((mode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "both",
label: '行列同时合并'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("行列同时合并", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "row",
label: '仅合并行'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("仅合并行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "column",
label: '仅合并列'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("仅合并列", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamTableV2), {
columns: (0, vue_2.unref)(columns),
data: (0, vue_2.unref)(rows),
width: 640,
height: 260,
"row-height": 44,
"cell-props": cellProps,
"row-key": "id"
}, {
row: (0, vue_2.withCtx)(({ cells, rowIndex }: any) => [
(0, vue_2.createVNode)(RowRenderer_vue_1.default, {
cells: cells,
"row-index": rowIndex,
merge: merge.value,
mode: mode.value
}, null, 8 /* PROPS */, ["cells", "row-index", "merge", "mode"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["columns", "data"])
], 64 /* STABLE_FRAGMENT */));
};
}
});
},
"RowRenderer.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const vue_3: any = require("vue");
exports.default = (0, vue_1.defineComponent)({
__name: 'RowRenderer',
props: {
cells: { type: Array, required: true },
rowIndex: { type: Number, required: true },
merge: { type: Boolean, required: true },
mode: { type: String, required: true }
},
setup(__props?: any) {
const props: any = __props;
const RenderCells: any = () => {
const cells: any = [...props.cells];
if (!props.merge)
return cells;
const mergeRow: any = props.mode !== 'column';
const mergeColumn: any = props.mode !== 'row';
if (!mergeRow || props.rowIndex % 2 === 0) {
cells[0] = (0, vue_3.cloneVNode)(cells[0], {
style: {
width: mergeColumn ? '280px' : '140px',
height: mergeRow ? '87px' : '44px',
alignSelf: 'flex-start',
zIndex: 1,
background: 'var(--asam-color-surface)',
border: '1px solid var(--asam-color-border)'
},
'data-merged': '2x2'
});
if (mergeColumn)
cells.splice(1, 1);
}
else {
cells[0] = (0, vue_3.cloneVNode)(cells[0], { style: { visibility: 'hidden' } });
if (mergeColumn)
cells[1] = (0, vue_3.cloneVNode)(cells[1], { style: { visibility: 'hidden' } });
}
return cells;
};
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(RenderCells));
};
}
});
},
};
const __dependencies: any = {"Demo.vue":{"./RowRenderer.vue":"RowRenderer.vue"},"RowRenderer.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const RowRenderer_vue_1 = __importDefault(require("./RowRenderer.vue"));
exports.default = Object.assign({ name: 'AsamTableV2SpansDemo' }, {
__name: 'Demo',
setup(__props) {
const merge = (0, vue_2.ref)(true);
const mode = (0, vue_2.ref)('both');
const cellProps = ({ rowIndex, columnIndex }) => ({
'data-merged': merge.value && rowIndex % 2 === 0 && columnIndex === 0
? mode.value === 'both'
? '2x2'
: mode.value === 'row'
? '2x1'
: '1x2'
: undefined
});
const columns = ['name', 'group', 'count', 'note'].map((key, index) => ({
key,
dataKey: key,
title: ['姓名', '分组', '数量', '备注'][index] ?? key,
width: 140
}));
const rows = Array.from({ length: 100 }, (_, id) => ({
id,
name: `合并记录 ${id + 1}`,
group: `分组 ${Math.floor(id / 2)}`,
count: id,
note: '独立未合并列'
}));
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(vue_1.Fragment, null, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: merge.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((merge).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("合并两行两列", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createElementVNode)("label", null, [
_cache[6] || (_cache[6] = (0, vue_1.createTextVNode)("合并方向 ", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: mode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((mode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "both",
label: '行列同时合并'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("行列同时合并", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "row",
label: '仅合并行'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("仅合并行", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "column",
label: '仅合并列'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("仅合并列", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamTableV2), {
columns: (0, vue_1.unref)(columns),
data: (0, vue_1.unref)(rows),
width: 640,
height: 260,
"row-height": 44,
"cell-props": cellProps,
"row-key": "id"
}, {
row: (0, vue_1.withCtx)(({ cells, rowIndex }) => [
(0, vue_1.createVNode)(RowRenderer_vue_1.default, {
cells: cells,
"row-index": rowIndex,
merge: merge.value,
mode: mode.value
}, null, 8 /* PROPS */, ["cells", "row-index", "merge", "mode"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["columns", "data"])
], 64 /* STABLE_FRAGMENT */));
};
}
});
},
"RowRenderer.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
exports.default = {
__name: 'RowRenderer',
props: {
cells: { type: Array, required: true },
rowIndex: { type: Number, required: true },
merge: { type: Boolean, required: true },
mode: { type: String, required: true }
},
setup(__props) {
const props = __props;
const RenderCells = () => {
const cells = [...props.cells];
if (!props.merge)
return cells;
const mergeRow = props.mode !== 'column';
const mergeColumn = props.mode !== 'row';
if (!mergeRow || props.rowIndex % 2 === 0) {
cells[0] = (0, vue_2.cloneVNode)(cells[0], {
style: {
width: mergeColumn ? '280px' : '140px',
height: mergeRow ? '87px' : '44px',
alignSelf: 'flex-start',
zIndex: 1,
background: 'var(--asam-color-surface)',
border: '1px solid var(--asam-color-border)'
},
'data-merged': '2x2'
});
if (mergeColumn)
cells.splice(1, 1);
}
else {
cells[0] = (0, vue_2.cloneVNode)(cells[0], { style: { visibility: 'hidden' } });
if (mergeColumn)
cells[1] = (0, vue_2.cloneVNode)(cells[1], { style: { visibility: 'hidden' } });
}
return cells;
};
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(RenderCells));
};
}
};
},
};
const __dependencies = {"Demo.vue":{"./RowRenderer.vue":"RowRenderer.vue"},"RowRenderer.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
动态树、详情与追加节点(多文件) ​
动态树、详情与追加节点(多文件)
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = {
class: "example-paragraph",
role: "status"
};
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const TreeCell_vue_1: any = __importDefault(require("./TreeCell.vue"));
const DetailRow_vue_1: any = __importDefault(require("./DetailRow.vue"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamTableV2TreeDynamicDemo' },
__name: 'Demo',
setup(__props?: any) {
const rows: any = (0, vue_3.ref)([
{ id: 1, name: '父记录', children: [{ id: 2, name: '子记录', detail: '短详情。' }] },
...Array.from({ length: 60 }, (_?: any, index?: any) => ({
id: index + 10,
name: `普通记录 ${index + 1}`,
children: []
}))
]);
const expanded: any = (0, vue_3.ref)([]);
// 2.14.7 measures variable rows on mount. Rebuild its height cache after content changes;
// the host retains both the tree data and controlled expansion keys.
const heightRevision: any = (0, vue_3.ref)(0);
const columns: any = [
{
key: 'name',
dataKey: 'name',
title: '动态树与详情',
width: 470,
cellRenderer: ({ rowData }: any) => (0, vue_3.h)(TreeCell_vue_1.default, { name: rowData.name, detail: rowData.detail })
},
{ key: 'id', dataKey: 'id', title: 'ID', width: 100 }
];
function changeHeight() {
const child: any = rows.value[0].children[0];
child.detail = (child.detail?.length ?? 0) > 20 ? '短详情。' : '动态高度详情。'.repeat(30);
heightRevision.value += 1;
}
function appendChild() {
rows.value[0].children.push({ id: Date.now(), name: '新子记录', detail: '追加后仍保持展开。' });
expanded.value = [1];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)(vue_2.Fragment, null, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[0] || (_cache[0] = ($event?: any) => (expanded.value = expanded.value.length ? [] : [1]))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("展开或收起父记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: changeHeight
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("改变详情行高度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: appendChild
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("追加子记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createElementVNode)("p", _hoisted_1, "展开键 " + (0, vue_2.toDisplayString)(expanded.value.join(',')) + ";子记录 " + (0, vue_2.toDisplayString)(rows.value[0].children.length), 1 /* TEXT */),
((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamTableV2), {
key: heightRevision.value,
"expanded-row-keys": expanded.value,
"onUpdate:expandedRowKeys": _cache[1] || (_cache[1] = ($event?: any) => ((expanded).value = $event)),
"default-expanded-row-keys": expanded.value,
columns: columns,
data: rows.value,
width: 640,
height: 300,
"estimated-row-height": 52,
"expand-column-key": "name",
"row-key": "id",
"scrollbar-always-on": true
}, {
row: (0, vue_2.withCtx)(({ cells, rowData }: any) => [
(0, vue_2.createVNode)(DetailRow_vue_1.default, {
cells: cells,
"row-data": rowData
}, null, 8 /* PROPS */, ["cells", "row-data"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["expanded-row-keys", "default-expanded-row-keys", "data"]))
], 64 /* STABLE_FRAGMENT */));
};
}
});
exports.default.__scopeId = "data-v-0f3a3856";
},
"DetailRow.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = {
key: 0,
class: "tree-content"
};
const _hoisted_2: any = { class: "example-paragraph" };
exports.default = (0, vue_1.defineComponent)({
__name: 'DetailRow',
props: {
cells: { type: Array, required: true },
rowData: { type: Object, required: true }
},
setup(__props?: any) {
const props: any = __props;
const RenderCells: any = () => props.cells;
return (_ctx?: any, _cache?: any) => {
return (__props.rowData.detail)
? ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createElementVNode)("strong", null, (0, vue_2.toDisplayString)(__props.rowData.name), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_2, (0, vue_2.toDisplayString)(__props.rowData.detail), 1 /* TEXT */)
]))
: ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(RenderCells, { key: 1 }));
};
}
});
exports.default.__scopeId = "data-v-a93a1b63";
},
"TreeCell.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "tree-content" };
const _hoisted_2: any = {
key: 0,
class: "example-paragraph"
};
exports.default = (0, vue_1.defineComponent)({
__name: 'TreeCell',
props: {
name: { type: String, required: true },
detail: { type: String, required: false }
},
setup(__props?: any) {
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createElementVNode)("strong", null, (0, vue_2.toDisplayString)(__props.name), 1 /* TEXT */),
(__props.detail)
? ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("p", _hoisted_2, (0, vue_2.toDisplayString)(__props.detail), 1 /* TEXT */))
: (0, vue_2.createCommentVNode)("v-if", true)
]));
};
}
});
exports.default.__scopeId = "data-v-3b9adea3";
},
};
const __dependencies: any = {"Demo.vue":{"./TreeCell.vue":"TreeCell.vue","./DetailRow.vue":"DetailRow.vue"},"DetailRow.vue":{},"TreeCell.vue":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-0f3a3856]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.tree-content[data-v-a93a1b63] {
width: 100%;
box-sizing: border-box;
white-space: normal;
padding: var(--asam-space-sm);
background: var(--asam-color-surface);
}
.tree-content p[data-v-a93a1b63] {
margin: var(--asam-space-xs) 0;
}
p[data-v-a93a1b63]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.tree-content[data-v-3b9adea3] {
white-space: normal;
overflow-wrap: anywhere;
padding: var(--asam-space-sm);
}
.tree-content p[data-v-3b9adea3] {
margin: var(--asam-space-xs) 0;
}
p[data-v-3b9adea3]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = {
class: "example-paragraph",
role: "status"
};
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const TreeCell_vue_1 = __importDefault(require("./TreeCell.vue"));
const DetailRow_vue_1 = __importDefault(require("./DetailRow.vue"));
exports.default = Object.assign({ name: 'AsamTableV2TreeDynamicDemo' }, {
__name: 'Demo',
setup(__props) {
const rows = (0, vue_2.ref)([
{ id: 1, name: '父记录', children: [{ id: 2, name: '子记录', detail: '短详情。' }] },
...Array.from({ length: 60 }, (_, index) => ({
id: index + 10,
name: `普通记录 ${index + 1}`,
children: []
}))
]);
const expanded = (0, vue_2.ref)([]);
// 2.14.7 measures variable rows on mount. Rebuild its height cache after content changes;
// the host retains both the tree data and controlled expansion keys.
const heightRevision = (0, vue_2.ref)(0);
const columns = [
{
key: 'name',
dataKey: 'name',
title: '动态树与详情',
width: 470,
cellRenderer: ({ rowData }) => (0, vue_2.h)(TreeCell_vue_1.default, { name: rowData.name, detail: rowData.detail })
},
{ key: 'id', dataKey: 'id', title: 'ID', width: 100 }
];
function changeHeight() {
const child = rows.value[0].children[0];
child.detail = (child.detail?.length ?? 0) > 20 ? '短详情。' : '动态高度详情。'.repeat(30);
heightRevision.value += 1;
}
function appendChild() {
rows.value[0].children.push({ id: Date.now(), name: '新子记录', detail: '追加后仍保持展开。' });
expanded.value = [1];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(vue_1.Fragment, null, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: _cache[0] || (_cache[0] = $event => (expanded.value = expanded.value.length ? [] : [1]))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("展开或收起父记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: changeHeight
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("改变详情行高度", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
"native-type": "submit",
type: "default",
onClick: appendChild
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("追加子记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createElementVNode)("p", _hoisted_1, "展开键 " + (0, vue_1.toDisplayString)(expanded.value.join(',')) + ";子记录 " + (0, vue_1.toDisplayString)(rows.value[0].children.length), 1 /* TEXT */),
((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamTableV2), {
key: heightRevision.value,
"expanded-row-keys": expanded.value,
"onUpdate:expandedRowKeys": _cache[1] || (_cache[1] = $event => ((expanded).value = $event)),
"default-expanded-row-keys": expanded.value,
columns: columns,
data: rows.value,
width: 640,
height: 300,
"estimated-row-height": 52,
"expand-column-key": "name",
"row-key": "id",
"scrollbar-always-on": true
}, {
row: (0, vue_1.withCtx)(({ cells, rowData }) => [
(0, vue_1.createVNode)(DetailRow_vue_1.default, {
cells: cells,
"row-data": rowData
}, null, 8 /* PROPS */, ["cells", "row-data"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["expanded-row-keys", "default-expanded-row-keys", "data"]))
], 64 /* STABLE_FRAGMENT */));
};
}
});
exports.default.__scopeId = "data-v-0254bc2e";
},
"DetailRow.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = {
key: 0,
class: "tree-content"
};
const _hoisted_2 = { class: "example-paragraph" };
exports.default = {
__name: 'DetailRow',
props: {
cells: { type: Array, required: true },
rowData: { type: Object, required: true }
},
setup(__props) {
const props = __props;
const RenderCells = () => props.cells;
return (_ctx, _cache) => {
return (__props.rowData.detail)
? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createElementVNode)("strong", null, (0, vue_1.toDisplayString)(__props.rowData.name), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_2, (0, vue_1.toDisplayString)(__props.rowData.detail), 1 /* TEXT */)
]))
: ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(RenderCells, { key: 1 }));
};
}
};
exports.default.__scopeId = "data-v-d95e7e3a";
},
"TreeCell.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "tree-content" };
const _hoisted_2 = {
key: 0,
class: "example-paragraph"
};
exports.default = {
__name: 'TreeCell',
props: {
name: { type: String, required: true },
detail: { type: String, required: false, default: undefined }
},
setup(__props) {
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createElementVNode)("strong", null, (0, vue_1.toDisplayString)(__props.name), 1 /* TEXT */),
(__props.detail)
? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("p", _hoisted_2, (0, vue_1.toDisplayString)(__props.detail), 1 /* TEXT */))
: (0, vue_1.createCommentVNode)("v-if", true)
]));
};
}
};
exports.default.__scopeId = "data-v-e328dd23";
},
};
const __dependencies = {"Demo.vue":{"./TreeCell.vue":"TreeCell.vue","./DetailRow.vue":"DetailRow.vue"},"DetailRow.vue":{},"TreeCell.vue":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
p[data-v-0254bc2e]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.tree-content[data-v-d95e7e3a] {
width: 100%;
box-sizing: border-box;
white-space: normal;
padding: var(--asam-space-sm);
background: var(--asam-color-surface);
}
.tree-content p[data-v-d95e7e3a] {
margin: var(--asam-space-xs) 0;
}
p[data-v-d95e7e3a]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.tree-content[data-v-e328dd23] {
white-space: normal;
overflow-wrap: anywhere;
padding: var(--asam-space-sm);
}
.tree-content p[data-v-e328dd23] {
margin: var(--asam-space-xs) 0;
}
p[data-v-e328dd23]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
实例、类型与边界 ​
公开 API 与下列完整 SFC 来自同一组件入口。TS 和 JS 演示分别提供所有本地依赖文件;类型约束只出现在 TS 中。远程请求与业务持久化由宿主承担。
API
属性 AsamTableV2Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamTableV2Props)["style"] | — |
width | 表格宽度。 | number | — |
fixed | 列宽固定或可伸缩的标记。 | boolean | undefined | — |
data | 表格渲染的数据数组。 | any[] | — |
height | 表格高度。 | number | — |
maxHeight | 表格最大高度。 | number | undefined | — |
rowKey | 行的唯一键;省略时使用行索引。 | (AsamTableV2Props)["rowKey"] | — |
scrollbarAlwaysOn | 始终显示滚动条,而非仅在鼠标进入表格时显示。 | boolean | undefined | — |
onScroll | — | ((...args: any[]) => void) | undefined | — |
columns | 列定义数组。 | AsamTableV2HeaderCellSlotProps["column"][] | — |
useIsScrolling | — | boolean | undefined | — |
estimatedRowHeight | 动态高度行的预估行高。 | number | undefined | — |
rowHeight | 每行高度,用于计算表格总高度。 | number | undefined | — |
hScrollbarSize | 水平滚动条尺寸,避免水平与垂直滚动条重叠。 | number | undefined | — |
vScrollbarSize | 垂直滚动条尺寸,避免水平与垂直滚动条重叠。 | number | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamTableV2Props)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamTableV2Props)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamTableV2Props)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamTableV2Props)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamTableV2Props)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamTableV2Props)["onVnodeUnmounted"] | — |
class | 虚拟表格类名,会应用到左、右和主表格。 | string | undefined | — |
cache | 提前渲染的行数,用于改善性能。 | number | undefined | — |
onEndReached | — | ((remainDistance: number) => void) | undefined | — |
sortBy | 排序标记。 | AsamTableV2SortBy | undefined | — |
headerClass | 传给表头容器的自定义类名。 | (AsamTableV2Props)["headerClass"] | — |
headerProps | 传给表头组件的自定义参数。 | any | — |
headerCellProps | 传给表头单元格组件的自定义参数。 | any | — |
headerHeight | 表头高度由 height 指定;数组形式会按其长度渲染多行表头。 | (AsamTableV2Props)["headerHeight"] | — |
footerHeight | 底部元素高度;提供时计入表格高度计算。 | number | undefined | — |
rowClass | 传给行容器的自定义类名。 | (AsamTableV2Props)["rowClass"] | — |
rowProps | 传给行组件的自定义参数。 | any | — |
cellProps | 传给普通单元格的额外参数,不包括表头单元格。 | (AsamTableV2Props)["cellProps"] | — |
dataGetter | 自定义从数据来源读取数据的方法。 | (AsamTableV2Props)["dataGetter"] | — |
fixedData | 主体内容上方、表头下方固定行的数据。 | any[] | undefined | — |
expandColumnKey | 可展开行对应的列键。 | string | undefined | — |
expandedRowKeys | 展开行的键数组,可与 v-model 配合使用。 | AsamTableV2RowEventHandlerParams["rowKey"][] | undefined | — |
defaultExpandedRowKeys | 默认展开行的键数组,非响应式。 | AsamTableV2RowEventHandlerParams["rowKey"][] | undefined | — |
indentSize | 树形表格的水平缩进。 | number | undefined | — |
iconSize | — | number | undefined | — |
sortState | 多列排序标记。 | AsamTableV2SortState | undefined | — |
onExpandedRowsChange | — | AsamTableV2ExpandedRowsChangeHandler | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
onRowsRendered | — | (AsamTableV2Props)["onRowsRendered"] | — |
rowEventHandlers | 附加到各行的事件处理器集合。 | AsamTableV2RowEventHandlers | undefined | — |
size | — | enum"large" | "big" | "default" | "small"完整类型:AsamControlSize | undefined | undefined |
onColumnSort | — | (AsamTableV2Props)["onColumnSort"] | — |
实例方法与状态 AsamTableV2Expose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamTableV2Expose)["style"] | — |
width | — | number | — |
$ | — | AsamTableV2Expose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$attrs | — | AsamTableV2Expose["$attrs"] | — |
$refs | — | AsamTableV2Expose["$refs"] | — |
$slots | — | AsamTableV2Slots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: string, ...args: any[]) => void | — |
$el | — | any | — |
$options | — | (AsamTableV2Expose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamTableV2Expose)["$nextTick"] | — |
$watch | — | (AsamTableV2Expose)["$watch"] | — |
$route | 当前规范化路由位置,详见 RouteLocationNormalizedLoaded。 | AsamTableV2Expose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamTableV2Expose["$router"] | — |
fixed | — | boolean | — |
data | — | any[] | — |
height | — | number | — |
maxHeight | — | number | undefined | — |
rowKey | — | (AsamTableV2Expose)["rowKey"] | — |
scrollbarAlwaysOn | — | boolean | — |
onScroll | — | ((...args: any[]) => void) | undefined | — |
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
scrollTo | 滚动到给定位置 | (param: { scrollLeft?: number; scrollTop?: number; }) => void | — |
useIsScrolling | — | boolean | — |
estimatedRowHeight | — | number | — |
rowHeight | — | number | — |
hScrollbarSize | — | number | — |
vScrollbarSize | — | number | — |
class | — | string | undefined | — |
cache | — | number | — |
onEndReached | — | ((remainDistance: number) => void) | undefined | — |
sortBy | — | AsamTableV2SortBy | — |
headerClass | — | (AsamTableV2Expose)["headerClass"] | — |
headerProps | — | any | — |
headerCellProps | — | any | — |
headerHeight | — | (AsamTableV2Expose)["headerHeight"] | — |
footerHeight | — | number | — |
rowClass | — | (AsamTableV2Expose)["rowClass"] | — |
rowProps | — | any | — |
cellProps | — | (AsamTableV2Expose)["cellProps"] | — |
dataGetter | — | (AsamTableV2Expose)["dataGetter"] | — |
fixedData | — | any[] | undefined | — |
expandColumnKey | — | string | undefined | — |
expandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | — |
defaultExpandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | — |
indentSize | — | number | — |
iconSize | — | number | — |
sortState | — | AsamTableV2SortState | — |
onColumnSort | — | (AsamTableV2Expose)["onColumnSort"] | — |
onExpandedRowsChange | — | AsamTableV2ExpandedRowsChangeHandler | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
onRowsRendered | — | (AsamTableV2Expose)["onRowsRendered"] | — |
rowEventHandlers | — | AsamTableV2RowEventHandlers | undefined | — |
scrollToLeft | 滚动到指定水平位置。 | (scrollLeft: number) => void | — |
scrollToTop | 滚动到指定垂直位置。 | (scrollTop: number) => void | — |
scrollToRow | 滚动到指定行。 | (row: number, strategy?: AsamDynamicSizeGridAlignment) => void | — |
$props | — | AsamTableV2Props | — |
类型 AsamTableV2Instance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamTableV2Instance)["style"] | — |
width | — | number | — |
$ | — | AsamTableV2Expose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$attrs | — | AsamTableV2Expose["$attrs"] | — |
$refs | — | AsamTableV2Expose["$refs"] | — |
$slots | — | AsamTableV2Slots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: string, ...args: any[]) => void | — |
$el | — | any | — |
$options | — | (AsamTableV2Instance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamTableV2Instance)["$nextTick"] | — |
$watch | — | (AsamTableV2Instance)["$watch"] | — |
$route | 当前规范化路由位置,详见 RouteLocationNormalizedLoaded。 | AsamTableV2Expose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamTableV2Expose["$router"] | — |
fixed | — | boolean | — |
data | — | any[] | — |
height | — | number | — |
maxHeight | — | number | undefined | — |
rowKey | — | (AsamTableV2Instance)["rowKey"] | — |
scrollbarAlwaysOn | — | boolean | — |
onScroll | — | ((...args: any[]) => void) | undefined | — |
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
scrollTo | 滚动到给定位置 | (param: { scrollLeft?: number; scrollTop?: number; }) => void | — |
useIsScrolling | — | boolean | — |
estimatedRowHeight | — | number | — |
rowHeight | — | number | — |
hScrollbarSize | — | number | — |
vScrollbarSize | — | number | — |
class | — | string | undefined | — |
cache | — | number | — |
onEndReached | — | ((remainDistance: number) => void) | undefined | — |
sortBy | — | AsamTableV2SortBy | — |
headerClass | — | (AsamTableV2Instance)["headerClass"] | — |
headerProps | — | any | — |
headerCellProps | — | any | — |
headerHeight | — | (AsamTableV2Instance)["headerHeight"] | — |
footerHeight | — | number | — |
rowClass | — | (AsamTableV2Instance)["rowClass"] | — |
rowProps | — | any | — |
cellProps | — | (AsamTableV2Instance)["cellProps"] | — |
dataGetter | — | (AsamTableV2Instance)["dataGetter"] | — |
fixedData | — | any[] | undefined | — |
expandColumnKey | — | string | undefined | — |
expandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | — |
defaultExpandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | — |
indentSize | — | number | — |
iconSize | — | number | — |
sortState | — | AsamTableV2SortState | — |
onColumnSort | — | (AsamTableV2Instance)["onColumnSort"] | — |
onExpandedRowsChange | — | AsamTableV2ExpandedRowsChangeHandler | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
onRowsRendered | — | (AsamTableV2Instance)["onRowsRendered"] | — |
rowEventHandlers | — | AsamTableV2RowEventHandlers | undefined | — |
scrollToLeft | 滚动到指定水平位置。 | (scrollLeft: number) => void | — |
scrollToTop | 滚动到指定垂直位置。 | (scrollTop: number) => void | — |
scrollToRow | 滚动到指定行。 | (row: number, strategy?: AsamDynamicSizeGridAlignment) => void | — |
$props | — | AsamTableV2Props | — |
插槽 AsamTableV2Slots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
row | — | (AsamTableV2Slots)["row"] | — |
cell | — | (AsamTableV2Slots)["cell"] | — |
header | — | ((props: AsamTableV2CustomizedHeaderSlotParam) => any) | undefined | — |
header-cell | — | (AsamTableV2Slots)["header-cell"] | — |
footer | — | (() => any) | undefined | — |
empty | — | (() => any) | undefined | — |
overlay | — | (() => any) | undefined | — |
类型 AsamTableV2AutoResizerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disableWidth | — | boolean | — |
disableHeight | — | boolean | — |
onResize | — | (AsamTableV2AutoResizerProps)["onResize"] | — |
类型 AsamTableV2AutoResizerPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disableWidth | — | boolean | undefined | — |
disableHeight | — | boolean | undefined | — |
onResize | — | (AsamTableV2AutoResizerPropsPublic)["onResize"] | — |
类型 AsamTableV2Column
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 属性。 | enum"right" | "left" | "center"完整类型:"right" | "left" | "center" | undefined | — |
class | — | (AsamTableV2Column<T>)["class"] | — |
key | — | AsamTableV2RowEventHandlerParams["rowKey"] | undefined | — |
dataKey | — | AsamTableV2RowEventHandlerParams["rowKey"] | undefined | — |
fixed | — | enumFixedDir.LEFT | FixedDir.RIGHT完整类型:true | AsamTableV2FixedDir | undefined | — |
flexGrow | — | enum"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"完整类型:(AsamTableV2Column<T>)["flexGrow"] | — |
flexShrink | — | enum"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"完整类型:(AsamTableV2Column<T>)["flexShrink"] | — |
title | — | string | undefined | — |
hidden | — | boolean | undefined | — |
headerClass | — | (AsamTableV2Column<T>)["headerClass"] | — |
maxWidth | — | number | undefined | — |
minWidth | — | number | undefined | — |
style | — | AsamTableV2HeaderCellSlotProps["style"] | undefined | — |
sortable | — | boolean | undefined | — |
width | — | number | — |
cellRenderer | 渲染器。 | (AsamTableV2Column<T>)["cellRenderer"] | — |
headerCellRenderer | — | (AsamTableV2Column<T>)["headerCellRenderer"] | — |
类型 AsamTableV2ColumnResizeHandler
(column: AsamTableV2Column<T>, width: number): void
类型 AsamTableV2ColumnSortHandler
(params: AsamTableV2ColumnSortParams<Data>): void
类型 AsamTableV2ColumnSortParams
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | — | AsamTableV2ColumnSortParams<Data>["key"] | — |
column | — | (AsamTableV2ColumnSortParams<Data>)["column"] | — |
order | — | enumimport("element-plus").TableV2SortOrder.ASC | import("element-plus").TableV2SortOrder.DESC完整类型:AsamTableV2SortOrder | undefined | — |
类型 AsamTableV2Columns
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
length | 获取或设置数组长度,等于最高索引加一。 | number | — |
toString | 返回数组的字符串表示。 | () => string | undefined |
toLocaleString | 通过各元素的 toLocaleString 方法返回数组的本地化字符串。 | (AsamTableV2Columns<T>)["toLocaleString"] | undefined |
pop | 移除并返回最后一个元素;空数组返回 undefined 且不修改数组。 | () => AsamTableV2Column<T> | undefined | — |
push | 在末尾追加元素并返回新的数组长度。 | (...items: AsamTableV2Column<T>[]) => number | — |
concat | 合并数组,返回新数组而不修改原数组。 | 查看完整类型{ (...items: ConcatArray<AsamTableV2Column<T>>[]): AsamTableV2Column<T>[]; (...items: (AsamTableV2Column<T> | ConcatArray<AsamTableV2Column<T>>)[]): AsamTableV2Column<T>[]; } | — |
join | 以指定分隔符连接所有数组元素。 | (separator?: string) => string | — |
reverse | 原地反转数组,并返回同一数组引用。 | () => AsamTableV2Column<T>[] | — |
shift | 移除并返回首个元素;空数组返回 undefined 且不修改数组。 | () => AsamTableV2Column<T> | undefined | — |
slice | 返回数组区间的副本;起止位置支持负索引,例如 -2 表示倒数第二项。 | (start?: number, end?: number) => AsamTableV2Column<T>[] | — |
sort | 原地排序数组,并返回同一数组引用。 | (compareFn?: ((a: AsamTableV2Column<T>, b: AsamTableV2Column<T>) => number) | undefined) => AsamTableV2Columns<T> | — |
splice | 删除并可插入元素,返回被删除的元素。 | 查看完整类型{ (start: number, deleteCount?: number): AsamTableV2Column<T>[]; (start: number, deleteCount: number, ...items: AsamTableV2Column<T>[]): AsamTableV2Column<T>[]; } | — |
unshift | 在开头插入元素并返回新长度。 | (...items: AsamTableV2Column<T>[]) => number | — |
indexOf | 返回值首次出现的索引,不存在时返回 -1。 | (searchElement: AsamTableV2Column<T>, fromIndex?: number) => number | — |
lastIndexOf | 返回值最后出现的索引,不存在时返回 -1。 | (searchElement: AsamTableV2Column<T>, fromIndex?: number) => number | — |
every | 判断全部元素是否满足指定条件。 | 查看完整类型{ <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): boolean; } | — |
some | 判断是否至少有一个元素满足指定条件。 | (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any) => boolean | — |
forEach | 对各元素执行指定操作。 | (callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => void, thisArg?: any) => void | — |
map | 对各元素调用回调并返回结果数组。 | <U>(callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U, thisArg?: any) => U[] | — |
filter | 返回满足回调条件的元素。 | 查看完整类型{ <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S[]; (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T>[]; } | — |
reduce | 按升序对各元素进行归约,将累计结果传给下一次回调。 | (AsamTableV2Columns<T>)["reduce"] | — |
reduceRight | 按降序对各元素进行归约,将累计结果传给下一次回调。 | (AsamTableV2Columns<T>)["reduceRight"] | — |
find | 返回第一个满足条件的元素,否则返回 undefined。 | 查看完整类型{ <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T> | undefined; } | — |
findIndex | 返回第一个满足条件的索引,否则返回 -1。 | (predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any) => number | — |
fill | 将 start 至 end 区间的元素替换为固定值并返回数组。 | (value: AsamTableV2Column<T>, start?: number, end?: number) => AsamTableV2Columns<T> | — |
copyWithin | 将 start 至 end 区间复制到同一数组的 target 位置,并返回该数组。 | (target: number, start: number, end?: number) => AsamTableV2Columns<T> | — |
entries | 返回各项键值对的迭代器。 | () => ArrayIterator<[number, AsamTableV2Column<T>]> | — |
keys | 返回数组键的迭代器。 | () => ArrayIterator<number> | — |
values | 返回数组值的迭代器。 | () => ArrayIterator<AsamTableV2Column<T>> | — |
includes | 判断数组是否包含指定元素。 | (searchElement: AsamTableV2Column<T>, fromIndex?: number) => boolean | — |
flatMap | 映射各元素并将结果展开一层,相当于先 map 再 flat(1)。 | 查看完整类型<U, This = undefined>(callback: (this: This, value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U | readonly U[], thisArg?: This | undefined) => U[] | — |
flat | 按指定深度递归展开子数组,返回新数组。 | <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[] | — |
at | 返回指定索引处的元素。 | (index: number) => AsamTableV2Column<T> | undefined | — |
[Symbol.iterator] | 迭代器。 | () => ArrayIterator<AsamTableV2Column<T>> | — |
[Symbol.unscopables] | 在 with 语句中应排除的属性,其对应值为 true。 | 查看完整类型{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } | — |
类型 AsamTableV2ExpandedRowsChangeHandler
(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void
类型 AsamTableV2ExtraCellPropGetter
(params: Parameters<AsamTableV2ExtraCellPropGetter<T>>[0]): any
类型 AsamTableV2ExtractHeaderCellPropGetter
(params: Parameters<AsamTableV2ExtractHeaderCellPropGetter<T>>[0]): any
类型 AsamTableV2ExtractHeaderPropGetter
(params: { columns: AsamTableV2Column<T>[]; headerIndex: number; }): any
类型 AsamTableV2ExtractRowPropGetter
(params: Parameters<AsamTableV2ExtractRowPropGetter<T>>[0]): any
类型 AsamTableV2HeaderCellSlotProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
column | — | AsamTableV2HeaderCellSlotProps["column"] | — |
columnIndex | — | number | — |
headerIndex | — | number | — |
style | — | (AsamTableV2HeaderCellSlotProps)["style"] | — |
onColumnSorted | — | (e: MouseEvent) => void | — |
sortBy | — | AsamTableV2SortBy | — |
headerCellProps | — | any | — |
sortState | — | AsamTableV2SortState | undefined | — |
ns | — | 查看完整类型{ namespace: import("vue").ComputedRef<string>; b: (blockSuffix?: string) => string; e: (element?: string) => string; m: (modifier?: string) => string; be: (blockSuffix?: string, element?: string) => string; em: (element?: string, modifier?: string) => string; bm: (blockSuffix?: string, modifier?: string) => string; bem: (blockSuffix?: string, element?: string, modifier?: string) => string; is: { (name: string, state: boolean | undefined): string; (name: string): string; }; cssVar: (object: Record<string, string>) => Record<string, string>; cssVarName: (name: string) => string; cssVarBlock: (object: Record<string, string>) => Record<string, string>; cssVarBlockName: (name: string) => string; } | — |
t | — | AsamTableV2HeaderCellSlotProps["t"] | — |
class | — | string | — |
类型 AsamTableV2HeaderClassNameGetter
(params: { columns: AsamTableV2Column<T>[]; headerIndex: number; }): string
类型 AsamTableV2RowClassNameGetter
(params: Parameters<AsamTableV2RowClassNameGetter<T>>[0]): string
类型 AsamTableV2RowEventHandler
(params: AsamTableV2RowEventHandlerParams): void
类型 AsamTableV2RowEventHandlerParams
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rowKey | — | AsamTableV2RowEventHandlerParams["rowKey"] | — |
event | — | AsamTableV2RowEventHandlerParams["event"] | — |
rowData | — | any | — |
rowIndex | — | number | — |
类型 AsamTableV2RowEventHandlers
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
onClick | — | AsamTableV2RowEventHandler | undefined | — |
onContextmenu | — | AsamTableV2RowEventHandler | undefined | — |
onDblclick | — | AsamTableV2RowEventHandler | undefined | — |
onMouseenter | — | AsamTableV2RowEventHandler | undefined | — |
onMouseleave | — | AsamTableV2RowEventHandler | undefined | — |
类型 AsamTableV2RowExpandHandler
(params: AsamTableV2RowExpandParams): void
类型 AsamTableV2RowExpandParams
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
expanded | — | boolean | — |
rowKey | — | AsamTableV2RowEventHandlerParams["rowKey"] | — |
rowData | — | any | — |
rowIndex | — | number | — |
类型 AsamTableV2RowHeightChangeHandler
(row: AsamTableV2RowHeightChangedParams, fixedDirection: boolean | AsamTableV2FixedDir | undefined): void
类型 AsamTableV2RowHeightChangedParams
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rowKey | — | AsamTableV2RowEventHandlerParams["rowKey"] | — |
height | — | number | — |
rowIndex | — | number | — |
类型 AsamTableV2RowHoverHandler
(params: AsamTableV2RowHoverParams): void
类型 AsamTableV2RowHoverParams
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
event | — | MouseEvent | undefined | — |
hovered | — | boolean | — |
rowKey | — | AsamTableV2RowEventHandlerParams["rowKey"] | — |
rowData | — | any | — |
rowIndex | — | number | undefined | — |
类型 AsamTableV2SortBy
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | — | AsamTableV2RowEventHandlerParams["rowKey"] | — |
order | — | enumSortOrder.ASC | SortOrder.DESC完整类型:AsamTableV2SortOrder | — |
类型 AsamTableV2SortState
类型 AsamTableV2CustomizedHeaderSlotParam
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
cells | — | VNode<RendererNode, RendererElement, { [key: string]: any; }>[] | — |
columns | — | AsamTableV2Columns<T> | — |
headerIndex | — | number | — |
类型 AsamTableV2PropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamTableV2PropsPublic)["style"] | — |
width | — | number | — |
fixed | — | boolean | undefined | — |
data | — | any[] | — |
height | — | number | — |
maxHeight | — | number | undefined | — |
rowKey | — | (AsamTableV2PropsPublic)["rowKey"] | — |
scrollbarAlwaysOn | — | boolean | undefined | — |
onScroll | — | ((...args: any[]) => void) | undefined | — |
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
useIsScrolling | — | boolean | undefined | — |
estimatedRowHeight | — | number | undefined | — |
rowHeight | — | number | undefined | — |
hScrollbarSize | — | number | undefined | — |
vScrollbarSize | — | number | undefined | — |
class | — | string | undefined | — |
cache | — | number | undefined | — |
onEndReached | — | ((remainDistance: number) => void) | undefined | — |
sortBy | — | AsamTableV2SortBy | undefined | — |
headerClass | — | (AsamTableV2PropsPublic)["headerClass"] | — |
headerProps | — | any | — |
headerCellProps | — | any | — |
headerHeight | — | (AsamTableV2PropsPublic)["headerHeight"] | — |
footerHeight | — | number | undefined | — |
rowClass | — | (AsamTableV2PropsPublic)["rowClass"] | — |
rowProps | — | any | — |
cellProps | — | (AsamTableV2PropsPublic)["cellProps"] | — |
dataGetter | — | (AsamTableV2PropsPublic)["dataGetter"] | — |
fixedData | — | any[] | undefined | — |
expandColumnKey | — | string | undefined | — |
expandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | undefined | — |
defaultExpandedRowKeys | — | AsamTableV2RowEventHandlerParams["rowKey"][] | undefined | — |
indentSize | — | number | undefined | — |
iconSize | — | number | undefined | — |
sortState | — | AsamTableV2SortState | undefined | — |
onExpandedRowsChange | — | AsamTableV2ExpandedRowsChangeHandler | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
onRowsRendered | — | (AsamTableV2PropsPublic)["onRowsRendered"] | — |
rowEventHandlers | — | AsamTableV2RowEventHandlers | undefined | — |
size | — | enum"large" | "big" | "default" | "small"完整类型:AsamControlSize | undefined | — |
onColumnSort | — | (AsamTableV2PropsPublic)["onColumnSort"] | — |
类型 AsamTableV2RowProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rowKey | — | (AsamTableV2RowProps)["rowKey"] | — |
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
columnsStyles | — | (AsamTableV2RowProps)["columnsStyles"] | — |
isScrolling | — | boolean | — |
rowData | — | any | — |
rowIndex | — | number | — |
style | — | (AsamTableV2RowProps)["style"] | — |
estimatedRowHeight | — | number | undefined | — |
class | — | string | undefined | — |
expandColumnKey | — | string | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
rowEventHandlers | — | AsamTableV2RowEventHandlers | undefined | — |
depth | — | number | undefined | — |
onRowHover | — | AsamTableV2RowHoverHandler | undefined | — |
onRowHeightChange | — | AsamTableV2RowHeightChangeHandler | undefined | — |
类型 AsamTableV2RowPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columns | — | AsamTableV2HeaderCellSlotProps["column"][] | — |
columnsStyles | — | (AsamTableV2RowPropsPublic)["columnsStyles"] | — |
rowData | — | any | — |
rowIndex | — | number | — |
style | — | (AsamTableV2RowPropsPublic)["style"] | — |
rowKey | — | (AsamTableV2RowPropsPublic)["rowKey"] | — |
estimatedRowHeight | — | number | undefined | — |
class | — | string | undefined | — |
expandColumnKey | — | string | undefined | — |
onRowExpand | — | AsamTableV2RowExpandHandler | undefined | — |
rowEventHandlers | — | AsamTableV2RowEventHandlers | undefined | — |
depth | — | number | undefined | — |
isScrolling | — | boolean | undefined | — |
onRowHover | — | AsamTableV2RowHoverHandler | undefined | — |
onRowHeightChange | — | AsamTableV2RowHeightChangeHandler | undefined | — |
类型 AsamTableV2Alignment
类型 AsamTableV2FixedDir
类型 AsamTableV2SortOrder
类型 AsamTableV2Placeholder
用法与契约补充说明 ​
契约与组合 ​
columns 是渲染列定义,data 是宿主数据;width / height 必须是实际视窗尺寸。可用 AsamAutoResizer 观测有明确高度的父容器。基础固定行高用 rowHeight,动态行高用 estimatedRowHeight;2.14.7 在行挂载时测量实际高度;详情内容长度改变时,示例以 key 重建高度缓存,宿主继续保留数据与展开键。size 可选 large / big / default / small,未传时从最近的 ASAM 尺寸作用域继承,只负责品牌视觉标记;原生 rowHeight / headerHeight 默认值与显式值保持原样,尺寸不会替换业务内容的实际视窗约束。
契约与组合 ​
此入口渲染公开 原生虚拟表格,透传全部原生 props、监听器和 slots,并通过公开 ref 转发实例方法与 live 对象。ASAM 只增加 asam-table-v2 类和 data-asam-size,不调用私有 setup、不改写返回 VNode,也不引入原生缓存补丁。与原生相同,未传参数和显式 undefined / null / false 由原生默认值及校验处理。
契约与组合 ​
选择、编辑、过滤、排序、合并与动态树由 renderer / slots 和宿主状态组合承接。选择示例提供全选、半选表头和逐行选择;编辑提供开始、输入、Enter/失焦提交和 Escape 取消,并将单元格拆成独立文件。固定列、固定汇总行、分组表头、受控排序、宿主过滤、行状态与悬停、footer / empty / overlay 可以在同一真实入口组合。
契约与组合 ​
合并使用 row slot 的 cells,复制 VNode 后设置宽高;不要改传入的 cells。合并行应连续,并避免合并跨过虚拟视窗边界导致部分内容不可见;示例保留其他未合并列。树数据提供 children 和稳定 rowKey,通过 expandedRowKeys / expandColumnKey 控制展开;动态详情和追加节点由宿主更新实际树。
契约与组合 ​
scrollTo / scrollToLeft / scrollToTop / scrollToRow 是公开滚动方法。边界实例示例可到达最后一行并返回起点。column-sort / expanded-rows-change / row-expand / rows-rendered / scroll / end-reached 提供组合状态;排序和过滤由宿主更新 data,不在 computed 中修改传入数据。
组合能力与类型 ​
第一列复选框通过 cellRenderer 与宿主选择状态组合,renderers 完整示例同时包含表头全选及半选;不要假定 TableV2 自带 Table 的选择列注册机制。虚拟入口将选择、编辑、合并和过滤留给公开 renderer/slots 与宿主组合,本文对应多文件示例提供这些实际功能。原生 TableV2 的列、行、单元格、表头、排序和事件回调基础类型均从本入口 Types.ts 的具名 AsamTableV2 别名承接;生成的根出口由 ENG-006 提供,业务 Row 与单元格值类型应按各回调真实契约区分。
原生 slot 与声明边界 ​
原生实例 $props 类型未声明 onUpdate:expandedRowKeys 监听器键,运行时仍会触发 update:expandedRowKeys。这项声明限制仅描述 $props 类型的键缺失,不能据此判定模板 v-model:expanded-row-keys 不受支持;完整 TS 示例保留该模板绑定,类型检查与实际更新行为以消费项目的同配置编译和运行结果为准。
单列 sortBy 受控排序 ​
sortBy 保存单个 { key, order },示例在 column-sort 回调中回写此对象,并由宿主 computed 对数据副本排序。点击同列切换方向,切换列替换当前排序键;2.14.7 切换列时也根据当前 sortBy.order 翻转方向,宿主采用真实回调 order。layout-states 的 sortState 列映射仍作为另一种受控方式保留。
随滚动切换吸顶组 ​
示例将 scroll 事件的 scrollTop 保存为宿主状态,根据显式 rowHeight 和分组记录数计算当前组,再通过 computed 更新 fixedData。正常滚动、公开 scrollToTop 定位第三组和返回首组都驱动同一转换。这是随滚动变化的吸顶记录,与 layout-states 的恒定汇总行分别演示;动态行高应由宿主提供适合其数据的分组定位策略。
表头 renderer 筛选(多文件) ​
状态列的 headerCellRenderer 渲染本地 HeaderFilter SFC,由表头按钮打开原生 dialog。草稿选择只在确认时写回宿主,取消保留现有筛选,重置恢复全部记录;宿主 computed 更新展示数据。dialog 位于浏览器顶层,不依赖其他组件卡的浮层,也不接管表格内部筛选算法。TS / JS 变体均列出并提供入口与辅助文件。
更多参数与事件说明 ​
受控排序与覆盖层 ​
固定2.14.7在 sortState 未包含被点击列时,首次 column-sort 的 order 可能为 undefined;本入口的 ColumnSortParams、ColumnSortHandler、Props / PropsPublic、Expose / Instance 的 $props 与实际组件监听器使用同一排序约束,均保留这一真实分支。layout-states 宿主示例首次缺失顺序采用 ASC,再保存有效顺序;之后真实点击切换升降序。覆盖层以 <template v-if="loading" #overlay> 控制插槽本身;仅在插槽内部隐藏内容仍会保留拦截点击的空覆盖层。
关联组件
参数与事件补充说明
公开绑定参数,包含具备类型的事件监听器;默认值由运行时定义提供。
参数与事件说明
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
width
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
fixed
必填:否;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
未知 / 未声明固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
data
必填:是;声明来源:上游声明。
data 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认:[](2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
height
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
maxHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
rowKey
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:id(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
scrollbarAlwaysOn
必填:否;声明来源:上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
未知 / 未声明固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
onScroll
必填:否;声明来源:上游声明。
onScroll 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...args: any[]): void
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
useIsScrolling
必填:否;声明来源:上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
estimatedRowHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
rowHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:50(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
hScrollbarSize
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:6(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
vScrollbarSize
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:6(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
key
必填:否;声明来源:依赖声明。
ref
必填:否;声明来源:依赖声明。
ref 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型:保留在公开声明中,通过私有 Symbol 避免出现在编辑器自动补全中。
枚举:
true
ref_for
必填:否;声明来源:依赖声明。
ref_for 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
ref_key
必填:否;声明来源:依赖声明。
onVnodeBeforeMount
必填:否;声明来源:依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填:否;声明来源:依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填:否;声明来源:依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填:否;声明来源:依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填:否;声明来源:依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填:否;声明来源:依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
cache
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:2(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
onEndReached
必填:否;声明来源:上游声明。
onEndReached 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(remainDistance: number): void
sortBy
必填:否;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
sortBy.key:AsamTableV2RowEventHandlerParams["rowKey"]— 上游声明sortBy.order:AsamTableV2SortOrder— 上游声明枚举:
SortOrder.ASC/SortOrder.DESC
默认值与来源
未知 / 未声明固定上游文档默认:{}(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
headerClass
必填:否;声明来源:上游声明。
headerClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: {
/** Public prop alias follows the same actual sort payload as component bindings. */
columns: AsamTableV2Column<any>[]; headerIndex: number; }): string
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
headerProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
headerCellProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
headerHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:50(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
footerHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:0(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
rowClass
必填:否;声明来源:上游声明。
rowClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Props)["rowClass"]>, (...args: never[]) => unknown>>[0]): string
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
rowProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
cellProps
必填:否;声明来源:上游声明。
cellProps 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Props)["cellProps"]>, (...args: never[]) => unknown>>[0]): any
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
dataGetter
必填:否;声明来源:上游声明。
dataGetter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Props)["dataGetter"]>, (...args: never[]) => unknown>>[0]): any
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
fixedData
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
expandColumnKey
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
expandedRowKeys
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
defaultExpandedRowKeys
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
indentSize
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:12(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
iconSize
必填:否;声明来源:上游声明。
sortState
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:undefined(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
onExpandedRowsChange
必填:否;声明来源:上游声明。
onExpandedRowsChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
onRowsRendered
必填:否;声明来源:上游声明。
onRowsRendered 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Props)["onRowsRendered"]>, (...args: never[]) => unknown>>[0]): void
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
size
必填:否;声明来源:ASAM 声明。
size 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"large" / "big" / "default" / "small"
默认值与来源
undefined(已安装运行时;已安装组件)onColumnSort
必填:否;声明来源:ASAM 声明。
onColumnSort 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Props)["onColumnSort"]>, (...args: never[]) => unknown>>[0]): void
AsamTableV2Props 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableV2Props, AsamTableV2RowEventHandlerParams, AsamTableV2HeaderCellSlotProps, AsamTableV2SortBy, AsamTableV2SortOrder, AsamTableV2HeaderClassNameGetter, AsamTableV2Column, AsamTableV2RowClassNameGetter, AsamTableV2ExtraCellPropGetter, AsamTableV2SortState, AsamTableV2ExpandedRowsChangeHandler, AsamTableV2Expose, AsamTableV2RowExpandHandler, AsamTableV2RowExpandParams, AsamTableV2RowEventHandlers, AsamTableV2RowEventHandler, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2Props
type PublicContract = {
"style"?: (AsamTableV2Props)["style"];
readonly "width": number;
readonly "fixed"?: boolean | undefined;
readonly "data": any[];
readonly "height": number;
readonly "maxHeight"?: number | undefined;
readonly "rowKey"?: (AsamTableV2Props)["rowKey"];
readonly "scrollbarAlwaysOn"?: boolean | undefined;
readonly "onScroll"?: ((...args: any[]) => void) | undefined;
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
readonly "useIsScrolling"?: boolean | undefined;
readonly "estimatedRowHeight"?: number | undefined;
readonly "rowHeight"?: number | undefined;
readonly "hScrollbarSize"?: number | undefined;
readonly "vScrollbarSize"?: number | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamTableV2Props)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamTableV2Props)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamTableV2Props)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamTableV2Props)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamTableV2Props)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamTableV2Props)["onVnodeUnmounted"];
"class"?: string | undefined;
readonly "cache"?: number | undefined;
readonly "onEndReached"?: ((remainDistance: number) => void) | undefined;
readonly "sortBy"?: AsamTableV2SortBy | undefined;
readonly "headerClass"?: (AsamTableV2Props)["headerClass"];
readonly "headerProps"?: any;
readonly "headerCellProps"?: any;
readonly "headerHeight"?: (AsamTableV2Props)["headerHeight"];
readonly "footerHeight"?: number | undefined;
readonly "rowClass"?: (AsamTableV2Props)["rowClass"];
readonly "rowProps"?: any;
readonly "cellProps"?: (AsamTableV2Props)["cellProps"];
readonly "dataGetter"?: (AsamTableV2Props)["dataGetter"];
readonly "fixedData"?: any[] | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "expandedRowKeys"?: AsamTableV2RowEventHandlerParams["rowKey"][] | undefined;
readonly "defaultExpandedRowKeys"?: AsamTableV2RowEventHandlerParams["rowKey"][] | undefined;
readonly "indentSize"?: number | undefined;
readonly "iconSize"?: number | undefined;
readonly "sortState"?: AsamTableV2SortState | undefined;
readonly "onExpandedRowsChange"?: AsamTableV2ExpandedRowsChangeHandler | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "onRowsRendered"?: (AsamTableV2Props)["onRowsRendered"];
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
"size"?: AsamControlSize | undefined;
"onColumnSort"?: (AsamTableV2Props)["onColumnSort"];
};
完整的上游实例,包含全部公开方法与响应式状态。
参数与事件说明
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
width
必填:是;声明来源:上游声明。
$
必填:是;声明来源:依赖声明。
$ 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$data
必填:是;声明来源:依赖声明。
$attrs
必填:是;声明来源:依赖声明。
$attrs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$refs
必填:是;声明来源:依赖声明。
$refs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$slots
必填:是;声明来源:依赖声明。
$slots 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$root
必填:是;声明来源:依赖声明。
$parent
必填:是;声明来源:依赖声明。
$host
必填:是;声明来源:依赖声明。
$host 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
$emit
必填:是;声明来源:依赖声明。
$emit 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(event: string, ...args: any[]): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$el
必填:是;声明来源:依赖声明。
$options
必填:是;声明来源:依赖声明。
$options 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:复杂类型;完整类型见公开类型视图。
$forceUpdate
必填:是;声明来源:依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$nextTick
必填:是;声明来源:依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): Promise<void>
事件参数:<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$watch
必填:是;声明来源:依赖声明。
$watch 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamTableV2Expose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route
必填:是;声明来源:依赖声明。
$route 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamTableV2Expose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组;懒加载组件已解析并替换 components 中的值,可直接展示路由,不包含重定向记录。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.name:(NonNullable<AsamTableV2Expose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.query:(NonNullable<AsamTableV2Expose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组,也可能包含重定向记录,不能直接用于展示。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
嵌套展开边界:递归引用;完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录,而不是添加新记录。
枚举:
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同,也触发导航;除非传入 replace: true,否则会添加一条历史记录。
枚举:
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态;不能包含响应式值,也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamTableV2Expose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamTableV2Expose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填:是;声明来源:依赖声明。
$router 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamTableV2Expose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory,并配置服务器回退;createWebHashHistory 无需服务器配置,但搜索引擎无法处理其哈希路由,影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径;例如 base 为 /sub-folder 时,可将单页应用部署在域名的对应子目录。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置;使用 HTML5 History 时,通过 history.pushState 实际更新 URL。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似,但调用 history.replaceState,而非 history.pushState。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数:
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器;由浏览器前进、后退等外部导航,或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数:
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamTableV2HeaderCellSlotProps["class"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数:
(location: string): string嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数:
(): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数;可返回 Promise 延迟滚动。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamTableV2Expose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数;与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数:
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数;不要添加开头的 ?,与 parseQuery 的解析函数配套。
事件参数:
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名;未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名;未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $,使其匹配到路径结尾。
声明默认:
`true`(注释,实际运行默认以源码/安装包为准)枚举:
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认:
`false`(注释,实际运行默认以源码/安装包为准)枚举:
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认:
`false`(注释,实际运行默认以源码/安装包为准)枚举:
false/true
$router.addRoute:(NonNullable<AsamTableV2Expose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由,或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamTableV2Expose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数:
(): void$router.currentRoute:ShallowRef<AsamTableV2Expose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听,这是用于微前端的底层 API。
枚举:
false/true$router.hasRoute:(NonNullable<AsamTableV2Expose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamTableV2Expose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数:
(): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamTableV2Expose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置,包含带基础路径的 href;默认使用 router.currentRoute 作为 currentLocation,仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamTableV2Expose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamTableV2Expose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退,等价于 router.go(-1)。
事件参数:
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进,等价于 router.go(1)。
事件参数:
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数:
(delta: number): void$router.beforeEach:(NonNullable<AsamTableV2Expose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫,并返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamTableV2Expose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫,此时组件已获取且其他导航守卫已通过;返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamTableV2Expose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子,并返回移除此钩子的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamTableV2Expose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数,涵盖同步和异步异常、守卫返回或传给 next 的错误,以及路由异步组件解析错误。
事件参数:
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise,此时关联的异步进入钩子与异步组件均已解析;导航已完成时立即兑现。可用于保持服务端与客户端渲染一致;服务端需手动推入初始位置,客户端从 URL 自动读取。
事件参数:
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用,用户不应手动调用;客户端调用时会触发初次导航。
事件参数:
(app: App<any>): void
fixed
必填:是;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
data
必填:是;声明来源:上游声明。
data 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
height
必填:是;声明来源:上游声明。
maxHeight
必填:否;声明来源:上游声明。
rowKey
必填:是;声明来源:上游声明。
rowKey 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
scrollbarAlwaysOn
必填:是;声明来源:上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onScroll
必填:否;声明来源:上游声明。
onScroll 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...args: any[]): void
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
scrollTo
必填:是;声明来源:上游声明。
scrollTo 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(param: { scrollLeft?: number; scrollTop?: number; }): void
useIsScrolling
必填:是;声明来源:上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
estimatedRowHeight
必填:是;声明来源:上游声明。
rowHeight
必填:是;声明来源:上游声明。
hScrollbarSize
必填:是;声明来源:上游声明。
vScrollbarSize
必填:是;声明来源:上游声明。
class
必填:否;声明来源:上游声明。
cache
必填:是;声明来源:上游声明。
onEndReached
必填:否;声明来源:上游声明。
onEndReached 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(remainDistance: number): void
sortBy
必填:是;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
sortBy.key:AsamTableV2RowEventHandlerParams["rowKey"]— 上游声明sortBy.order:AsamTableV2SortOrder— 上游声明枚举:
SortOrder.ASC/SortOrder.DESC
headerClass
必填:否;声明来源:上游声明。
headerClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: {
/** Public prop alias follows the same actual sort payload as component bindings. */
columns: AsamTableV2Column<any>[]; headerIndex: number; }): string
headerProps
必填:否;声明来源:上游声明。
headerCellProps
必填:否;声明来源:上游声明。
headerHeight
必填:是;声明来源:上游声明。
headerHeight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
footerHeight
必填:是;声明来源:上游声明。
rowClass
必填:否;声明来源:上游声明。
rowClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Expose)["rowClass"]>, (...args: never[]) => unknown>>[0]): string
rowProps
必填:否;声明来源:上游声明。
cellProps
必填:否;声明来源:上游声明。
cellProps 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Expose)["cellProps"]>, (...args: never[]) => unknown>>[0]): any
dataGetter
必填:否;声明来源:上游声明。
dataGetter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Expose)["dataGetter"]>, (...args: never[]) => unknown>>[0]): any
fixedData
必填:否;声明来源:上游声明。
expandColumnKey
必填:否;声明来源:上游声明。
expandedRowKeys
必填:是;声明来源:上游声明。
expandedRowKeys 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
defaultExpandedRowKeys
必填:是;声明来源:上游声明。
defaultExpandedRowKeys 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
indentSize
必填:是;声明来源:上游声明。
iconSize
必填:是;声明来源:上游声明。
sortState
必填:是;声明来源:上游声明。
onColumnSort
必填:否;声明来源:上游声明。
onColumnSort 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Expose)["onColumnSort"]>, (...args: never[]) => unknown>>[0]): void
onExpandedRowsChange
必填:否;声明来源:上游声明。
onExpandedRowsChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
onRowsRendered
必填:否;声明来源:上游声明。
onRowsRendered 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Expose)["onRowsRendered"]>, (...args: never[]) => unknown>>[0]): void
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
scrollToLeft
必填:是;声明来源:上游声明。
scrollToLeft 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scrollLeft: number): void
scrollToTop
必填:是;声明来源:上游声明。
scrollToTop 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scrollTop: number): void
scrollToRow
必填:是;声明来源:上游声明。
scrollToRow 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: number, strategy?: AsamDynamicSizeGridAlignment | undefined): void
$props
必填:是;声明来源:ASAM 声明。
AsamTableV2Expose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, PropType, ComponentOptionsMixin, SlotsType, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTableV2Expose, AsamTableV2Props, AsamTableColumnExpose, AsamTableV2Slots, AsamTableV2HeaderCellSlotProps, AsamTableV2ExpandedRowsChangeHandler, AsamTableV2RowExpandHandler, AsamTableV2RowEventHandlers, AsamTableV2SortBy, AsamTableV2SortState, AsamTableV2RowEventHandlerParams, AsamTableV2CustomizedHeaderSlotParam, AsamTableV2SortOrder, AsamTableV2HeaderClassNameGetter, AsamTableV2Column, AsamTableV2RowClassNameGetter, AsamTableV2ExtraCellPropGetter, AsamTableV2RowExpandParams, AsamTableV2RowEventHandler, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2Expose
type PublicContract = {
readonly "style"?: (AsamTableV2Expose)["style"];
readonly "width": number;
"$": AsamTableV2Expose["$"];
"$data": AsamTableColumnExpose;
"$attrs": AsamTableV2Expose["$attrs"];
"$refs": AsamTableV2Expose["$refs"];
"$slots": AsamTableV2Slots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: string, ...args: any[]) => void;
"$el": any;
"$options": (AsamTableV2Expose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamTableV2Expose)["$nextTick"];
"$watch": (AsamTableV2Expose)["$watch"];
"$route": AsamTableV2Expose["$route"];
"$router": AsamTableV2Expose["$router"];
readonly "fixed": boolean;
readonly "data": any[];
readonly "height": number;
readonly "maxHeight"?: number | undefined;
readonly "rowKey": (AsamTableV2Expose)["rowKey"];
readonly "scrollbarAlwaysOn": boolean;
readonly "onScroll"?: ((...args: any[]) => void) | undefined;
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
"scrollTo": (param: { scrollLeft?: number; scrollTop?: number; }) => void;
readonly "useIsScrolling": boolean;
readonly "estimatedRowHeight": number;
readonly "rowHeight": number;
readonly "hScrollbarSize": number;
readonly "vScrollbarSize": number;
readonly "class"?: string | undefined;
readonly "cache": number;
readonly "onEndReached"?: ((remainDistance: number) => void) | undefined;
readonly "sortBy": AsamTableV2SortBy;
readonly "headerClass"?: (AsamTableV2Expose)["headerClass"];
readonly "headerProps"?: any;
readonly "headerCellProps"?: any;
readonly "headerHeight": (AsamTableV2Expose)["headerHeight"];
readonly "footerHeight": number;
readonly "rowClass"?: (AsamTableV2Expose)["rowClass"];
readonly "rowProps"?: any;
readonly "cellProps"?: (AsamTableV2Expose)["cellProps"];
readonly "dataGetter"?: (AsamTableV2Expose)["dataGetter"];
readonly "fixedData"?: any[] | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "expandedRowKeys": AsamTableV2RowEventHandlerParams["rowKey"][];
readonly "defaultExpandedRowKeys": AsamTableV2RowEventHandlerParams["rowKey"][];
readonly "indentSize": number;
readonly "iconSize": number;
readonly "sortState": AsamTableV2SortState;
readonly "onColumnSort"?: (AsamTableV2Expose)["onColumnSort"];
readonly "onExpandedRowsChange"?: AsamTableV2ExpandedRowsChangeHandler | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "onRowsRendered"?: (AsamTableV2Expose)["onRowsRendered"];
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
"scrollToLeft": (scrollLeft: number) => void;
"scrollToTop": (scrollTop: number) => void;
"scrollToRow": (row: number, strategy?: AsamDynamicSizeGridAlignment) => void;
readonly "$props": AsamTableV2Props;
};
参数与事件说明
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
width
必填:是;声明来源:上游声明。
$
必填:是;声明来源:依赖声明。
$ 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$data
必填:是;声明来源:依赖声明。
$attrs
必填:是;声明来源:依赖声明。
$attrs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$refs
必填:是;声明来源:依赖声明。
$refs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$slots
必填:是;声明来源:依赖声明。
$slots 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$root
必填:是;声明来源:依赖声明。
$parent
必填:是;声明来源:依赖声明。
$host
必填:是;声明来源:依赖声明。
$host 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
$emit
必填:是;声明来源:依赖声明。
$emit 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(event: string, ...args: any[]): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$el
必填:是;声明来源:依赖声明。
$options
必填:是;声明来源:依赖声明。
$options 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:复杂类型;完整类型见公开类型视图。
$forceUpdate
必填:是;声明来源:依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$nextTick
必填:是;声明来源:依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): Promise<void>
事件参数:<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$watch
必填:是;声明来源:依赖声明。
$watch 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamTableV2Instance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route
必填:是;声明来源:依赖声明。
$route 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamTableV2Expose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组;懒加载组件已解析并替换 components 中的值,可直接展示路由,不包含重定向记录。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.name:(NonNullable<AsamTableV2Expose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.query:(NonNullable<AsamTableV2Expose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组,也可能包含重定向记录,不能直接用于展示。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
嵌套展开边界:递归引用;完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录,而不是添加新记录。
枚举:
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同,也触发导航;除非传入 replace: true,否则会添加一条历史记录。
枚举:
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamTableV2Expose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态;不能包含响应式值,也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamTableV2Expose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamTableV2Expose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填:是;声明来源:依赖声明。
$router 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamTableV2Expose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory,并配置服务器回退;createWebHashHistory 无需服务器配置,但搜索引擎无法处理其哈希路由,影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径;例如 base 为 /sub-folder 时,可将单页应用部署在域名的对应子目录。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置;使用 HTML5 History 时,通过 history.pushState 实际更新 URL。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似,但调用 history.replaceState,而非 history.pushState。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数:
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器;由浏览器前进、后退等外部导航,或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数:
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamTableV2HeaderCellSlotProps["class"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数:
(location: string): string嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数:
(): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数;可返回 Promise 延迟滚动。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamTableV2Expose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数;与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数:
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数;不要添加开头的 ?,与 parseQuery 的解析函数配套。
事件参数:
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名;未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名;未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $,使其匹配到路径结尾。
声明默认:
`true`(注释,实际运行默认以源码/安装包为准)枚举:
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认:
`false`(注释,实际运行默认以源码/安装包为准)枚举:
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认:
`false`(注释,实际运行默认以源码/安装包为准)枚举:
false/true
$router.addRoute:(NonNullable<AsamTableV2Expose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由,或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamTableV2Expose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数:
(): void$router.currentRoute:ShallowRef<AsamTableV2Expose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听,这是用于微前端的底层 API。
枚举:
false/true$router.hasRoute:(NonNullable<AsamTableV2Expose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamTableV2Expose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数:
(): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamTableV2Expose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置,包含带基础路径的 href;默认使用 router.currentRoute 作为 currentLocation,仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamTableV2Expose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamTableV2Expose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退,等价于 router.go(-1)。
事件参数:
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进,等价于 router.go(1)。
事件参数:
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数:
(delta: number): void$router.beforeEach:(NonNullable<AsamTableV2Expose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫,并返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamTableV2Expose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫,此时组件已获取且其他导航守卫已通过;返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamTableV2Expose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子,并返回移除此钩子的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamTableV2Expose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数,涵盖同步和异步异常、守卫返回或传给 next 的错误,以及路由异步组件解析错误。
事件参数:
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2Expose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise,此时关联的异步进入钩子与异步组件均已解析;导航已完成时立即兑现。可用于保持服务端与客户端渲染一致;服务端需手动推入初始位置,客户端从 URL 自动读取。
事件参数:
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用,用户不应手动调用;客户端调用时会触发初次导航。
事件参数:
(app: App<any>): void
fixed
必填:是;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
data
必填:是;声明来源:上游声明。
data 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
height
必填:是;声明来源:上游声明。
maxHeight
必填:否;声明来源:上游声明。
rowKey
必填:是;声明来源:上游声明。
rowKey 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
scrollbarAlwaysOn
必填:是;声明来源:上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onScroll
必填:否;声明来源:上游声明。
onScroll 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...args: any[]): void
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
scrollTo
必填:是;声明来源:上游声明。
scrollTo 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(param: { scrollLeft?: number; scrollTop?: number; }): void
useIsScrolling
必填:是;声明来源:上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
estimatedRowHeight
必填:是;声明来源:上游声明。
rowHeight
必填:是;声明来源:上游声明。
hScrollbarSize
必填:是;声明来源:上游声明。
vScrollbarSize
必填:是;声明来源:上游声明。
class
必填:否;声明来源:上游声明。
cache
必填:是;声明来源:上游声明。
onEndReached
必填:否;声明来源:上游声明。
onEndReached 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(remainDistance: number): void
sortBy
必填:是;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
sortBy.key:AsamTableV2RowEventHandlerParams["rowKey"]— 上游声明sortBy.order:AsamTableV2SortOrder— 上游声明枚举:
SortOrder.ASC/SortOrder.DESC
headerClass
必填:否;声明来源:上游声明。
headerClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: {
/** Public prop alias follows the same actual sort payload as component bindings. */
columns: AsamTableV2Column<any>[]; headerIndex: number; }): string
headerProps
必填:否;声明来源:上游声明。
headerCellProps
必填:否;声明来源:上游声明。
headerHeight
必填:是;声明来源:上游声明。
headerHeight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
footerHeight
必填:是;声明来源:上游声明。
rowClass
必填:否;声明来源:上游声明。
rowClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Instance)["rowClass"]>, (...args: never[]) => unknown>>[0]): string
rowProps
必填:否;声明来源:上游声明。
cellProps
必填:否;声明来源:上游声明。
cellProps 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Instance)["cellProps"]>, (...args: never[]) => unknown>>[0]): any
dataGetter
必填:否;声明来源:上游声明。
dataGetter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Instance)["dataGetter"]>, (...args: never[]) => unknown>>[0]): any
fixedData
必填:否;声明来源:上游声明。
expandColumnKey
必填:否;声明来源:上游声明。
expandedRowKeys
必填:是;声明来源:上游声明。
expandedRowKeys 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
defaultExpandedRowKeys
必填:是;声明来源:上游声明。
defaultExpandedRowKeys 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
indentSize
必填:是;声明来源:上游声明。
iconSize
必填:是;声明来源:上游声明。
sortState
必填:是;声明来源:上游声明。
onColumnSort
必填:否;声明来源:上游声明。
onColumnSort 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Instance)["onColumnSort"]>, (...args: never[]) => unknown>>[0]): void
onExpandedRowsChange
必填:否;声明来源:上游声明。
onExpandedRowsChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
onRowsRendered
必填:否;声明来源:上游声明。
onRowsRendered 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Instance)["onRowsRendered"]>, (...args: never[]) => unknown>>[0]): void
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
scrollToLeft
必填:是;声明来源:上游声明。
scrollToLeft 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scrollLeft: number): void
scrollToTop
必填:是;声明来源:上游声明。
scrollToTop 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scrollTop: number): void
scrollToRow
必填:是;声明来源:上游声明。
scrollToRow 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: number, strategy?: AsamDynamicSizeGridAlignment | undefined): void
$props
必填:是;声明来源:ASAM 声明。
AsamTableV2Instance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ExtractPropTypes, PropType, ComponentOptionsMixin, SlotsType, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamTableV2Instance, AsamTableV2Props, AsamTableV2Expose, AsamTableColumnExpose, AsamTableV2Slots, AsamTableV2HeaderCellSlotProps, AsamTableV2ExpandedRowsChangeHandler, AsamTableV2RowExpandHandler, AsamTableV2RowEventHandlers, AsamTableV2SortBy, AsamTableV2SortState, AsamTableV2RowEventHandlerParams, AsamTableV2CustomizedHeaderSlotParam, AsamTableV2SortOrder, AsamTableV2HeaderClassNameGetter, AsamTableV2Column, AsamTableV2RowClassNameGetter, AsamTableV2ExtraCellPropGetter, AsamTableV2RowExpandParams, AsamTableV2RowEventHandler, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2Instance
type PublicContract = {
readonly "style"?: (AsamTableV2Instance)["style"];
readonly "width": number;
"$": AsamTableV2Expose["$"];
"$data": AsamTableColumnExpose;
"$attrs": AsamTableV2Expose["$attrs"];
"$refs": AsamTableV2Expose["$refs"];
"$slots": AsamTableV2Slots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: string, ...args: any[]) => void;
"$el": any;
"$options": (AsamTableV2Instance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamTableV2Instance)["$nextTick"];
"$watch": (AsamTableV2Instance)["$watch"];
"$route": AsamTableV2Expose["$route"];
"$router": AsamTableV2Expose["$router"];
readonly "fixed": boolean;
readonly "data": any[];
readonly "height": number;
readonly "maxHeight"?: number | undefined;
readonly "rowKey": (AsamTableV2Instance)["rowKey"];
readonly "scrollbarAlwaysOn": boolean;
readonly "onScroll"?: ((...args: any[]) => void) | undefined;
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
"scrollTo": (param: { scrollLeft?: number; scrollTop?: number; }) => void;
readonly "useIsScrolling": boolean;
readonly "estimatedRowHeight": number;
readonly "rowHeight": number;
readonly "hScrollbarSize": number;
readonly "vScrollbarSize": number;
readonly "class"?: string | undefined;
readonly "cache": number;
readonly "onEndReached"?: ((remainDistance: number) => void) | undefined;
readonly "sortBy": AsamTableV2SortBy;
readonly "headerClass"?: (AsamTableV2Instance)["headerClass"];
readonly "headerProps"?: any;
readonly "headerCellProps"?: any;
readonly "headerHeight": (AsamTableV2Instance)["headerHeight"];
readonly "footerHeight": number;
readonly "rowClass"?: (AsamTableV2Instance)["rowClass"];
readonly "rowProps"?: any;
readonly "cellProps"?: (AsamTableV2Instance)["cellProps"];
readonly "dataGetter"?: (AsamTableV2Instance)["dataGetter"];
readonly "fixedData"?: any[] | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "expandedRowKeys": AsamTableV2RowEventHandlerParams["rowKey"][];
readonly "defaultExpandedRowKeys": AsamTableV2RowEventHandlerParams["rowKey"][];
readonly "indentSize": number;
readonly "iconSize": number;
readonly "sortState": AsamTableV2SortState;
readonly "onColumnSort"?: (AsamTableV2Instance)["onColumnSort"];
readonly "onExpandedRowsChange"?: AsamTableV2ExpandedRowsChangeHandler | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "onRowsRendered"?: (AsamTableV2Instance)["onRowsRendered"];
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
"scrollToLeft": (scrollLeft: number) => void;
"scrollToTop": (scrollTop: number) => void;
"scrollToRow": (row: number, strategy?: AsamDynamicSizeGridAlignment) => void;
readonly "$props": AsamTableV2Props;
};
作用域插槽保留上游实例契约。
参数与事件说明
row
必填:否;声明来源:上游声明。
row 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: Parameters<Extract<NonNullable<(AsamTableV2Slots)["row"]>, (...args: never[]) => unknown>>[0]): any
cell
必填:否;声明来源:上游声明。
cell 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: Parameters<Extract<NonNullable<(AsamTableV2Slots)["cell"]>, (...args: never[]) => unknown>>[0]): any
header
必填:否;声明来源:上游声明。
header 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: AsamTableV2CustomizedHeaderSlotParam): any
header-cell
必填:否;声明来源:上游声明。
header-cell 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: Parameters<Extract<NonNullable<(AsamTableV2Slots)["header-cell"]>, (...args: never[]) => unknown>>[0]): any
footer
必填:否;声明来源:上游声明。
footer 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): any
empty
必填:否;声明来源:上游声明。
empty 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): any
overlay
必填:否;声明来源:上游声明。
overlay 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): any
AsamTableV2Slots 公开类型视图
import type { AsamTableV2Slots, AsamTableV2CustomizedHeaderSlotParam } from '@asam-ui/ui';
// AsamTableV2Slots
type PublicContract = {
readonly "row"?: (AsamTableV2Slots)["row"];
readonly "cell"?: (AsamTableV2Slots)["cell"];
readonly "header"?: ((props: AsamTableV2CustomizedHeaderSlotParam) => any) | undefined;
readonly "header-cell"?: (AsamTableV2Slots)["header-cell"];
readonly "footer"?: (() => any) | undefined;
readonly "empty"?: (() => any) | undefined;
readonly "overlay"?: (() => any) | undefined;
};
参数与事件说明
disableWidth
必填:是;声明来源:上游声明。
disableWidth 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
disableHeight
必填:是;声明来源:上游声明。
disableHeight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onResize
必填:否;声明来源:上游声明。
onResize 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(event: { height: number; width: number; }): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableV2AutoResizerProps 公开类型视图
import type { AsamTableV2AutoResizerProps, AsamTableV2Expose } from '@asam-ui/ui';
// AsamTableV2AutoResizerProps
type PublicContract = {
readonly "disableWidth": boolean;
readonly "disableHeight": boolean;
readonly "onResize"?: (AsamTableV2AutoResizerProps)["onResize"];
};
参数与事件说明
disableWidth
必填:否;声明来源:上游声明。
disableWidth 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
disableHeight
必填:否;声明来源:上游声明。
disableHeight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onResize
必填:否;声明来源:上游声明。
onResize 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(event: { height: number; width: number; }): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableV2AutoResizerPropsPublic 公开类型视图
import type { AsamTableV2AutoResizerPropsPublic, AsamTableV2Props, AsamTableV2AutoResizerProps } from '@asam-ui/ui';
// AsamTableV2AutoResizerPropsPublic
type PublicContract = {
readonly "disableWidth"?: boolean | undefined;
readonly "disableHeight"?: boolean | undefined;
readonly "onResize"?: (AsamTableV2AutoResizerPropsPublic)["onResize"];
};
参数与事件说明
align
必填:否;声明来源:上游声明。
align 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"right" / "left" / "center"
class
必填:否;声明来源:上游声明。
class 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Column<T>)["class"]>, (...args: never[]) => unknown>>[0]): string
key
必填:否;声明来源:上游声明。
dataKey
必填:否;声明来源:上游声明。
fixed
必填:否;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:true / FixedDir.LEFT / FixedDir.RIGHT
flexGrow
必填:否;声明来源:上游声明。
flexGrow 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"-moz-initial" / "inherit" / "initial" / "revert" / "revert-layer" / "unset"
flexShrink
必填:否;声明来源:上游声明。
flexShrink 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"-moz-initial" / "inherit" / "initial" / "revert" / "revert-layer" / "unset"
title
必填:否;声明来源:上游声明。
hidden
必填:否;声明来源:上游声明。
hidden 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
headerClass
必填:否;声明来源:上游声明。
headerClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Column<T>)["headerClass"]>, (...args: never[]) => unknown>>[0]): string
maxWidth
必填:否;声明来源:上游声明。
minWidth
必填:否;声明来源:上游声明。
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
sortable
必填:否;声明来源:上游声明。
sortable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
width
必填:是;声明来源:上游声明。
cellRenderer
必填:否;声明来源:上游声明。
cellRenderer 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Column<T>)["cellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>
headerCellRenderer
必填:否;声明来源:上游声明。
headerCellRenderer 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2Column<T>)["headerCellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>
AsamTableV2Column 公开类型视图
import type { VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableV2Column, AsamTableV2RowEventHandlerParams, AsamTableV2FixedDir, AsamTableV2Props, AsamTableV2HeaderCellSlotProps } from '@asam-ui/ui';
// AsamTableV2Column
type PublicContract<T = any> = {
"align"?: "right" | "left" | "center" | undefined;
"class"?: (AsamTableV2Column<T>)["class"];
"key"?: AsamTableV2RowEventHandlerParams["rowKey"] | undefined;
"dataKey"?: AsamTableV2RowEventHandlerParams["rowKey"] | undefined;
"fixed"?: true | AsamTableV2FixedDir | undefined;
"flexGrow"?: (AsamTableV2Column<T>)["flexGrow"];
"flexShrink"?: (AsamTableV2Column<T>)["flexShrink"];
"title"?: string | undefined;
"hidden"?: boolean | undefined;
"headerClass"?: (AsamTableV2Column<T>)["headerClass"];
"maxWidth"?: number | undefined;
"minWidth"?: number | undefined;
"style"?: AsamTableV2HeaderCellSlotProps["style"] | undefined;
"sortable"?: boolean | undefined;
"width": number;
"cellRenderer"?: (AsamTableV2Column<T>)["cellRenderer"];
"headerCellRenderer"?: (AsamTableV2Column<T>)["headerCellRenderer"];
[key: string]: any;
};
AsamTableV2ColumnResizeHandler 公开类型视图
import type { AsamTableV2ColumnResizeHandler, AsamTableV2Column, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2ColumnResizeHandler
type PublicContract<T> = {
(column: AsamTableV2Column<T>, width: number): void;
};
AsamTableV2ColumnSortHandler 公开类型视图
import type { AsamTableV2ColumnSortHandler, AsamTableV2ColumnSortParams } from '@asam-ui/ui';
// AsamTableV2ColumnSortHandler
type PublicContract<Data> = {
(params: AsamTableV2ColumnSortParams<Data>): void;
};
在 2.14.7 中,受控 sortState 缺少对应键时,首次点击产生 undefined 排序方向。
参数与事件说明
key
必填:是;声明来源:上游声明。
column
必填:是;声明来源:上游声明。
column 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
column.align:"right" | "left" | "center" | undefined— 上游声明属性。
固定上游文档默认:
left(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"right"/"left"/"center"column.class:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["class"]— 上游声明列的类名。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["class"]>, (...args: never[]) => unknown>>[0]): stringcolumn.key:AsamTableV2ColumnSortParams<Data>["key"] | undefined— 上游声明唯一标志
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.dataKey:AsamTableV2ColumnSortParams<Data>["key"] | undefined— 上游声明数据的唯一标识。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.fixed:true | AsamTableV2FixedDir | undefined— 上游声明列的固定方向。
固定上游文档默认:
false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
true/FixedDir.LEFT/FixedDir.RIGHTcolumn.flexGrow:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["flexGrow"]— 上游声明CSSProperties 中的 flexGrow;仅在非固定表格中生效。
固定上游文档默认:
0(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"-moz-initial"/"inherit"/"initial"/"revert"/"revert-layer"/"unset"column.flexShrink:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["flexShrink"]— 上游声明CSSProperties 中的 flexShrink;仅在非固定表格中生效。
固定上游文档默认:
1(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"-moz-initial"/"inherit"/"initial"/"revert"/"revert-layer"/"unset"column.title:string | undefined— 上游声明表头单元格默认显示的文本。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.hidden:boolean | undefined— 上游声明是否隐藏此列。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
false/truecolumn.headerClass:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["headerClass"]— 上游声明用于自定义表头列的类名。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["headerClass"]>, (...args: never[]) => unknown>>[0]): stringcolumn.maxWidth:number | undefined— 上游声明列的最大宽度。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.minWidth:number | undefined— 上游声明列的最小宽度。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.style:AsamTableV2HeaderCellSlotProps["style"] | undefined— 上游声明列单元格自定义样式,将与网格单元格样式合并。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)嵌套展开边界:大型实例类型;完整类型见公开类型视图。
column.sortable:boolean | undefined— 上游声明是否允许列排序。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
false/truecolumn.width:number— 上游声明列宽。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.cellRenderer:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["cellRenderer"]— 上游声明渲染器。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["cellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>column.headerCellRenderer:(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["headerCellRenderer"]— 上游声明自定义表头渲染器。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<(AsamTableV2ColumnSortParams<Data>)["column"]>)["headerCellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>
order
必填:是;声明来源:ASAM 声明。
order 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:import("element-plus").TableV2SortOrder.ASC / import("element-plus").TableV2SortOrder.DESC
AsamTableV2ColumnSortParams 公开类型视图
import type { VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableV2ColumnSortParams, AsamTableV2Column, AsamTableV2FixedDir, AsamTableV2Props, AsamTableV2HeaderCellSlotProps, AsamTableV2SortOrder } from '@asam-ui/ui';
// AsamTableV2ColumnSortParams
type PublicContract<Data> = {
"key": AsamTableV2ColumnSortParams<Data>["key"];
"column": (AsamTableV2ColumnSortParams<Data>)["column"];
"order": AsamTableV2SortOrder | undefined;
};
参数与事件说明
length
必填:是;声明来源:依赖声明。
toString
必填:是;声明来源:依赖声明。
toString 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): string
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;ASAM 声明)toLocaleString
必填:是;声明来源:依赖声明。
toLocaleString 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): string
事件参数完整签名见公开类型视图:(AsamTableV2Columns<T>)["toLocaleString"]。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;ASAM 声明)pop
必填:是;声明来源:依赖声明。
pop 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): AsamTableV2Column<T> | undefined
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
push
必填:是;声明来源:依赖声明。
push 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...items: AsamTableV2Column<T>[]): number
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
concat
必填:是;声明来源:依赖声明。
concat 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...items: ConcatArray<AsamTableV2Column<T>>[]): AsamTableV2Column<T>[]
事件参数:(...items: (AsamTableV2Column<T> | ConcatArray<AsamTableV2Column<T>>)[]): AsamTableV2Column<T>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
join
必填:是;声明来源:依赖声明。
join 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(separator?: string | undefined): string
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
reverse
必填:是;声明来源:依赖声明。
reverse 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): AsamTableV2Column<T>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
shift
必填:是;声明来源:依赖声明。
shift 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): AsamTableV2Column<T> | undefined
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
slice
必填:是;声明来源:依赖声明。
slice 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(start?: number | undefined, end?: number | undefined): AsamTableV2Column<T>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
sort
必填:是;声明来源:依赖声明。
sort 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(compareFn?: ((a: AsamTableV2Column<T>, b: AsamTableV2Column<T>) => number) | undefined): AsamTableV2Columns<T>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
splice
必填:是;声明来源:依赖声明。
splice 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(start: number, deleteCount?: number | undefined): AsamTableV2Column<T>[]
事件参数:(start: number, deleteCount: number, ...items: AsamTableV2Column<T>[]): AsamTableV2Column<T>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
unshift
必填:是;声明来源:依赖声明。
unshift 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...items: AsamTableV2Column<T>[]): number
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
indexOf
必填:是;声明来源:依赖声明。
indexOf 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(searchElement: AsamTableV2Column<T>, fromIndex?: number | undefined): number
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
lastIndexOf
必填:是;声明来源:依赖声明。
lastIndexOf 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(searchElement: AsamTableV2Column<T>, fromIndex?: number | undefined): number
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
every
必填:是;声明来源:依赖声明。
every 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): this is S[]
事件参数:(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): boolean
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
some
必填:是;声明来源:依赖声明。
some 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): boolean
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
forEach
必填:是;声明来源:依赖声明。
forEach 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => void, thisArg?: any): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
map
必填:是;声明来源:依赖声明。
map 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<U>(callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U, thisArg?: any): U[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
filter
必填:是;声明来源:依赖声明。
filter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S[]
事件参数:(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
reduce
必填:是;声明来源:依赖声明。
reduce 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(callbackfn: (previousValue: AsamTableV2Column<T>, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => AsamTableV2Column<T>): AsamTableV2Column<T>
事件参数:(callbackfn: (previousValue: AsamTableV2Column<T>, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => AsamTableV2Column<T>, initialValue: AsamTableV2Column<T>): AsamTableV2Column<T>
事件参数:<U>(callbackfn: (previousValue: U, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => U, initialValue: U): U
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
reduceRight
必填:是;声明来源:依赖声明。
reduceRight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(callbackfn: (previousValue: AsamTableV2Column<T>, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => AsamTableV2Column<T>): AsamTableV2Column<T>
事件参数:(callbackfn: (previousValue: AsamTableV2Column<T>, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => AsamTableV2Column<T>, initialValue: AsamTableV2Column<T>): AsamTableV2Column<T>
事件参数:<U>(callbackfn: (previousValue: U, currentValue: AsamTableV2Column<T>, currentIndex: number, array: AsamTableV2Column<T>[]) => U, initialValue: U): U
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
find
必填:是;声明来源:依赖声明。
find 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S | undefined
事件参数:(predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T> | undefined
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
findIndex
必填:是;声明来源:依赖声明。
findIndex 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any): number
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
fill
必填:是;声明来源:依赖声明。
fill 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: AsamTableV2Column<T>, start?: number | undefined, end?: number | undefined): AsamTableV2Columns<T>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
copyWithin
必填:是;声明来源:依赖声明。
copyWithin 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(target: number, start: number, end?: number | undefined): AsamTableV2Columns<T>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
entries
必填:是;声明来源:依赖声明。
entries 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): ArrayIterator<[number, AsamTableV2Column<T>]>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
keys
必填:是;声明来源:依赖声明。
keys 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): ArrayIterator<number>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
values
必填:是;声明来源:依赖声明。
values 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): ArrayIterator<AsamTableV2Column<T>>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
includes
必填:是;声明来源:依赖声明。
includes 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(searchElement: AsamTableV2Column<T>, fromIndex?: number | undefined): boolean
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
flatMap
必填:是;声明来源:依赖声明。
flatMap 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<U, This = undefined>(callback: (this: This, value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U | readonly U[], thisArg?: This | undefined): U[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
flat
必填:是;声明来源:依赖声明。
flat 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
at
必填:是;声明来源:依赖声明。
at 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(index: number): AsamTableV2Column<T> | undefined
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
[Symbol.iterator]
必填:是;声明来源:依赖声明。
[Symbol.iterator] 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): ArrayIterator<AsamTableV2Column<T>>
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
[Symbol.unscopables]
必填:是;声明来源:依赖声明。
[Symbol.unscopables] 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
AsamTableV2Columns 公开类型视图
import type { AsamTableV2Columns, AsamTableV2Props, AsamTableV2HeaderCellSlotProps, AsamTableV2Column, AsamTableV2Expose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2Columns
type PublicContract<T> = {
"length": number;
"toString": () => string;
"toLocaleString": (AsamTableV2Columns<T>)["toLocaleString"];
"pop": () => AsamTableV2Column<T> | undefined;
"push": (...items: AsamTableV2Column<T>[]) => number;
"concat": { (...items: ConcatArray<AsamTableV2Column<T>>[]): AsamTableV2Column<T>[]; (...items: (AsamTableV2Column<T> | ConcatArray<AsamTableV2Column<T>>)[]): AsamTableV2Column<T>[]; };
"join": (separator?: string) => string;
"reverse": () => AsamTableV2Column<T>[];
"shift": () => AsamTableV2Column<T> | undefined;
"slice": (start?: number, end?: number) => AsamTableV2Column<T>[];
"sort": (compareFn?: ((a: AsamTableV2Column<T>, b: AsamTableV2Column<T>) => number) | undefined) => AsamTableV2Columns<T>;
"splice": { (start: number, deleteCount?: number): AsamTableV2Column<T>[]; (start: number, deleteCount: number, ...items: AsamTableV2Column<T>[]): AsamTableV2Column<T>[]; };
"unshift": (...items: AsamTableV2Column<T>[]) => number;
"indexOf": (searchElement: AsamTableV2Column<T>, fromIndex?: number) => number;
"lastIndexOf": (searchElement: AsamTableV2Column<T>, fromIndex?: number) => number;
"every": { <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): boolean; };
"some": (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any) => boolean;
"forEach": (callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => void, thisArg?: any) => void;
"map": <U>(callbackfn: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U, thisArg?: any) => U[];
"filter": { <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S[]; (predicate: (value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T>[]; };
"reduce": (AsamTableV2Columns<T>)["reduce"];
"reduceRight": (AsamTableV2Columns<T>)["reduceRight"];
"find": { <S extends AsamTableV2Column<T>>(predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any): AsamTableV2Column<T> | undefined; };
"findIndex": (predicate: (value: AsamTableV2Column<T>, index: number, obj: AsamTableV2Column<T>[]) => unknown, thisArg?: any) => number;
"fill": (value: AsamTableV2Column<T>, start?: number, end?: number) => AsamTableV2Columns<T>;
"copyWithin": (target: number, start: number, end?: number) => AsamTableV2Columns<T>;
"entries": () => ArrayIterator<[number, AsamTableV2Column<T>]>;
"keys": () => ArrayIterator<number>;
"values": () => ArrayIterator<AsamTableV2Column<T>>;
"includes": (searchElement: AsamTableV2Column<T>, fromIndex?: number) => boolean;
"flatMap": <U, This = undefined>(callback: (this: This, value: AsamTableV2Column<T>, index: number, array: AsamTableV2Column<T>[]) => U | readonly U[], thisArg?: This | undefined) => U[];
"flat": <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
"at": (index: number) => AsamTableV2Column<T> | undefined;
[Symbol.iterator]: () => ArrayIterator<AsamTableV2Column<T>>;
readonly [Symbol.unscopables]: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; };
[key: number]: AsamTableV2Column<T>;
};
AsamTableV2ExpandedRowsChangeHandler 公开类型视图
import type { AsamTableV2ExpandedRowsChangeHandler, AsamTableV2Expose, AsamTableV2RowEventHandlerParams } from '@asam-ui/ui';
// AsamTableV2ExpandedRowsChangeHandler
type PublicContract = {
(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void;
};
渲染器与取值函数类型。
AsamTableV2ExtraCellPropGetter 公开类型视图
import type { AsamTableV2ExtraCellPropGetter } from '@asam-ui/ui';
// AsamTableV2ExtraCellPropGetter
type PublicContract<T> = {
(params: Parameters<AsamTableV2ExtraCellPropGetter<T>>[0]): any;
};
AsamTableV2ExtractHeaderCellPropGetter 公开类型视图
import type { AsamTableV2ExtractHeaderCellPropGetter } from '@asam-ui/ui';
// AsamTableV2ExtractHeaderCellPropGetter
type PublicContract<T> = {
(params: Parameters<AsamTableV2ExtractHeaderCellPropGetter<T>>[0]): any;
};
AsamTableV2ExtractHeaderPropGetter 公开类型视图
import type { AsamTableV2ExtractHeaderPropGetter, AsamTableV2Column } from '@asam-ui/ui';
// AsamTableV2ExtractHeaderPropGetter
type PublicContract<T> = {
(params: { columns: AsamTableV2Column<T>[]; headerIndex: number; }): any;
};
AsamTableV2ExtractRowPropGetter 公开类型视图
import type { AsamTableV2ExtractRowPropGetter, AsamTableV2Column } from '@asam-ui/ui';
// AsamTableV2ExtractRowPropGetter
type PublicContract<T> = {
(params: Parameters<AsamTableV2ExtractRowPropGetter<T>>[0]): any;
};
参数与事件说明
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
column
必填:是;声明来源:上游声明。
column 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
column.align:"right" | "left" | "center" | undefined— 上游声明属性。
固定上游文档默认:
left(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"right"/"left"/"center"column.class:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["class"]— 上游声明列的类名。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["class"]>, (...args: never[]) => unknown>>[0]): stringcolumn.key:AsamTableV2RowEventHandlerParams["rowKey"] | undefined— 上游声明唯一标志
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.dataKey:AsamTableV2RowEventHandlerParams["rowKey"] | undefined— 上游声明数据的唯一标识。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.fixed:true | AsamTableV2FixedDir | undefined— 上游声明列的固定方向。
固定上游文档默认:
false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
true/FixedDir.LEFT/FixedDir.RIGHTcolumn.flexGrow:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["flexGrow"]— 上游声明CSSProperties 中的 flexGrow;仅在非固定表格中生效。
固定上游文档默认:
0(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"-moz-initial"/"inherit"/"initial"/"revert"/"revert-layer"/"unset"column.flexShrink:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["flexShrink"]— 上游声明CSSProperties 中的 flexShrink;仅在非固定表格中生效。
固定上游文档默认:
1(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
"-moz-initial"/"inherit"/"initial"/"revert"/"revert-layer"/"unset"column.title:string | undefined— 上游声明表头单元格默认显示的文本。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.hidden:boolean | undefined— 上游声明是否隐藏此列。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
false/truecolumn.headerClass:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["headerClass"]— 上游声明用于自定义表头列的类名。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["headerClass"]>, (...args: never[]) => unknown>>[0]): stringcolumn.maxWidth:number | undefined— 上游声明列的最大宽度。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.minWidth:number | undefined— 上游声明列的最小宽度。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.style:AsamTableV2HeaderCellSlotProps["style"] | undefined— 上游声明列单元格自定义样式,将与网格单元格样式合并。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)嵌套展开边界:大型实例类型;完整类型见公开类型视图。
column.sortable:boolean | undefined— 上游声明是否允许列排序。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)枚举:
false/truecolumn.width:number— 上游声明列宽。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)column.cellRenderer:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["cellRenderer"]— 上游声明渲染器。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["cellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>column.headerCellRenderer:(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["headerCellRenderer"]— 上游声明自定义表头渲染器。
固定上游文档默认:
未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)事件参数:
(params: Parameters<Extract<NonNullable<(NonNullable<AsamTableV2HeaderCellSlotProps["column"]>)["headerCellRenderer"]>, (...args: never[]) => unknown>>[0]): VNode<RendererNode, RendererElement, { [key: string]: any; }>
columnIndex
必填:是;声明来源:上游声明。
headerIndex
必填:是;声明来源:上游声明。
style
必填:是;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
onColumnSorted
必填:是;声明来源:上游声明。
onColumnSorted 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(e: MouseEvent): void
sortBy
必填:是;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
sortBy.key:AsamTableV2RowEventHandlerParams["rowKey"]— 上游声明sortBy.order:AsamTableV2SortOrder— 上游声明枚举:
SortOrder.ASC/SortOrder.DESC
默认值与来源
未知 / 未声明固定上游源码工厂(未执行):() => ({}) as { key: KeyType; order: SortOrder }(2.14.7;源码事实,未作为 ASAM 运行实测)
headerCellProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
sortState
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
ns
必填:是;声明来源:上游声明。
ns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
ns.namespace:(NonNullable<{ namespace: import("vue").ComputedRef<string>; b: (blockSuffix?: string) => string; e: (element?: string) => string; m: (modifier?: string) => string; be: (blockSuffix?: string, element?: string) => string; em: (element?: string, modifier?: string) => string; bm: (blockSuffix?: string, modifier?: string) => string; bem: (blockSuffix?: string, element?: string, modifier?: string) => string; is: { (name: string, state: boolean | undefined): string; (name: string): string; }; cssVar: (object: Record<string, string>) => Record<string, string>; cssVarName: (name: string) => string; cssVarBlock: (object: Record<string, string>) => Record<string, string>; cssVarBlockName: (name: string) => string; }>)["namespace"]— 上游声明嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
ns.b:(blockSuffix?: string) => string— 上游声明事件参数:
(blockSuffix?: string | undefined): stringns.e:(element?: string) => string— 上游声明事件参数:
(element?: string | undefined): stringns.m:(modifier?: string) => string— 上游声明事件参数:
(modifier?: string | undefined): stringns.be:(blockSuffix?: string, element?: string) => string— 上游声明事件参数:
(blockSuffix?: string | undefined, element?: string | undefined): stringns.em:(element?: string, modifier?: string) => string— 上游声明事件参数:
(element?: string | undefined, modifier?: string | undefined): stringns.bm:(blockSuffix?: string, modifier?: string) => string— 上游声明事件参数:
(blockSuffix?: string | undefined, modifier?: string | undefined): stringns.bem:(blockSuffix?: string, element?: string, modifier?: string) => string— 上游声明事件参数:
(blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined): stringns.is:{ (name: string, state: boolean | undefined): string; (name: string): string; }— 上游声明事件参数:
(name: string, state: boolean | undefined): string事件参数:
(name: string): stringns.cssVar:(object: Record<string, string>) => Record<string, string>— 上游声明事件参数:
(object: Record<string, string>): Record<string, string>ns.cssVarName:(name: string) => string— 上游声明事件参数:
(name: string): stringns.cssVarBlock:(object: Record<string, string>) => Record<string, string>— 上游声明事件参数:
(object: Record<string, string>): Record<string, string>ns.cssVarBlockName:(name: string) => string— 上游声明事件参数:
(name: string): string
t
必填:是;声明来源:上游声明。
t 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(path: Parameters<Extract<NonNullable<AsamTableV2HeaderCellSlotProps["t"]>, (...args: never[]) => unknown>>[0], option?: Parameters<Extract<NonNullable<AsamTableV2HeaderCellSlotProps["t"]>, (...args: never[]) => unknown>>[1]): string
class
必填:是;声明来源:上游声明。
AsamTableV2HeaderCellSlotProps 公开类型视图
import type { VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableV2HeaderCellSlotProps, AsamTableV2Props, AsamTableV2RowEventHandlerParams, AsamTableV2FixedDir, AsamTableV2SortBy, AsamTableV2Expose, AsamTableV2SortOrder, AsamTableV2SortState } from '@asam-ui/ui';
// AsamTableV2HeaderCellSlotProps
type PublicContract = {
"columns": AsamTableV2HeaderCellSlotProps["column"][];
"column": AsamTableV2HeaderCellSlotProps["column"];
"columnIndex": number;
"headerIndex": number;
"style": (AsamTableV2HeaderCellSlotProps)["style"];
"onColumnSorted": (e: MouseEvent) => void;
readonly "sortBy": AsamTableV2SortBy;
readonly "headerCellProps"?: any;
readonly "sortState"?: AsamTableV2SortState | undefined;
"ns": { namespace: import("vue").ComputedRef<string>; b: (blockSuffix?: string) => string; e: (element?: string) => string; m: (modifier?: string) => string; be: (blockSuffix?: string, element?: string) => string; em: (element?: string, modifier?: string) => string; bm: (blockSuffix?: string, modifier?: string) => string; bem: (blockSuffix?: string, element?: string, modifier?: string) => string; is: { (name: string, state: boolean | undefined): string; (name: string): string; }; cssVar: (object: Record<string, string>) => Record<string, string>; cssVarName: (name: string) => string; cssVarBlock: (object: Record<string, string>) => Record<string, string>; cssVarBlockName: (name: string) => string; };
"t": AsamTableV2HeaderCellSlotProps["t"];
"class": string;
};
AsamTableV2HeaderClassNameGetter 公开类型视图
import type { AsamTableV2HeaderClassNameGetter, AsamTableV2Column } from '@asam-ui/ui';
// AsamTableV2HeaderClassNameGetter
type PublicContract<T> = {
(params: { columns: AsamTableV2Column<T>[]; headerIndex: number; }): string;
};
AsamTableV2RowClassNameGetter 公开类型视图
import type { AsamTableV2RowClassNameGetter, AsamTableV2Column } from '@asam-ui/ui';
// AsamTableV2RowClassNameGetter
type PublicContract<T> = {
(params: Parameters<AsamTableV2RowClassNameGetter<T>>[0]): string;
};
AsamTableV2RowEventHandler 公开类型视图
import type { AsamTableV2RowEventHandler, AsamTableV2RowEventHandlerParams } from '@asam-ui/ui';
// AsamTableV2RowEventHandler
type PublicContract = {
(params: AsamTableV2RowEventHandlerParams): void;
};
参数与事件说明
rowKey
必填:是;声明来源:上游声明。
event
必填:是;声明来源:上游声明。
event 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
rowData
必填:是;声明来源:上游声明。
rowIndex
必填:是;声明来源:上游声明。
AsamTableV2RowEventHandlerParams 公开类型视图
import type { AsamTableV2RowEventHandlerParams, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2RowEventHandlerParams
type PublicContract = {
"rowKey": AsamTableV2RowEventHandlerParams["rowKey"];
"event": AsamTableV2RowEventHandlerParams["event"];
"rowData": any;
"rowIndex": number;
};
参数与事件说明
onClick
必填:否;声明来源:上游声明。
onClick 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowEventHandlerParams): void
onContextmenu
必填:否;声明来源:上游声明。
onContextmenu 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowEventHandlerParams): void
onDblclick
必填:否;声明来源:上游声明。
onDblclick 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowEventHandlerParams): void
onMouseenter
必填:否;声明来源:上游声明。
onMouseenter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowEventHandlerParams): void
onMouseleave
必填:否;声明来源:上游声明。
onMouseleave 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowEventHandlerParams): void
AsamTableV2RowEventHandlers 公开类型视图
import type { AsamTableV2RowEventHandlers, AsamTableV2RowEventHandler, AsamTableV2RowEventHandlerParams } from '@asam-ui/ui';
// AsamTableV2RowEventHandlers
type PublicContract = {
"onClick"?: AsamTableV2RowEventHandler | undefined;
"onContextmenu"?: AsamTableV2RowEventHandler | undefined;
"onDblclick"?: AsamTableV2RowEventHandler | undefined;
"onMouseenter"?: AsamTableV2RowEventHandler | undefined;
"onMouseleave"?: AsamTableV2RowEventHandler | undefined;
};
AsamTableV2RowExpandHandler 公开类型视图
import type { AsamTableV2RowExpandHandler, AsamTableV2RowExpandParams } from '@asam-ui/ui';
// AsamTableV2RowExpandHandler
type PublicContract = {
(params: AsamTableV2RowExpandParams): void;
};
参数与事件说明
expanded
必填:是;声明来源:上游声明。
expanded 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
rowKey
必填:是;声明来源:上游声明。
rowData
必填:是;声明来源:上游声明。
rowIndex
必填:是;声明来源:上游声明。
AsamTableV2RowExpandParams 公开类型视图
import type { AsamTableV2RowExpandParams, AsamTableV2Expose, AsamTableV2RowEventHandlerParams, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2RowExpandParams
type PublicContract = {
"expanded": boolean;
"rowKey": AsamTableV2RowEventHandlerParams["rowKey"];
"rowData": any;
"rowIndex": number;
};
AsamTableV2RowHeightChangeHandler 公开类型视图
import type { AsamTableV2RowHeightChangeHandler, AsamTableV2RowHeightChangedParams, AsamTableV2FixedDir } from '@asam-ui/ui';
// AsamTableV2RowHeightChangeHandler
type PublicContract = {
(row: AsamTableV2RowHeightChangedParams, fixedDirection: boolean | AsamTableV2FixedDir | undefined): void;
};
参数与事件说明
rowKey
必填:是;声明来源:上游声明。
height
必填:是;声明来源:上游声明。
rowIndex
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableV2RowHeightChangedParams 公开类型视图
import type { AsamTableV2RowHeightChangedParams, AsamTableV2RowEventHandlerParams, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2RowHeightChangedParams
type PublicContract = {
"rowKey": AsamTableV2RowEventHandlerParams["rowKey"];
"height": number;
"rowIndex": number;
};
AsamTableV2RowHoverHandler 公开类型视图
import type { AsamTableV2RowHoverHandler, AsamTableV2RowHoverParams } from '@asam-ui/ui';
// AsamTableV2RowHoverHandler
type PublicContract = {
(params: AsamTableV2RowHoverParams): void;
};
参数与事件说明
event
必填:否;声明来源:上游声明。
event 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
hovered
必填:是;声明来源:上游声明。
hovered 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
rowKey
必填:是;声明来源:上游声明。
rowData
必填:否;声明来源:上游声明。
rowIndex
必填:否;声明来源:上游声明。
AsamTableV2RowHoverParams 公开类型视图
import type { AsamTableV2RowHoverParams, AsamTableV2Expose, AsamTableV2RowEventHandlerParams, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2RowHoverParams
type PublicContract = {
"event"?: MouseEvent | undefined;
"hovered": boolean;
"rowKey": AsamTableV2RowEventHandlerParams["rowKey"];
"rowData"?: any;
"rowIndex"?: number | undefined;
};
参数与事件说明
key
必填:是;声明来源:上游声明。
order
必填:是;声明来源:上游声明。
order 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:SortOrder.ASC / SortOrder.DESC
AsamTableV2SortBy 公开类型视图
import type { AsamTableV2SortBy, AsamTableV2RowEventHandlerParams, AsamTableV2SortOrder } from '@asam-ui/ui';
// AsamTableV2SortBy
type PublicContract = {
"key": AsamTableV2RowEventHandlerParams["rowKey"];
"order": AsamTableV2SortOrder;
};
AsamTableV2SortState 公开类型视图
import type { AsamTableV2SortState, AsamTableV2SortOrder } from '@asam-ui/ui';
// AsamTableV2SortState
type PublicContract = {
[key: string]: AsamTableV2SortOrder;
[key: number]: AsamTableV2SortOrder;
[key: symbol]: AsamTableV2SortOrder;
};
参数与事件说明
cells
必填:是;声明来源:上游声明。
cells 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
columns
必填:是;声明来源:上游声明。
headerIndex
必填:是;声明来源:上游声明。
AsamTableV2CustomizedHeaderSlotParam 公开类型视图
import type { VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableV2CustomizedHeaderSlotParam, AsamTableV2Columns, AsamTableV2Props } from '@asam-ui/ui';
// AsamTableV2CustomizedHeaderSlotParam
type PublicContract<T = any> = {
"cells": VNode<RendererNode, RendererElement, { [key: string]: any; }>[];
"columns": AsamTableV2Columns<T>;
"headerIndex": number;
};
公开参数别名与组件绑定使用相同的实际排序事件参数。
参数与事件说明
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
width
必填:是;声明来源:上游声明。
fixed
必填:否;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
data
必填:是;声明来源:上游声明。
data 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
height
必填:是;声明来源:上游声明。
maxHeight
必填:否;声明来源:上游声明。
rowKey
必填:否;声明来源:上游声明。
scrollbarAlwaysOn
必填:否;声明来源:上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onScroll
必填:否;声明来源:上游声明。
onScroll 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(...args: any[]): void
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
useIsScrolling
必填:否;声明来源:上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
estimatedRowHeight
必填:否;声明来源:上游声明。
rowHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:50(2.14.7;源码事实,未作为 ASAM 运行实测)
hScrollbarSize
必填:否;声明来源:上游声明。
vScrollbarSize
必填:否;声明来源:上游声明。
class
必填:否;声明来源:上游声明。
cache
必填:否;声明来源:上游声明。
onEndReached
必填:否;声明来源:上游声明。
onEndReached 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(remainDistance: number): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
sortBy
必填:否;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
sortBy.key:AsamTableV2RowEventHandlerParams["rowKey"]— 上游声明sortBy.order:AsamTableV2SortOrder— 上游声明枚举:
SortOrder.ASC/SortOrder.DESC
默认值与来源
未知 / 未声明固定上游源码工厂(未执行):() => ({}) as { key: KeyType; order: SortOrder }(2.14.7;源码事实,未作为 ASAM 运行实测)
headerClass
必填:否;声明来源:上游声明。
headerClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: {
/** Public prop alias follows the same actual sort payload as component bindings. */
columns: AsamTableV2Column<any>[]; headerIndex: number; }): string
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
headerProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
headerCellProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
headerHeight
必填:否;声明来源:上游声明。
footerHeight
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:0(2.14.7;源码事实,未作为 ASAM 运行实测)
rowClass
必填:否;声明来源:上游声明。
rowClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2PropsPublic)["rowClass"]>, (...args: never[]) => unknown>>[0]): string
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowProps
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
cellProps
必填:否;声明来源:上游声明。
cellProps 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2PropsPublic)["cellProps"]>, (...args: never[]) => unknown>>[0]): any
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
dataGetter
必填:否;声明来源:上游声明。
dataGetter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2PropsPublic)["dataGetter"]>, (...args: never[]) => unknown>>[0]): any
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
fixedData
必填:否;声明来源:上游声明。
expandColumnKey
必填:否;声明来源:上游声明。
expandedRowKeys
必填:否;声明来源:上游声明。
defaultExpandedRowKeys
必填:否;声明来源:上游声明。
indentSize
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:12(2.14.7;源码事实,未作为 ASAM 运行实测)
iconSize
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:12(2.14.7;源码事实,未作为 ASAM 运行实测)
sortState
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
onExpandedRowsChange
必填:否;声明来源:上游声明。
onExpandedRowsChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(expandedRowKeys: AsamTableV2RowEventHandlerParams["rowKey"][]): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
onRowsRendered
必填:否;声明来源:上游声明。
onRowsRendered 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2PropsPublic)["onRowsRendered"]>, (...args: never[]) => unknown>>[0]): void
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
size
必填:否;声明来源:ASAM 声明。
size 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"large" / "big" / "default" / "small"
onColumnSort
必填:否;声明来源:ASAM 声明。
onColumnSort 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: Parameters<Extract<NonNullable<(AsamTableV2PropsPublic)["onColumnSort"]>, (...args: never[]) => unknown>>[0]): void
AsamTableV2PropsPublic 公开类型视图
import type { AsamTableV2PropsPublic, AsamTableV2Props, AsamTableV2RowEventHandlerParams, AsamTableV2HeaderCellSlotProps, AsamTableV2SortBy, AsamTableV2SortOrder, AsamTableV2HeaderClassNameGetter, AsamTableV2Column, AsamTableV2RowClassNameGetter, AsamTableV2ExtraCellPropGetter, AsamTableV2SortState, AsamTableV2ExpandedRowsChangeHandler, AsamTableV2Expose, AsamTableV2RowExpandHandler, AsamTableV2RowExpandParams, AsamTableV2RowEventHandlers, AsamTableV2RowEventHandler, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2PropsPublic
type PublicContract = {
readonly "style"?: (AsamTableV2PropsPublic)["style"];
readonly "width": number;
readonly "fixed"?: boolean | undefined;
readonly "data": any[];
readonly "height": number;
readonly "maxHeight"?: number | undefined;
readonly "rowKey"?: (AsamTableV2PropsPublic)["rowKey"];
readonly "scrollbarAlwaysOn"?: boolean | undefined;
readonly "onScroll"?: ((...args: any[]) => void) | undefined;
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
readonly "useIsScrolling"?: boolean | undefined;
readonly "estimatedRowHeight"?: number | undefined;
readonly "rowHeight"?: number | undefined;
readonly "hScrollbarSize"?: number | undefined;
readonly "vScrollbarSize"?: number | undefined;
readonly "class"?: string | undefined;
readonly "cache"?: number | undefined;
readonly "onEndReached"?: ((remainDistance: number) => void) | undefined;
readonly "sortBy"?: AsamTableV2SortBy | undefined;
readonly "headerClass"?: (AsamTableV2PropsPublic)["headerClass"];
readonly "headerProps"?: any;
readonly "headerCellProps"?: any;
readonly "headerHeight"?: (AsamTableV2PropsPublic)["headerHeight"];
readonly "footerHeight"?: number | undefined;
readonly "rowClass"?: (AsamTableV2PropsPublic)["rowClass"];
readonly "rowProps"?: any;
readonly "cellProps"?: (AsamTableV2PropsPublic)["cellProps"];
readonly "dataGetter"?: (AsamTableV2PropsPublic)["dataGetter"];
readonly "fixedData"?: any[] | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "expandedRowKeys"?: AsamTableV2RowEventHandlerParams["rowKey"][] | undefined;
readonly "defaultExpandedRowKeys"?: AsamTableV2RowEventHandlerParams["rowKey"][] | undefined;
readonly "indentSize"?: number | undefined;
readonly "iconSize"?: number | undefined;
readonly "sortState"?: AsamTableV2SortState | undefined;
readonly "onExpandedRowsChange"?: AsamTableV2ExpandedRowsChangeHandler | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "onRowsRendered"?: (AsamTableV2PropsPublic)["onRowsRendered"];
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
"size"?: AsamControlSize | undefined;
"onColumnSort"?: (AsamTableV2PropsPublic)["onColumnSort"];
};
参数与事件说明
rowKey
必填:是;声明来源:上游声明。
rowKey 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
columnsStyles
必填:是;声明来源:上游声明。
columnsStyles 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
isScrolling
必填:是;声明来源:上游声明。
isScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
rowData
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowIndex
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
estimatedRowHeight
必填:否;声明来源:上游声明。
class
必填:否;声明来源:上游声明。
expandColumnKey
必填:否;声明来源:上游声明。
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
depth
必填:否;声明来源:上游声明。
onRowHover
必填:否;声明来源:上游声明。
onRowHover 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowHoverParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
onRowHeightChange
必填:否;声明来源:上游声明。
onRowHeightChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: AsamTableV2RowHeightChangedParams, fixedDirection: boolean | AsamTableV2FixedDir | undefined): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableV2RowProps 公开类型视图
import type { AsamTableV2RowProps, AsamTableV2HeaderCellSlotProps, AsamTableV2Props, AsamTableV2RowEventHandlerParams, AsamTableV2Expose, AsamTableV2RowExpandHandler, AsamTableV2RowExpandParams, AsamTableV2RowEventHandlers, AsamTableV2RowEventHandler, AsamTableV2RowHoverHandler, AsamTableV2RowHoverParams, AsamTableV2RowHeightChangeHandler, AsamTableV2RowHeightChangedParams, AsamTableV2FixedDir } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2RowProps
type PublicContract = {
readonly "rowKey": (AsamTableV2RowProps)["rowKey"];
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
readonly "columnsStyles": (AsamTableV2RowProps)["columnsStyles"];
readonly "isScrolling": boolean;
readonly "rowData": any;
readonly "rowIndex": number;
readonly "style"?: (AsamTableV2RowProps)["style"];
readonly "estimatedRowHeight"?: number | undefined;
readonly "class"?: string | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
readonly "depth"?: number | undefined;
readonly "onRowHover"?: AsamTableV2RowHoverHandler | undefined;
readonly "onRowHeightChange"?: AsamTableV2RowHeightChangeHandler | undefined;
};
参数与事件说明
columns
必填:是;声明来源:上游声明。
columns 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
columnsStyles
必填:是;声明来源:上游声明。
columnsStyles 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowData
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowIndex
必填:是;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
style
必填:否;声明来源:上游声明。
style 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowKey
必填:否;声明来源:上游声明。
estimatedRowHeight
必填:否;声明来源:上游声明。
class
必填:否;声明来源:上游声明。
expandColumnKey
必填:否;声明来源:上游声明。
onRowExpand
必填:否;声明来源:上游声明。
onRowExpand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowExpandParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rowEventHandlers
必填:否;声明来源:上游声明。
rowEventHandlers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
rowEventHandlers.onClick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onContextmenu:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onDblclick:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseenter:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): voidrowEventHandlers.onMouseleave:AsamTableV2RowEventHandler | undefined— 上游声明事件参数:
(params: AsamTableV2RowEventHandlerParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
depth
必填:否;声明来源:上游声明。
isScrolling
必填:否;声明来源:上游声明。
isScrolling 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
onRowHover
必填:否;声明来源:上游声明。
onRowHover 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(params: AsamTableV2RowHoverParams): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
onRowHeightChange
必填:否;声明来源:上游声明。
onRowHeightChange 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: AsamTableV2RowHeightChangedParams, fixedDirection: boolean | AsamTableV2FixedDir | undefined): void
默认值与来源
未知 / 未声明固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableV2RowPropsPublic 公开类型视图
import type { AsamTableV2RowPropsPublic, AsamTableV2HeaderCellSlotProps, AsamTableV2Props, AsamTableV2RowEventHandlerParams, AsamTableV2RowProps, AsamTableV2RowExpandHandler, AsamTableV2RowExpandParams, AsamTableV2RowEventHandlers, AsamTableV2RowEventHandler, AsamTableV2RowHoverHandler, AsamTableV2RowHoverParams, AsamTableV2RowHeightChangeHandler, AsamTableV2RowHeightChangedParams, AsamTableV2FixedDir } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableV2RowPropsPublic
type PublicContract = {
readonly "columns": AsamTableV2HeaderCellSlotProps["column"][];
readonly "columnsStyles": (AsamTableV2RowPropsPublic)["columnsStyles"];
readonly "rowData": any;
readonly "rowIndex": number;
readonly "style"?: (AsamTableV2RowPropsPublic)["style"];
readonly "rowKey"?: (AsamTableV2RowPropsPublic)["rowKey"];
readonly "estimatedRowHeight"?: number | undefined;
readonly "class"?: string | undefined;
readonly "expandColumnKey"?: string | undefined;
readonly "onRowExpand"?: AsamTableV2RowExpandHandler | undefined;
readonly "rowEventHandlers"?: AsamTableV2RowEventHandlers | undefined;
readonly "depth"?: number | undefined;
readonly "isScrolling"?: boolean | undefined;
readonly "onRowHover"?: AsamTableV2RowHoverHandler | undefined;
readonly "onRowHeightChange"?: AsamTableV2RowHeightChangeHandler | undefined;
};
组合契约按分支生效;请同时查看公开类型。
AsamTableV2Alignment 公开类型视图
import type { AsamTableV2Alignment } from '@asam-ui/ui';
// AsamTableV2Alignment
type PublicContract = AsamTableV2Alignment;
组合契约按分支生效;请同时查看公开类型。
AsamTableV2FixedDir 公开类型视图
import type { AsamTableV2FixedDir } from '@asam-ui/ui';
// AsamTableV2FixedDir
type PublicContract = AsamTableV2FixedDir;
组合契约按分支生效;请同时查看公开类型。
AsamTableV2SortOrder 公开类型视图
import type { AsamTableV2SortOrder } from '@asam-ui/ui';
// AsamTableV2SortOrder
type PublicContract = AsamTableV2SortOrder;
AsamTableV2Placeholder 公开类型视图
import { AsamTableV2Placeholder } from '@asam-ui/ui';
// AsamTableV2Placeholder
type PublicContract = typeof AsamTableV2Placeholder;