使用场景
在有限视窗内渲染可见行列单元格。
契约与组合
这是虚拟网格基础入口，只渲染可见范围与 cache 缓冲。提供固定 height / width 和 totalRow / totalColumn，默认插槽的 style 必须放在真实项目根节点上，否则绝对位置与尺寸计算无法生效。插槽提供 rowIndex / columnIndex / style / data。
rowHeight / columnWidth 为固定数值，变化时真实布局更新。
通过 scrollTo 与 scrollToItem 定位网格，支持双方向滚动。 完整说明。
这些低层入口没有表格列注册或独立选择模型，也没有额外四档 size；行列尺寸由宿主决定，颜色、间距和字体来自 ASAM tokens。
基础用法与状态
基础用法与状态
<template>
<AsamFixedSizeGrid
v-bind="{ height: 200, width: 280, totalRow: 50, totalColumn: 5, rowHeight, columnWidth }"
>
<template #default="{ rowIndex, columnIndex, style }">
<div :style="style" class="virtual-cell">
{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列
</div>
</template>
</AsamFixedSizeGrid>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFixedSizeGridBasicDemo' });
import { AsamFixedSizeGrid } from '@asam-ui/ui';
const rowHeight = 40;
const columnWidth = 100;
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style><template>
<AsamFixedSizeGrid
v-bind="{ height: 200, width: 280, totalRow: 50, totalColumn: 5, rowHeight, columnWidth }"
>
<template #default="{ rowIndex, columnIndex, style }">
<div :style="style" class="virtual-cell">
{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列
</div>
</template>
</AsamFixedSizeGrid>
</template>
<script setup>
defineOptions({ name: 'AsamFixedSizeGridBasicDemo' });
import { AsamFixedSizeGrid } from '@asam-ui/ui';
const rowHeight = 40;
const columnWidth = 100;
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>首尾定位、动态尺寸、RTL 与滚动条
首尾定位、动态尺寸、RTL 与滚动条
<template>
<div class="demo-root-layout">
<AsamButton native-type="submit" type="default" @click="grid?.scrollToItem(99, 29, 'end')"
>到最后单元格</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })"
>返回网格起点</AsamButton
>
<AsamButton native-type="submit" type="default" @click="resize">改变行列尺寸</AsamButton>
<AsamCheckboxItem v-model="rtl">RTL</AsamCheckboxItem>
<AsamCheckboxItem v-model="always">滚动条持续显示</AsamCheckboxItem>
<p class="example-paragraph" data-testid="virtual-events">范围 {{ range }}；滚动 {{ eventState }}</p>
<AsamFixedSizeGrid
:key="rtl ? 'rtl' : 'ltr'"
ref="grid"
:height="220"
:width="360"
:total-row="100"
:total-column="30"
:row-height="rowHeight"
:column-width="columnWidth"
:direction="rtl ? 'rtl' : 'ltr'"
:scrollbar-always-on="always"
@item-rendered="onRendered"
@scroll="onScroll"
>
<template #default="{ rowIndex, columnIndex, style }">
<div :style="style" class="virtual-cell" :data-cell="rowIndex + ':' + columnIndex">
{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列
</div>
</template>
</AsamFixedSizeGrid>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamFixedSizeGridBoundaryDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamFixedSizeGrid } from '@asam-ui/ui';
import type { AsamFixedSizeGridExpose, AsamFixedSizeGridEmits } from '@asam-ui/ui';
const grid = ref<AsamFixedSizeGridExpose>();
const large = ref(false);
const rtl = ref(false);
const always = ref(true);
const range = ref('');
const eventState = ref('');
function onRendered(value: AsamFixedSizeGridEmits['itemRendered'][0]): void {
range.value =
value.rowVisibleStart +
':' +
value.rowVisibleEnd +
'/' +
value.columnVisibleStart +
':' +
value.columnVisibleEnd;
}
function onScroll(value: AsamFixedSizeGridEmits['scroll'][0]): void {
eventState.value = value.scrollTop + ':' + value.scrollLeft;
}
const rowHeight = ref(44);
const columnWidth = ref(110);
function resize(): void {
large.value = !large.value;
rowHeight.value = large.value ? 74 : 44;
columnWidth.value = large.value ? 150 : 110;
}
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="demo-root-layout">
<AsamButton native-type="submit" type="default" @click="grid?.scrollToItem(99, 29, 'end')"
>到最后单元格</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })"
>返回网格起点</AsamButton
>
<AsamButton native-type="submit" type="default" @click="resize">改变行列尺寸</AsamButton>
<AsamCheckboxItem v-model="rtl">RTL</AsamCheckboxItem>
<AsamCheckboxItem v-model="always">滚动条持续显示</AsamCheckboxItem>
<p class="example-paragraph" data-testid="virtual-events">范围 {{ range }}；滚动 {{ eventState }}</p>
<AsamFixedSizeGrid
:key="rtl ? 'rtl' : 'ltr'"
ref="grid"
:height="220"
:width="360"
:total-row="100"
:total-column="30"
:row-height="rowHeight"
:column-width="columnWidth"
:direction="rtl ? 'rtl' : 'ltr'"
:scrollbar-always-on="always"
@item-rendered="onRendered"
@scroll="onScroll"
>
<template #default="{ rowIndex, columnIndex, style }">
<div :style="style" class="virtual-cell" :data-cell="rowIndex + ':' + columnIndex">
{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列
</div>
</template>
</AsamFixedSizeGrid>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamFixedSizeGridBoundaryDemo' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamFixedSizeGrid } from '@asam-ui/ui';
const grid = ref();
const large = ref(false);
const rtl = ref(false);
const always = ref(true);
const range = ref('');
const eventState = ref('');
function onRendered(value) {
range.value =
value.rowVisibleStart +
':' +
value.rowVisibleEnd +
'/' +
value.columnVisibleStart +
':' +
value.columnVisibleEnd;
}
function onScroll(value) {
eventState.value = value.scrollTop + ':' + value.scrollLeft;
}
const rowHeight = ref(44);
const columnWidth = ref(110);
function resize() {
large.value = !large.value;
rowHeight.value = large.value ? 74 : 44;
columnWidth.value = large.value ? 150 : 110;
}
</script>
<style scoped>
.virtual-cell {
box-sizing: border-box;
padding: var(--asam-space-sm);
border: 1px solid var(--asam-color-border);
}
</style>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>实例、类型与边界
公开 API 与下列完整 SFC 来自同一组件入口。TS 和 JS 演示分别提供所有本地依赖文件；类型约束只出现在 TS 中。远程请求与业务持久化由宿主承担。
API
属性 AsamFixedSizeGridProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
style | — | (AsamFixedSizeGridProps)["style"] | undefined |
className | — | AsamFixedSizeGridProps["className"] | "" |
role | — | string | undefined | — |
width | — | (AsamFixedSizeGridProps)["width"] | — |
data | — | any[] | undefined | 工厂函数（每个实例创建） |
height | — | (AsamFixedSizeGridProps)["height"] | — |
scrollbarAlwaysOn | — | boolean | undefined | false |
containerElement | — | (AsamFixedSizeGridProps)["containerElement"] | "div" |
direction | — | enum"ltr" | "rtl"完整类型：(AsamFixedSizeGridProps)["direction"] | "ltr" |
innerElement | — | (AsamFixedSizeGridProps)["innerElement"] | "div" |
innerProps | — | Record<string, unknown> | undefined | 工厂函数（每个实例创建） |
useIsScrolling | — | boolean | undefined | false |
innerWidth | — | (AsamFixedSizeGridProps)["innerWidth"] | — |
perfMode | — | (AsamFixedSizeGridProps)["perfMode"] | true |
columnCache | — | number | undefined | 2 |
estimatedColumnWidth | — | number | undefined | — |
estimatedRowHeight | — | number | undefined | — |
initScrollLeft | — | number | undefined | 0 |
initScrollTop | — | number | undefined | 0 |
itemKey | — | AsamDynamicSizeGridGridItemKeyGetter | undefined | 函数默认值（作为值传递） |
rowCache | — | number | undefined | 2 |
totalColumn | — | number | — |
totalRow | — | number | — |
hScrollbarSize | — | number | undefined | 6 |
vScrollbarSize | — | number | undefined | 6 |
scrollbarStartGap | — | number | undefined | 0 |
scrollbarEndGap | — | number | undefined | 2 |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamFixedSizeGridProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamFixedSizeGridProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamFixedSizeGridProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamFixedSizeGridProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamFixedSizeGridProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamFixedSizeGridProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
rowHeight | — | number | — |
columnWidth | — | number | — |
onItemRendered | — | ((range: AsamDynamicSizeGridGridItemRenderedEvtParams) => void) | undefined | — |
onScroll | — | ((position: Pick<AsamDynamicSizeGridGridStates, "scrollLeft" | "scrollTop" | "xAxisScrollDir" | "yAxisScrollDir" | "updateRequested">) => void) | undefined | — |
实例方法与状态 AsamFixedSizeGridExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
states | — | (AsamFixedSizeGridExpose)["states"] | — |
touchStartX | — | number | — |
touchStartY | — | number | — |
handleTouchStart | — | (e: TouchEvent) => void | — |
handleTouchMove | — | (e: TouchEvent) => void | — |
windowRef | — | AsamFixedSizeGridExpose["windowRef"] | — |
innerRef | — | AsamFixedSizeGridExpose["windowRef"] | — |
getItemStyleCache | — | (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties> | — |
scrollTo | — | (options: AsamDynamicSizeGridGridScrollOptions) => void | — |
scrollToItem | 运行时顺序为行、列；上游共享类型的标签顺序与之相反。 | (rowIndex?: number, columnIndex?: number, alignment?: AsamDynamicSizeGridAlignment) => void | — |
类型 AsamFixedSizeGridInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
states | — | (AsamFixedSizeGridInstance)["states"] | — |
touchStartX | — | number | — |
touchStartY | — | number | — |
handleTouchStart | — | (e: TouchEvent) => void | — |
handleTouchMove | — | (e: TouchEvent) => void | — |
windowRef | — | AsamFixedSizeGridExpose["windowRef"] | — |
innerRef | — | AsamFixedSizeGridExpose["windowRef"] | — |
getItemStyleCache | — | (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties> | — |
scrollTo | — | (options: AsamDynamicSizeGridGridScrollOptions) => void | — |
scrollToItem | 运行时顺序为行、列；上游共享类型的标签顺序与之相反。 | (rowIndex?: number, columnIndex?: number, alignment?: AsamDynamicSizeGridAlignment) => void | — |
插槽 AsamFixedSizeGridSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | VNode key 由原生片段使用，不包含在插槽参数中。 | (AsamFixedSizeGridSlots)["default"] | — |
事件 AsamFixedSizeGridEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
itemRendered | — | [range: AsamDynamicSizeGridGridItemRenderedEvtParams] | — |
scroll | — | [position: Pick<AsamDynamicSizeGridGridStates, "scrollLeft" | "scrollTop" | "xAxisScrollDir" | "yAxisScrollDir" | "updateRequested">] | — |
更多参数与事件说明
契约与组合
scrollTo({scrollLeft,scrollTop}) / scrollToItem(rowIndex,columnIndex,alignment) 支持公开定位；alignment 可以为 start / center / end / auto / smart（以本入口类型为准）。direction 支持 ltr / rtl，网格同时支持两方向滚动。scrollbarAlwaysOn 控制持续显示；useIsScrolling 决定插槽是否读取滚动中状态。末端定位、尺寸切换和 RTL 都保留首尾项目可达。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
style
必填：否；声明来源：上游声明。
style 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）className
必填：否；声明来源：上游声明。
className 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
""（已安装运行时；已安装组件）role
必填：否；声明来源：上游声明。
width
必填：否；声明来源：上游声明。
data
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）height
必填：是；声明来源：上游声明。
height 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
scrollbarAlwaysOn
必填：否；声明来源：上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）containerElement
必填：否；声明来源：上游声明。
containerElement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
"div"（已安装运行时；已安装组件）direction
必填：否；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："ltr" / "rtl"
默认值与来源
"ltr"（已安装运行时；已安装组件）innerElement
必填：否；声明来源：上游声明。
默认值与来源
"div"（已安装运行时；已安装组件）innerProps
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）useIsScrolling
必填：否；声明来源：上游声明。
useIsScrolling 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）innerWidth
必填：否；声明来源：上游声明。
perfMode
必填：否；声明来源：上游声明。
perfMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）columnCache
必填：否；声明来源：上游声明。
默认值与来源
2（已安装运行时；已安装组件）estimatedColumnWidth
必填：否；声明来源：上游声明。
estimatedRowHeight
必填：否；声明来源：上游声明。
initScrollLeft
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）initScrollTop
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）itemKey
必填：否；声明来源：上游声明。
itemKey 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends { [key: string]: any; [key: number]: any; }>(args: { columnIndex: number; data: T; rowIndex: number; }): string | number
默认值与来源
函数默认值（作为值传递）（函数值（不执行）；已安装组件）rowCache
必填：否；声明来源：上游声明。
默认值与来源
2（已安装运行时；已安装组件）totalColumn
必填：是；声明来源：上游声明。
totalRow
必填：是；声明来源：上游声明。
hScrollbarSize
必填：否；声明来源：上游声明。
默认值与来源
6（已安装运行时；已安装组件）vScrollbarSize
必填：否；声明来源：上游声明。
默认值与来源
6（已安装运行时；已安装组件）scrollbarStartGap
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）scrollbarEndGap
必填：否；声明来源：上游声明。
默认值与来源
2（已安装运行时；已安装组件）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
必填：否；声明来源：依赖声明。
rowHeight
必填：是；声明来源：ASAM 声明。
columnWidth
必填：是；声明来源：ASAM 声明。
onItemRendered
必填：否；声明来源：ASAM 声明。
onItemRendered 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [range: AsamDynamicSizeGridGridItemRenderedEvtParams]): void
onScroll
必填：否；声明来源：ASAM 声明。
onScroll 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(...args: [position: Pick<AsamDynamicSizeGridGridStates, "scrollLeft" | "scrollTop" | "xAxisScrollDir" | "yAxisScrollDir" | "updateRequested">]): void
AsamFixedSizeGridProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamFixedSizeGridProps, AsamDynamicSizeGridGridItemKeyGetter, AsamDynamicSizeGridGridItemRenderedEvtParams, AsamFixedSizeGridEmits, AsamDynamicSizeGridGridStates } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamFixedSizeGridProps
type PublicContract = {
readonly "style"?: (AsamFixedSizeGridProps)["style"];
readonly "className"?: AsamFixedSizeGridProps["className"];
readonly "role"?: string | undefined;
readonly "width"?: (AsamFixedSizeGridProps)["width"];
readonly "data"?: any[] | undefined;
readonly "height": (AsamFixedSizeGridProps)["height"];
readonly "scrollbarAlwaysOn"?: boolean | undefined;
readonly "containerElement"?: (AsamFixedSizeGridProps)["containerElement"];
readonly "direction"?: (AsamFixedSizeGridProps)["direction"];
readonly "innerElement"?: (AsamFixedSizeGridProps)["innerElement"];
readonly "innerProps"?: Record<string, unknown> | undefined;
readonly "useIsScrolling"?: boolean | undefined;
readonly "innerWidth"?: (AsamFixedSizeGridProps)["innerWidth"];
readonly "perfMode"?: (AsamFixedSizeGridProps)["perfMode"];
readonly "columnCache"?: number | undefined;
readonly "estimatedColumnWidth"?: number | undefined;
readonly "estimatedRowHeight"?: number | undefined;
readonly "initScrollLeft"?: number | undefined;
readonly "initScrollTop"?: number | undefined;
readonly "itemKey"?: AsamDynamicSizeGridGridItemKeyGetter | undefined;
readonly "rowCache"?: number | undefined;
readonly "totalColumn": number;
readonly "totalRow": number;
readonly "hScrollbarSize"?: number | undefined;
readonly "vScrollbarSize"?: number | undefined;
readonly "scrollbarStartGap"?: number | undefined;
readonly "scrollbarEndGap"?: number | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamFixedSizeGridProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamFixedSizeGridProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamFixedSizeGridProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamFixedSizeGridProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamFixedSizeGridProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamFixedSizeGridProps)["onVnodeUnmounted"];
"class"?: unknown;
"rowHeight": number;
"columnWidth": number;
"onItemRendered"?: ((range: AsamDynamicSizeGridGridItemRenderedEvtParams) => void) | undefined;
"onScroll"?: ((position: Pick<AsamDynamicSizeGridGridStates, "scrollLeft" | "scrollTop" | "xAxisScrollDir" | "yAxisScrollDir" | "updateRequested">) => void) | undefined;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
states
必填：是；声明来源：上游声明。
states 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
touchStartX
必填：是；声明来源：上游声明。
touchStartY
必填：是；声明来源：上游声明。
handleTouchStart
必填：是；声明来源：上游声明。
handleTouchStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: TouchEvent): void
handleTouchMove
必填：是；声明来源：上游声明。
handleTouchMove 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: TouchEvent): void
windowRef
必填：是；声明来源：上游声明。
windowRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
innerRef
必填：是；声明来源：上游声明。
innerRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
getItemStyleCache
必填：是；声明来源：ASAM 声明。
getItemStyleCache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key?: unknown, size?: unknown, direction?: unknown): Record<string, CSSProperties>
scrollTo
必填：是；声明来源：ASAM 声明。
scrollTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(options: AsamDynamicSizeGridGridScrollOptions): void
scrollToItem
必填：是；声明来源：ASAM 声明。
scrollToItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(rowIndex?: number | undefined, columnIndex?: number | undefined, alignment?: AsamDynamicSizeGridAlignment | undefined): void
AsamFixedSizeGridExpose 公开类型视图
import type { CSSProperties } from 'vue';
import type { AsamFixedSizeGridExpose, AsamFixedSizeGridProps, AsamDynamicSizeGridGridScrollOptions, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
// AsamFixedSizeGridExpose
type PublicContract = {
"states": (AsamFixedSizeGridExpose)["states"];
"touchStartX": number;
"touchStartY": number;
"handleTouchStart": (e: TouchEvent) => void;
"handleTouchMove": (e: TouchEvent) => void;
"windowRef": AsamFixedSizeGridExpose["windowRef"];
"innerRef": AsamFixedSizeGridExpose["windowRef"];
"getItemStyleCache": (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties>;
"scrollTo": (options: AsamDynamicSizeGridGridScrollOptions) => void;
"scrollToItem": (rowIndex?: number, columnIndex?: number, alignment?: AsamDynamicSizeGridAlignment) => void;
};参数与事件说明
states
必填：是；声明来源：上游声明。
states 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
touchStartX
必填：是；声明来源：上游声明。
touchStartY
必填：是；声明来源：上游声明。
handleTouchStart
必填：是；声明来源：上游声明。
handleTouchStart 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: TouchEvent): void
handleTouchMove
必填：是；声明来源：上游声明。
handleTouchMove 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: TouchEvent): void
windowRef
必填：是；声明来源：上游声明。
windowRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
innerRef
必填：是；声明来源：上游声明。
innerRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
getItemStyleCache
必填：是；声明来源：ASAM 声明。
getItemStyleCache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(key?: unknown, size?: unknown, direction?: unknown): Record<string, CSSProperties>
scrollTo
必填：是；声明来源：ASAM 声明。
scrollTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(options: AsamDynamicSizeGridGridScrollOptions): void
scrollToItem
必填：是；声明来源：ASAM 声明。
scrollToItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(rowIndex?: number | undefined, columnIndex?: number | undefined, alignment?: AsamDynamicSizeGridAlignment | undefined): void
AsamFixedSizeGridInstance 公开类型视图
import type { CSSProperties } from 'vue';
import type { AsamFixedSizeGridInstance, AsamFixedSizeGridExpose, AsamFixedSizeGridProps, AsamDynamicSizeGridGridScrollOptions, AsamDynamicSizeGridAlignment } from '@asam-ui/ui';
// AsamFixedSizeGridInstance
type PublicContract = {
"states": (AsamFixedSizeGridInstance)["states"];
"touchStartX": number;
"touchStartY": number;
"handleTouchStart": (e: TouchEvent) => void;
"handleTouchMove": (e: TouchEvent) => void;
"windowRef": AsamFixedSizeGridExpose["windowRef"];
"innerRef": AsamFixedSizeGridExpose["windowRef"];
"getItemStyleCache": (key?: unknown, size?: unknown, direction?: unknown) => Record<string, CSSProperties>;
"scrollTo": (options: AsamDynamicSizeGridGridScrollOptions) => void;
"scrollToItem": (rowIndex?: number, columnIndex?: number, alignment?: AsamDynamicSizeGridAlignment) => void;
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamFixedSizeGridSlots)["default"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>[]
AsamFixedSizeGridSlots 公开类型视图
import type { VNode } from 'vue';
import type { AsamFixedSizeGridSlots } from '@asam-ui/ui';
// AsamFixedSizeGridSlots
type PublicContract = {
"default"?: (AsamFixedSizeGridSlots)["default"];
};参数与事件说明
itemRendered
必填：是；声明来源：ASAM 声明。
scroll
必填：是；声明来源：ASAM 声明。
AsamFixedSizeGridEmits 公开类型视图
import type { AsamFixedSizeGridEmits, AsamDynamicSizeGridGridItemRenderedEvtParams, AsamDynamicSizeGridGridStates } from '@asam-ui/ui';
// AsamFixedSizeGridEmits
type PublicContract = {
"itemRendered": [range: AsamDynamicSizeGridGridItemRenderedEvtParams];
"scroll": [position: Pick<AsamDynamicSizeGridGridStates, "scrollLeft" | "scrollTop" | "xAxisScrollDir" | "yAxisScrollDir" | "updateRequested">];
};