使用场景 ​
在 Table 中定义一列的字段、标题、格式与交互。
契约与组合 ​
列在 AsamTable 内注册,排序、过滤、选择与树状态由父表格管理。 完整说明。
公开 Props、Slots 与实例类型接受 Row 泛型。 完整说明。
基础用法与状态 ​
基础用法与状态
<template>
<div class="demo-root-layout">
<label>
<span>控件密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<AsamButton type="default" native-type="button" @click="loading = !loading"
>切换本地加载状态</AsamButton
>
<AsamTable
v-bind="{ data: rows, rowKey: 'id', selectable: true, loading, size }"
@selection-change="selection = $event"
>
<template #toolbar="{ selection: current }">
<span>已选 {{ current.length }} 项</span>
</template>
<!-- @vue-generic {Row} -->
<AsamTableColumn prop="name" label="名称" min-width="150">
<template #default="{ row }">
<span>{{ row.name }}</span>
</template>
</AsamTableColumn>
<AsamTableColumn
v-bind="{ prop: 'count', label: '数量', sortable: true, width: 100 }"
/>
<template #empty>没有本地记录</template>
</AsamTable>
<p class="example-paragraph" role="status">选中键:{{ selection.map((row) => row.id).join(', ') }}</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableColumnBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
interface Row {
id: number;
name: string;
count: number;
}
const rows: Row[] = [
{ id: 1, name: '本地草稿', count: 3 },
{ id: 2, name: '本地记录', count: 8 }
];
const selection = ref<Row[]>([]);
const loading = ref(false);
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const size = ref<AsamControlSize>('default');
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<div class="demo-root-layout">
<label>
<span>控件密度</span>
<AsamSelect v-model="size">
<AsamOption v-for="value in sizes" :key="value" :label="value" :value="value">{{
value
}}</AsamOption>
</AsamSelect>
</label>
<AsamButton type="default" native-type="button" @click="loading = !loading"
>切换本地加载状态</AsamButton
>
<AsamTable
v-bind="{ data: rows, rowKey: 'id', selectable: true, loading, size }"
@selection-change="selection = $event"
>
<template #toolbar="{ selection: current }">
<span>已选 {{ current.length }} 项</span>
</template>
<AsamTableColumn prop="name" label="名称" min-width="150">
<template #default="{ row }">
<span>{{ row.name }}</span>
</template>
</AsamTableColumn>
<AsamTableColumn
v-bind="{ prop: 'count', label: '数量', sortable: true, width: 100 }"
/>
<template #empty>没有本地记录</template>
</AsamTable>
<p class="example-paragraph" role="status">选中键:{{ selection.map((row) => row.id).join(', ') }}</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTableColumnBasicDemo' });
import { ref } from 'vue';
import { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const rows = [
{ id: 1, name: '本地草稿', count: 3 },
{ id: 2, name: '本地记录', count: 8 }
];
const selection = ref([]);
const loading = ref(false);
const sizes = ['large', 'big', 'default', 'small'];
const size = ref('default');
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
完整作用域插槽与真实半选行 ​
完整作用域插槽与真实半选行
<template>
<div class="demo-root-layout">
<p class="example-paragraph" role="status">父筛选值 {{ filtered.join(',') || '空' }};事件 {{ last }}</p>
<AsamTable
ref="table"
:data="rows"
selectable
row-key="id"
:tree-props="{ checkStrictly: false }"
@sort-change="last = `排序 ${$event.prop ?? '清空'}`"
@filter-change="last = JSON.stringify($event)"
>
<!-- @vue-generic {Row} -->
<AsamTableColumn type="expand" label="详情">
<template #expand="{ expanded, expandable }">
<span>{{ expandable ? (expanded ? '收起' : '展开') : '不可展开' }}</span>
</template>
<template #default="{ row }">{{ row.name }} 的完整详情</template>
</AsamTableColumn>
<!-- @vue-generic {Row} -->
<AsamTableColumn prop="name" label="名称" sortable>
<template #header="{ column, $index }">{{ $index }} · {{ column.label }}</template>
<template #default="{ row, $index }">{{ $index + 1 }} · {{ row.name }}</template>
</AsamTableColumn>
<!-- @vue-generic {Row} -->
<AsamTableColumn
prop="group"
label="分类"
column-key="group"
:filters="[
{ text: '甲', value: 'a' },
{ text: '乙', value: 'b' }
]"
:filtered-value="filtered"
:filter-method="(value, row) => row.group === value"
>
<template #filter-icon="{ filterOpened }">
<span>{{ filterOpened ? '收起筛选' : '打开筛选' }}</span>
</template>
</AsamTableColumn>
</AsamTable>
<AsamButton
native-type="submit"
type="default"
@click="table?.toggleRowSelection(rows[0].children![0], true)"
>选择单个子行</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="half = table?.getHalfSelectionRows().map((row) => row.id) ?? []"
>
读取半选父行
</AsamButton>
<AsamButton
native-type="submit"
type="default"
@click="
table?.clearSelection();
half = [];
"
>
清空选择
</AsamButton>
<p class="example-paragraph" role="status">半选父行 {{ half.join(',') }}</p>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTableColumnSlotsDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
import type { AsamTableExpose } from '@asam-ui/ui';
interface Row {
id: number;
name: string;
group: string;
children?: Row[];
}
const rows: Row[] = [
{
id: 1,
name: '父行',
group: 'a',
children: [
{ id: 2, name: '子行一', group: 'a' },
{ id: 3, name: '子行二', group: 'b' }
]
},
{ id: 4, name: '另一行', group: 'b' }
];
const table = ref<AsamTableExpose<Row>>();
const half = ref<number[]>([]);
const filtered = ref<string[]>([]);
const last = ref('尚未触发');
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<div class="demo-root-layout">
<p class="example-paragraph" role="status">父筛选值 {{ filtered.join(',') || '空' }};事件 {{ last }}</p>
<AsamTable
ref="table"
:data="rows"
selectable
row-key="id"
:tree-props="{ checkStrictly: false }"
@sort-change="last = `排序 ${$event.prop ?? '清空'}`"
@filter-change="last = JSON.stringify($event)"
>
<AsamTableColumn type="expand" label="详情">
<template #expand="{ expanded, expandable }">
<span>{{ expandable ? (expanded ? '收起' : '展开') : '不可展开' }}</span>
</template>
<template #default="{ row }">{{ row.name }} 的完整详情</template>
</AsamTableColumn>
<AsamTableColumn prop="name" label="名称" sortable>
<template #header="{ column, $index }">{{ $index }} · {{ column.label }}</template>
<template #default="{ row, $index }">{{ $index + 1 }} · {{ row.name }}</template>
</AsamTableColumn>
<AsamTableColumn
prop="group"
label="分类"
column-key="group"
:filters="[
{ text: '甲', value: 'a' },
{ text: '乙', value: 'b' }
]"
:filtered-value="filtered"
:filter-method="(value, row) => row.group === value"
>
<template #filter-icon="{ filterOpened }">
<span>{{ filterOpened ? '收起筛选' : '打开筛选' }}</span>
</template>
</AsamTableColumn>
</AsamTable>
<AsamButton
native-type="submit"
type="default"
@click="table?.toggleRowSelection(rows[0].children[0], true)"
>选择单个子行</AsamButton
>
<AsamButton
native-type="submit"
type="default"
@click="half = table?.getHalfSelectionRows().map((row) => row.id) ?? []"
>
读取半选父行
</AsamButton>
<AsamButton
native-type="submit"
type="default"
@click="
table?.clearSelection();
half = [];
"
>
清空选择
</AsamButton>
<p class="example-paragraph" role="status">半选父行 {{ half.join(',') }}</p>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTableColumnSlotsDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';
const rows = [
{
id: 1,
name: '父行',
group: 'a',
children: [
{ id: 2, name: '子行一', group: 'a' },
{ id: 3, name: '子行二', group: 'b' }
]
},
{ id: 4, name: '另一行', group: 'b' }
];
const table = ref();
const half = ref([]);
const filtered = ref([]);
const last = ref('尚未触发');
</script>
<style scoped>
.demo-root-layout {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
实例、类型与边界 ​
公开 API 与下列完整 SFC 来自同一组件入口。TS 和 JS 演示分别提供所有本地依赖文件;类型约束只出现在 TS 中。远程请求与业务持久化由宿主承担。
API
属性 AsamTableColumnProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamTableColumnProps<Row>)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamTableColumnProps<Row>)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamTableColumnProps<Row>)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamTableColumnProps<Row>)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamTableColumnProps<Row>)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamTableColumnProps<Row>)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
type | 对应列的类型。如果设置了selection则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 | string | undefined | "default" |
label | 显示的标题 | string | undefined | — |
className | 列的 className | string | undefined | — |
labelClassName | 当前列标题的自定义类名 | string | undefined | — |
property | — | string | undefined | — |
prop | 字段名称对应列内容的字段名, 也可以使用 property属性 | string | undefined | — |
width | 对应列的宽度 | string | number | undefined | "" |
minWidth | 对应列的最小宽度,对应列的最小宽度, 与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | number | undefined | "" |
renderHeader | 列标题 Label 区域渲染使用的 Function | (AsamTableColumnProps<Row>)["renderHeader"] | — |
sortable | 对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件 | string | boolean | undefined | false |
sortMethod | 指定数据按照哪个属性进行排序,仅当sortable设置为true的时候有效。应该如同 Array.sort 那样返回一个 Number | (AsamTableColumnProps<Row>)["sortMethod"] | — |
sortBy | 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推 | (AsamTableColumnProps<Row>)["sortBy"] | — |
resizable | 对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真) | boolean | undefined | true |
columnKey | column 的 key, column 的 key, 如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 | string | undefined | — |
align | 对齐方式,可选 left、center、right。 | string | undefined | — |
headerAlign | 表头对齐方式;省略时使用 align,支持 left、center、right。 | string | undefined | — |
showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | (AsamTableColumnProps<Row>)["showOverflowTooltip"] | undefined |
tooltipFormatter | 格式化单元格提示内容的函数,show-overflow-tooltip 为 true 时生效。 | (AsamTableColumnProps<Row>)["tooltipFormatter"] | — |
fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | string | boolean | undefined | false |
formatter | 用来格式化内容 | (AsamTableColumnProps<Row>)["formatter"] | — |
selectable | 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | (AsamTableColumnProps<Row>)["selectable"] | — |
reserveSelection | 数据刷新后是否保留选项,仅对 type=selection 的列有效,请注意, 需指定 row-key 来让这个功能生效。 | boolean | undefined | false |
filterMethod | 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 | (AsamTableColumnProps<Row>)["filterMethod"] | — |
filteredValue | 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 | string[] | undefined | — |
filters | 数据过滤的选项, 数组格式,数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。 | (AsamTableColumnProps<Row>)["filters"] | — |
filterPlacement | 过滤弹出框的定位 | string | undefined | — |
filterMultiple | 数据过滤的选项是否多选 | boolean | undefined | true |
filterClassName | 过滤弹出框的 className | string | undefined | — |
index | 如果设置了 type=index,可以通过传递 index 属性来自定义索引 | number | ((index: number) => number) | undefined | — |
sortOrders | 数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序 | (AsamTableColumnProps<Row>)["sortOrders"] | 工厂函数(每个实例创建) |
实例方法与状态 AsamTableColumnExpose
类型 AsamTableColumnInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamTableColumnInstance<Row>["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | (AsamTableColumnInstance<Row>)["$props"] | — |
$attrs | — | AsamTableColumnInstance<Row>["$attrs"] | — |
$refs | — | AsamTableColumnInstance<Row>["$refs"] | — |
$slots | — | (AsamTableColumnInstance<Row>)["$slots"] | — |
$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 | — | (AsamTableColumnInstance<Row>)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamTableColumnInstance<Row>)["$nextTick"] | — |
$watch | — | (AsamTableColumnInstance<Row>)["$watch"] | — |
style | — | unknown | — |
className | 列的 className | string | undefined | — |
width | 对应列的宽度 | string | number | undefined | — |
fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | string | boolean | undefined | — |
showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | (AsamTableColumnInstance<Row>)["showOverflowTooltip"] | — |
tooltipFormatter | 格式化单元格提示内容的函数,show-overflow-tooltip 为 true 时生效。 | (AsamTableColumnInstance<Row>)["tooltipFormatter"] | — |
type | 对应列的类型。如果设置了selection则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 | string | undefined | — |
key | — | PropertyKey | undefined | — |
filters | 数据过滤的选项, 数组格式,数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。 | (AsamTableColumnInstance<Row>)["filters"] | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamTableColumnInstance<Row>)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamTableColumnInstance<Row>)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamTableColumnInstance<Row>)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamTableColumnInstance<Row>)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamTableColumnInstance<Row>)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamTableColumnInstance<Row>)["onVnodeUnmounted"] | — |
class | — | unknown | — |
formatter | 用来格式化内容 | (AsamTableColumnInstance<Row>)["formatter"] | — |
label | 显示的标题 | string | undefined | — |
minWidth | 对应列的最小宽度,对应列的最小宽度, 与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | number | undefined | — |
align | 对齐方式,可选 left、center、right。 | string | undefined | — |
labelClassName | 当前列标题的自定义类名 | string | undefined | — |
index | 如果设置了 type=index,可以通过传递 index 属性来自定义索引 | number | ((index: number) => number) | undefined | — |
resizable | 对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真) | boolean | undefined | — |
property | — | string | undefined | — |
prop | 字段名称对应列内容的字段名, 也可以使用 property属性 | string | undefined | — |
renderHeader | 列标题 Label 区域渲染使用的 Function | (AsamTableColumnInstance<Row>)["renderHeader"] | — |
sortable | 对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件 | string | boolean | undefined | — |
sortMethod | 指定数据按照哪个属性进行排序,仅当sortable设置为true的时候有效。应该如同 Array.sort 那样返回一个 Number | (AsamTableColumnInstance<Row>)["sortMethod"] | — |
sortBy | 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推 | (AsamTableColumnInstance<Row>)["sortBy"] | — |
columnKey | column 的 key, column 的 key, 如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 | string | undefined | — |
headerAlign | 表头对齐方式;省略时使用 align,支持 left、center、right。 | string | undefined | — |
selectable | 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | (AsamTableColumnInstance<Row>)["selectable"] | — |
reserveSelection | 数据刷新后是否保留选项,仅对 type=selection 的列有效,请注意, 需指定 row-key 来让这个功能生效。 | boolean | undefined | — |
filterMethod | 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 | (AsamTableColumnInstance<Row>)["filterMethod"] | — |
filteredValue | 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 | string[] | undefined | — |
filterPlacement | 过滤弹出框的定位 | string | undefined | — |
filterMultiple | 数据过滤的选项是否多选 | boolean | undefined | — |
filterClassName | 过滤弹出框的 className | string | undefined | — |
sortOrders | 数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序 | (AsamTableColumnInstance<Row>)["sortOrders"] | — |
$route | 当前规范化路由位置,详见 RouteLocationNormalizedLoaded。 | AsamTableColumnInstance<Row>["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamTableColumnInstance<Row>["$router"] | — |
插槽 AsamTableColumnSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | ((scope: { row: Row; column: AsamTableColumnCtx<Row>; $index: number; }) => VNodeChild) | undefined | — |
header | — | ((scope: { column: AsamTableColumnCtx<Row>; $index: number; }) => VNodeChild) | undefined | — |
expand | — | ((scope: { expanded: boolean; expandable: boolean; }) => VNodeChild) | undefined | — |
filter-icon | — | ((scope: { filterOpened: boolean; }) => VNodeChild) | undefined | — |
用法与契约补充说明 ​
契约与组合 ​
列在 AsamTable 内注册,排序、过滤、选择与树状态由父表格管理。prop / property、label、width / minWidth、fixed、sortable / sortMethod / sortBy、formatter、filters / filterMethod、filteredValue、showOverflowTooltip / tooltipFormatter 和 index 使用本入口的公开契约。列不独立接收四档 size,密度来自表格。
契约与组合 ​
公开 Props、Slots 与实例类型接受 Row 泛型。default 仅提供 row / column / $index;header 提供 column / $index;expand 图标插槽仅提供 expanded / expandable;filter-icon 仅提供 filterOpened。详情正文放在 type="expand" 列的 default,图标插槽与详情正文拥有不同载荷。原生列不声明独立命令式 expose 方法;注册与卸载由父表格完成。
关联组件
参数与事件补充说明
公开绑定参数,包含具备类型的事件监听器;默认值由运行时定义提供。
参数与事件说明
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
必填:否;声明来源:依赖声明。
style
必填:否;声明来源:依赖声明。
type
必填:否;声明来源:上游声明。
默认值与来源
"default"(已安装运行时;已安装组件)固定上游文档默认:default(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:'default'(2.14.7;源码事实,未作为 ASAM 运行实测)
label
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
className
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
labelClassName
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
property
必填:否;声明来源:上游声明。
prop
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
width
必填:否;声明来源:上游声明。
默认值与来源
""(已安装运行时;已安装组件)固定上游文档默认:''(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:''(2.14.7;源码事实,未作为 ASAM 运行实测)
minWidth
必填:否;声明来源:上游声明。
默认值与来源
""(已安装运行时;已安装组件)固定上游文档默认:''(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:''(2.14.7;源码事实,未作为 ASAM 运行实测)
renderHeader
必填:否;声明来源:上游声明。
renderHeader 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(data: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["renderHeader"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
sortable
必填:否;声明来源:上游声明。
sortable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(已安装运行时;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:false(2.14.7;源码事实,未作为 ASAM 运行实测)
sortMethod
必填:否;声明来源:上游声明。
sortMethod 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(a: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["sortMethod"]>, (...args: never[]) => unknown>>[0], b: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["sortMethod"]>, (...args: never[]) => unknown>>[1]): number
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
sortBy
必填:否;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["sortBy"]>, (...args: never[]) => unknown>>[0], index: number, array?: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["sortBy"]>, (...args: never[]) => unknown>>[2]): string
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
resizable
必填:否;声明来源:上游声明。
resizable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(已安装运行时;已安装组件)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
columnKey
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
align
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:left(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
headerAlign
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:left(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
showOverflowTooltip
必填:否;声明来源:上游声明。
showOverflowTooltip 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
undefined(已安装运行时;已安装组件)固定上游文档默认:undefined(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
tooltipFormatter
必填:否;声明来源:上游声明。
tooltipFormatter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(data: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["tooltipFormatter"]>, (...args: never[]) => unknown>>[0]): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
fixed
必填:否;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
formatter
必填:否;声明来源:上游声明。
formatter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["formatter"]>, (...args: never[]) => unknown>>[0], column: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["formatter"]>, (...args: never[]) => unknown>>[1], cellValue: any, index: number): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
selectable
必填:否;声明来源:上游声明。
selectable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["selectable"]>, (...args: never[]) => unknown>>[0], index: number): boolean
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
reserveSelection
必填:否;声明来源:上游声明。
reserveSelection 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
filterMethod
必填:否;声明来源:上游声明。
filterMethod 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: string, row: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["filterMethod"]>, (...args: never[]) => unknown>>[1], column: Parameters<Extract<NonNullable<(AsamTableColumnProps<Row>)["filterMethod"]>, (...args: never[]) => unknown>>[2]): void
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
filteredValue
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
filters
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
filterPlacement
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
filterMultiple
必填:否;声明来源:上游声明。
filterMultiple 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(已安装运行时;已安装组件)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
filterClassName
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
index
必填:否;声明来源:上游声明。
index 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(index: number): number
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
sortOrders
必填:否;声明来源:上游声明。
默认值与来源
工厂函数(每个实例创建)(实例工厂;已安装组件)固定上游文档默认:['ascending', 'descending', null](2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码工厂(未执行):() => {
return ['ascending', 'descending', null]
}(2.14.7;源码事实,未作为 ASAM 运行实测)
AsamTableColumnProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamTableColumnProps, AsamTableOverflowTooltipFormatter, AsamTableColumnCtx } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableColumnProps
type PublicContract<Row extends object = object> = {
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamTableColumnProps<Row>)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamTableColumnProps<Row>)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamTableColumnProps<Row>)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamTableColumnProps<Row>)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamTableColumnProps<Row>)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamTableColumnProps<Row>)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
"type"?: string | undefined;
"label"?: string | undefined;
"className"?: string | undefined;
"labelClassName"?: string | undefined;
"property"?: string | undefined;
"prop"?: string | undefined;
"width"?: string | number | undefined;
"minWidth"?: string | number | undefined;
"renderHeader"?: (AsamTableColumnProps<Row>)["renderHeader"];
"sortable"?: string | boolean | undefined;
"sortMethod"?: (AsamTableColumnProps<Row>)["sortMethod"];
"sortBy"?: (AsamTableColumnProps<Row>)["sortBy"];
"resizable"?: boolean | undefined;
"columnKey"?: string | undefined;
"align"?: string | undefined;
"headerAlign"?: string | undefined;
"showOverflowTooltip"?: (AsamTableColumnProps<Row>)["showOverflowTooltip"];
"tooltipFormatter"?: (AsamTableColumnProps<Row>)["tooltipFormatter"];
"fixed"?: string | boolean | undefined;
"formatter"?: (AsamTableColumnProps<Row>)["formatter"];
"selectable"?: (AsamTableColumnProps<Row>)["selectable"];
"reserveSelection"?: boolean | undefined;
"filterMethod"?: (AsamTableColumnProps<Row>)["filterMethod"];
"filteredValue"?: string[] | undefined;
"filters"?: (AsamTableColumnProps<Row>)["filters"];
"filterPlacement"?: string | undefined;
"filterMultiple"?: boolean | undefined;
"filterClassName"?: string | undefined;
"index"?: number | ((index: number) => number) | undefined;
"sortOrders"?: (AsamTableColumnProps<Row>)["sortOrders"];
};
完整的上游实例,包含全部公开方法与响应式状态。
AsamTableColumnExpose 公开类型视图
import type { AsamTableColumnExpose } from '@asam-ui/ui';
// AsamTableColumnExpose
type PublicContract<Row extends object = object> = AsamTableColumnExpose<Row>;
参数与事件说明
$
必填:是;声明来源:依赖声明。
$ 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$data
必填:是;声明来源:依赖声明。
$props
必填:是;声明来源:依赖声明。
$props 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$attrs
必填:是;声明来源:依赖声明。
$attrs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$refs
必填:是;声明来源:依赖声明。
$refs 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$slots
必填:是;声明来源:依赖声明。
$root
必填:是;声明来源:依赖声明。
$parent
必填:是;声明来源:依赖声明。
$host
必填:是;声明来源:依赖声明。
$host 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
$emit
必填:是;声明来源:依赖声明。
$emit 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(event: string, ...args: any[]): void
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$el
必填:是;声明来源:依赖声明。
$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<(AsamTableColumnInstance<Row>)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
style
必填:否;声明来源:依赖声明。
className
必填:否;声明来源:上游声明。
width
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:''(2.14.7;源码事实,未作为 ASAM 运行实测)
fixed
必填:否;声明来源:上游声明。
fixed 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
showOverflowTooltip
必填:否;声明来源:上游声明。
showOverflowTooltip 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
tooltipFormatter
必填:否;声明来源:上游声明。
tooltipFormatter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(data: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["tooltipFormatter"]>, (...args: never[]) => unknown>>[0]): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
type
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:'default'(2.14.7;源码事实,未作为 ASAM 运行实测)
key
必填:否;声明来源:依赖声明。
filters
必填:否;声明来源:上游声明。
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
必填:否;声明来源:依赖声明。
formatter
必填:否;声明来源:上游声明。
formatter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["formatter"]>, (...args: never[]) => unknown>>[0], column: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["formatter"]>, (...args: never[]) => unknown>>[1], cellValue: any, index: number): string | VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
label
必填:否;声明来源:上游声明。
minWidth
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:''(2.14.7;源码事实,未作为 ASAM 运行实测)
align
必填:否;声明来源:上游声明。
labelClassName
必填:否;声明来源:上游声明。
index
必填:否;声明来源:上游声明。
index 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(index: number): number
resizable
必填:否;声明来源:上游声明。
resizable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
property
必填:否;声明来源:上游声明。
prop
必填:否;声明来源:上游声明。
renderHeader
必填:否;声明来源:上游声明。
renderHeader 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(data: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["renderHeader"]>, (...args: never[]) => unknown>>[0]): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
sortable
必填:否;声明来源:上游声明。
sortable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式:false(2.14.7;源码事实,未作为 ASAM 运行实测)
sortMethod
必填:否;声明来源:上游声明。
sortMethod 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(a: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["sortMethod"]>, (...args: never[]) => unknown>>[0], b: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["sortMethod"]>, (...args: never[]) => unknown>>[1]): number
sortBy
必填:否;声明来源:上游声明。
sortBy 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["sortBy"]>, (...args: never[]) => unknown>>[0], index: number, array?: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["sortBy"]>, (...args: never[]) => unknown>>[2]): string
columnKey
必填:否;声明来源:上游声明。
headerAlign
必填:否;声明来源:上游声明。
selectable
必填:否;声明来源:上游声明。
selectable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(row: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["selectable"]>, (...args: never[]) => unknown>>[0], index: number): boolean
reserveSelection
必填:否;声明来源:上游声明。
reserveSelection 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
filterMethod
必填:否;声明来源:上游声明。
filterMethod 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: string, row: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["filterMethod"]>, (...args: never[]) => unknown>>[1], column: Parameters<Extract<NonNullable<(AsamTableColumnInstance<Row>)["filterMethod"]>, (...args: never[]) => unknown>>[2]): void
filteredValue
必填:否;声明来源:上游声明。
filterPlacement
必填:否;声明来源:上游声明。
filterMultiple
必填:否;声明来源:上游声明。
filterMultiple 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
filterClassName
必填:否;声明来源:上游声明。
sortOrders
必填:否;声明来源:上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂(未执行):() => {
return ['ascending', 'descending', null]
}(2.14.7;源码事实,未作为 ASAM 运行实测)
$route
必填:是;声明来源:依赖声明。
$route 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组;懒加载组件已解析并替换 components 中的值,可直接展示路由,不包含重定向记录。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.name:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.query:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组,也可能包含重定向记录,不能直接用于展示。此属性不可枚举。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串,使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段;存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前,最初尝试访问的位置。
嵌套展开边界:递归引用;完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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<AsamTableColumnInstance<Row>["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态;不能包含响应式值,也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamTableColumnInstance<Row>["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填:是;声明来源:依赖声明。
$router 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置;使用 HTML5 History 时,通过 history.pushState 实际更新 URL。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似,但调用 history.replaceState,而非 history.pushState。
事件参数:
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器;由浏览器前进、后退等外部导航,或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数:
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.createHref:(NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["history"]>)["createHref"]— 依赖声明生成用于链接元素的对应 href。
事件参数:
(location: string): string嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数:
(): void嵌套展开边界:深度上限;完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数;可返回 Promise 延迟滚动。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamTableColumnInstance<Row>["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数;与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数:
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数;不要添加开头的 ?,与 parseQuery 的解析函数配套。
事件参数:
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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<AsamTableColumnInstance<Row>["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由,或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数:
(): void$router.currentRoute:ShallowRef<AsamTableColumnInstance<Row>["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听,这是用于微前端的底层 API。
枚举:
false/true$router.hasRoute:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数:
(name: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数:
(): ReturnType<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置,包含带基础路径的 href;默认使用 router.currentRoute 作为 currentLocation,仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["push"]— 依赖声明通过向历史栈添加记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录,以编程方式导航到新 URL。
事件参数:
(to: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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<AsamTableColumnInstance<Row>["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫,并返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫,此时组件已获取且其他导航守卫已通过;返回移除此守卫的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子,并返回移除此钩子的函数。
事件参数:
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamTableColumnInstance<Row>["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数,涵盖同步和异步异常、守卫返回或传给 next 的错误,以及路由异步组件解析错误。
事件参数:
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamTableColumnInstance<Row>["$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
AsamTableColumnInstance 公开类型视图
import type { VNodeRef, VNode, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, WatchOptions, WatchStopHandle, RendererNode, RendererElement, ShallowRef, App } from 'vue';
import type { AsamTableColumnInstance, AsamTableColumnExpose, AsamTableColumnCtx, AsamTableOverflowTooltipFormatter, AsamTableColumnSlots } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTableColumnInstance
type PublicContract<Row extends object = object> = {
"$": AsamTableColumnInstance<Row>["$"];
"$data": AsamTableColumnExpose;
"$props": (AsamTableColumnInstance<Row>)["$props"];
"$attrs": AsamTableColumnInstance<Row>["$attrs"];
"$refs": AsamTableColumnInstance<Row>["$refs"];
"$slots": (AsamTableColumnInstance<Row>)["$slots"];
"$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": (AsamTableColumnInstance<Row>)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamTableColumnInstance<Row>)["$nextTick"];
"$watch": (AsamTableColumnInstance<Row>)["$watch"];
"style"?: unknown;
"className"?: string | undefined;
"width"?: string | number | undefined;
"fixed"?: string | boolean | undefined;
"showOverflowTooltip"?: (AsamTableColumnInstance<Row>)["showOverflowTooltip"];
"tooltipFormatter"?: (AsamTableColumnInstance<Row>)["tooltipFormatter"];
"type"?: string | undefined;
"key"?: PropertyKey | undefined;
"filters"?: (AsamTableColumnInstance<Row>)["filters"];
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamTableColumnInstance<Row>)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamTableColumnInstance<Row>)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamTableColumnInstance<Row>)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamTableColumnInstance<Row>)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamTableColumnInstance<Row>)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamTableColumnInstance<Row>)["onVnodeUnmounted"];
"class"?: unknown;
"formatter"?: (AsamTableColumnInstance<Row>)["formatter"];
"label"?: string | undefined;
"minWidth"?: string | number | undefined;
"align"?: string | undefined;
"labelClassName"?: string | undefined;
"index"?: number | ((index: number) => number) | undefined;
"resizable"?: boolean | undefined;
"property"?: string | undefined;
"prop"?: string | undefined;
"renderHeader"?: (AsamTableColumnInstance<Row>)["renderHeader"];
"sortable"?: string | boolean | undefined;
"sortMethod"?: (AsamTableColumnInstance<Row>)["sortMethod"];
"sortBy"?: (AsamTableColumnInstance<Row>)["sortBy"];
"columnKey"?: string | undefined;
"headerAlign"?: string | undefined;
"selectable"?: (AsamTableColumnInstance<Row>)["selectable"];
"reserveSelection"?: boolean | undefined;
"filterMethod"?: (AsamTableColumnInstance<Row>)["filterMethod"];
"filteredValue"?: string[] | undefined;
"filterPlacement"?: string | undefined;
"filterMultiple"?: boolean | undefined;
"filterClassName"?: string | undefined;
"sortOrders"?: (AsamTableColumnInstance<Row>)["sortOrders"];
"$route": AsamTableColumnInstance<Row>["$route"];
"$router": AsamTableColumnInstance<Row>["$router"];
};
作用域插槽保留上游实例契约。
参数与事件说明
default
必填:否;声明来源:ASAM 声明。
default 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scope: { row: Row; column: AsamTableColumnCtx<Row>; $index: number; }): VNodeChild
header
必填:否;声明来源:ASAM 声明。
header 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scope: { column: AsamTableColumnCtx<Row>; $index: number; }): VNodeChild
expand
必填:否;声明来源:ASAM 声明。
expand 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scope: { expanded: boolean; expandable: boolean; }): VNodeChild
filter-icon
必填:否;声明来源:ASAM 声明。
filter-icon 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scope: { filterOpened: boolean; }): VNodeChild
AsamTableColumnSlots 公开类型视图
import type { VNodeChild } from 'vue';
import type { AsamTableColumnSlots, AsamTableColumnCtx } from '@asam-ui/ui';
// AsamTableColumnSlots
type PublicContract<Row extends object = object> = {
"default"?: ((scope: { row: Row; column: AsamTableColumnCtx<Row>; $index: number; }) => VNodeChild) | undefined;
"header"?: ((scope: { column: AsamTableColumnCtx<Row>; $index: number; }) => VNodeChild) | undefined;
"expand"?: ((scope: { expanded: boolean; expandable: boolean; }) => VNodeChild) | undefined;
"filter-icon"?: ((scope: { filterOpened: boolean; }) => VNodeChild) | undefined;
};