x-next 1.12.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_CODING.md +6 -5
- package/AI_USAGE/catalog.md +106 -105
- package/AI_USAGE/components/alert-api.md +48 -0
- package/AI_USAGE/components/alert.md +222 -3
- package/AI_USAGE/components/bar-chart-api.md +177 -0
- package/AI_USAGE/components/bar-chart.md +297 -3
- package/AI_USAGE/components/boxicons.md +147 -0
- package/AI_USAGE/components/button-api.md +144 -0
- package/AI_USAGE/components/button.md +447 -3
- package/AI_USAGE/components/charts.md +81 -0
- package/AI_USAGE/components/checkbox-api.md +145 -0
- package/AI_USAGE/components/checkbox.md +365 -3
- package/AI_USAGE/components/color-picker-api.md +52 -0
- package/AI_USAGE/components/color-picker.md +211 -3
- package/AI_USAGE/components/config-provider-api.md +38 -0
- package/AI_USAGE/components/config-provider.md +250 -3
- package/AI_USAGE/components/date-picker-api.md +1114 -0
- package/AI_USAGE/components/date-picker.md +378 -3
- package/AI_USAGE/components/dialog-api.md +142 -0
- package/AI_USAGE/components/dialog.md +284 -3
- package/AI_USAGE/components/draggable-api.md +146 -0
- package/AI_USAGE/components/draggable.md +259 -0
- package/AI_USAGE/components/drawer-api.md +78 -0
- package/AI_USAGE/components/drawer.md +227 -0
- package/AI_USAGE/components/dropdown-api.md +529 -0
- package/AI_USAGE/components/dropdown.md +392 -3
- package/AI_USAGE/components/empty-api.md +36 -0
- package/AI_USAGE/components/empty.md +227 -3
- package/AI_USAGE/components/finicon.md +88 -0
- package/AI_USAGE/components/form-api.md +524 -0
- package/AI_USAGE/components/form.md +454 -0
- package/AI_USAGE/components/grid-api.md +527 -0
- package/AI_USAGE/components/grid.md +224 -0
- package/AI_USAGE/components/heatmap-api.md +122 -0
- package/AI_USAGE/components/heatmap.md +220 -0
- package/AI_USAGE/components/icon-api.md +4707 -0
- package/AI_USAGE/components/icon.md +257 -0
- package/AI_USAGE/components/image-api.md +440 -0
- package/AI_USAGE/components/image.md +465 -0
- package/AI_USAGE/components/input-api.md +184 -0
- package/AI_USAGE/components/input-number-api.md +66 -0
- package/AI_USAGE/components/input-number.md +294 -0
- package/AI_USAGE/components/input-tag-api.md +114 -0
- package/AI_USAGE/components/input-tag.md +482 -0
- package/AI_USAGE/components/input.md +293 -3
- package/AI_USAGE/components/layout-api.md +147 -0
- package/AI_USAGE/components/layout.md +230 -0
- package/AI_USAGE/components/line-chart-api.md +197 -0
- package/AI_USAGE/components/line-chart.md +279 -3
- package/AI_USAGE/components/link-api.md +42 -0
- package/AI_USAGE/components/link.md +197 -0
- package/AI_USAGE/components/menu-api.md +516 -0
- package/AI_USAGE/components/menu.md +268 -0
- package/AI_USAGE/components/message-api.md +215 -0
- package/AI_USAGE/components/message-box-api.md +108 -0
- package/AI_USAGE/components/message-box.md +268 -3
- package/AI_USAGE/components/message.md +231 -3
- package/AI_USAGE/components/network-api.md +91 -0
- package/AI_USAGE/components/network.md +378 -0
- package/AI_USAGE/components/notification-api.md +236 -0
- package/AI_USAGE/components/notification.md +275 -3
- package/AI_USAGE/components/pagination-api.md +62 -0
- package/AI_USAGE/components/pagination.md +386 -5
- package/AI_USAGE/components/pie-chart-api.md +109 -0
- package/AI_USAGE/components/pie-chart.md +245 -3
- package/AI_USAGE/components/popconfirm-api.md +75 -0
- package/AI_USAGE/components/popconfirm.md +231 -3
- package/AI_USAGE/components/popover-api.md +75 -0
- package/AI_USAGE/components/popover.md +208 -3
- package/AI_USAGE/components/popup-api.md +75 -0
- package/AI_USAGE/components/popup.md +52 -0
- package/AI_USAGE/components/progress-api.md +44 -0
- package/AI_USAGE/components/progress.md +248 -3
- package/AI_USAGE/components/radio-api.md +165 -0
- package/AI_USAGE/components/radio.md +259 -3
- package/AI_USAGE/components/rate-api.md +54 -0
- package/AI_USAGE/components/rate.md +233 -3
- package/AI_USAGE/components/resize-box-api.md +56 -0
- package/AI_USAGE/components/resize-box.md +231 -0
- package/AI_USAGE/components/scrollbar-api.md +77 -0
- package/AI_USAGE/components/scrollbar.md +218 -0
- package/AI_USAGE/components/select-api.md +758 -0
- package/AI_USAGE/components/select.md +640 -3
- package/AI_USAGE/components/skeleton-api.md +85 -0
- package/AI_USAGE/components/skeleton.md +150 -0
- package/AI_USAGE/components/slider-api.md +51 -0
- package/AI_USAGE/components/slider.md +233 -3
- package/AI_USAGE/components/space-api.md +38 -0
- package/AI_USAGE/components/space.md +145 -0
- package/AI_USAGE/components/spin-api.md +43 -0
- package/AI_USAGE/components/spin.md +205 -0
- package/AI_USAGE/components/steps-api.md +111 -0
- package/AI_USAGE/components/steps.md +201 -3
- package/AI_USAGE/components/switch-api.md +58 -0
- package/AI_USAGE/components/switch.md +290 -3
- package/AI_USAGE/components/table-api.md +2919 -0
- package/AI_USAGE/components/table.md +1414 -0
- package/AI_USAGE/components/tabs-api.md +135 -0
- package/AI_USAGE/components/tabs.md +308 -3
- package/AI_USAGE/components/tag-api.md +124 -0
- package/AI_USAGE/components/tag.md +292 -0
- package/AI_USAGE/components/textarea-api.md +55 -0
- package/AI_USAGE/components/textarea.md +326 -3
- package/AI_USAGE/components/time-picker-api.md +137 -0
- package/AI_USAGE/components/time-picker.md +271 -3
- package/AI_USAGE/components/time-range-selector-api.md +44 -0
- package/AI_USAGE/components/time-range-selector.md +355 -0
- package/AI_USAGE/components/timeline-api.md +93 -0
- package/AI_USAGE/components/timeline.md +312 -0
- package/AI_USAGE/components/tooltip-api.md +77 -0
- package/AI_USAGE/components/tooltip.md +182 -0
- package/AI_USAGE/components/trend-chart-api.md +119 -0
- package/AI_USAGE/components/trend-chart.md +335 -0
- package/AI_USAGE/components/trigger-api.md +124 -0
- package/AI_USAGE/components/trigger.md +185 -0
- package/AI_USAGE/components/upload-api.md +200 -0
- package/AI_USAGE/components/upload.md +711 -3
- package/AI_USAGE/components/watermark-api.md +87 -0
- package/AI_USAGE/components/watermark.md +200 -0
- package/AI_USAGE/core.md +1 -1
- package/AI_USAGE/index.md +35 -7
- package/AI_USAGE/recipes/form-on-demand.md +1 -1
- package/AI_USAGE.md +33657 -7
- package/CHANGELOG.md +40 -0
- package/dist/_utils/inherit-component-type.d.ts +11 -0
- package/dist/components/date-picker/index.d.ts +420 -5
- package/dist/components/form-input/index.d.ts +617 -2
- package/dist/components/layout/index.d.ts +689 -1
- package/dist/components/menu/index.d.ts +786 -1
- package/dist/components/network/Network.vue.d.ts +7 -3
- package/dist/components/network/index.d.ts +10 -2
- package/dist/components/network/props.d.ts +5 -0
- package/dist/components/network/utils.d.ts +3 -3
- package/dist/components/pagination/page-item-ellipsis.vue.d.ts +4 -1
- package/dist/components/pagination/page-item-step.vue.d.ts +101 -130
- package/dist/components/pagination/page-item.vue.d.ts +1 -0
- package/dist/components/pagination/page-jumper.vue.d.ts +1 -1
- package/dist/components/pagination/page-options.vue.d.ts +6 -4
- package/dist/components/pagination/utils.d.ts +3 -0
- package/dist/components/time-range-selector/index.d.ts +6 -6
- package/dist/es/_container/resize-observer-v2.js +1 -1
- package/dist/es/_container/resize-observer.js +1 -1
- package/dist/es/_hooks/use-resize-observer.js +1 -1
- package/dist/es/_styles/palette-aliases.js +4 -4
- package/dist/es/_utils/inherit-component-type.js +6 -0
- package/dist/es/_virtual/advancedFormat.js +1 -1
- package/dist/es/_virtual/customParseFormat.js +1 -1
- package/dist/es/_virtual/dayjs.min.js +1 -1
- package/dist/es/_virtual/isBetween.js +1 -1
- package/dist/es/_virtual/quarterOfYear.js +1 -1
- package/dist/es/_virtual/weekOfYear.js +1 -1
- package/dist/es/_virtual/weekYear.js +1 -1
- package/dist/es/_virtual/zh-cn.js +1 -1
- package/dist/es/components/button/Button.js +53 -42
- package/dist/es/components/date-picker/index.js +18 -17
- package/dist/es/components/draggable/useDraggable.js +1 -1
- package/dist/es/components/form/Form.vue2.js +1 -1
- package/dist/es/components/form/FormItem.vue2.js +1 -1
- package/dist/es/components/form-input/index.js +12 -11
- package/dist/es/components/form-input-number/InputNumber.js +1 -1
- package/dist/es/components/form-slider/Slider.vue2.js +1 -1
- package/dist/es/components/form-slider/slider-ticks.vue2.js +1 -1
- package/dist/es/components/form-slider/utils.js +1 -1
- package/dist/es/components/layout/index.js +10 -9
- package/dist/es/components/menu/MenuItem.js +1 -1
- package/dist/es/components/menu/hooks/use-level.js +5 -5
- package/dist/es/components/menu/index.js +13 -10
- package/dist/es/components/menu/overflow-wrap.js +1 -1
- package/dist/es/components/network/Network.vue.js +17 -12
- package/dist/es/components/network/Network.vue2.js +78 -70
- package/dist/es/components/network/utils.js +112 -71
- package/dist/es/components/pagination/Pagination.js +132 -123
- package/dist/es/components/pagination/page-item-ellipsis.vue.js +10 -10
- package/dist/es/components/pagination/page-item-ellipsis.vue2.js +24 -19
- package/dist/es/components/pagination/page-item-step.vue.js +14 -11
- package/dist/es/components/pagination/page-item-step.vue2.js +20 -22
- package/dist/es/components/pagination/page-item.vue.js +10 -9
- package/dist/es/components/pagination/page-item.vue2.js +24 -19
- package/dist/es/components/pagination/page-jumper.vue2.js +23 -23
- package/dist/es/components/pagination/page-options.vue.js +15 -10
- package/dist/es/components/pagination/page-options.vue2.js +21 -17
- package/dist/es/components/pagination/utils.js +4 -2
- package/dist/es/components/progress/circle.vue2.js +1 -1
- package/dist/es/components/progress/line.vue2.js +1 -1
- package/dist/es/components/progress/steps.vue2.js +1 -1
- package/dist/es/components/rate/Rate.js +1 -1
- package/dist/es/components/virtual-list-v2/virtual-list-item.js +1 -1
- package/dist/es/locale/en-US.js +2 -0
- package/dist/es/locale/zh-CN.js +2 -0
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/dayjs.min.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/locale/zh-cn.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/advancedFormat.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/customParseFormat.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/isBetween.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/quarterOfYear.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/weekOfYear.js +1 -1
- package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/dayjs@1.11.21/node_modules/dayjs/plugin/weekYear.js +1 -1
- package/dist/es/style.css +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.umd.js +3 -3
- package/dist/locale/interface.d.ts +3 -0
- package/dist/style/base.css +1 -1
- package/dist/style/button.css +1 -1
- package/dist/style/form-select.css +1 -1
- package/dist/style/network.css +1 -1
- package/dist/style/pagination.css +1 -1
- package/dist/style/table.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +10 -5
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/index.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/is.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/locale/en-US.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/array.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/base.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/boolean.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/custom.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/number.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/object.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/string.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/rules/type.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/util.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/compute-scroll-into-view@3.1.1/node_modules/compute-scroll-into-view/dist/index.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/number-precision@1.6.0/node_modules/number-precision/build/index.es.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/scroll-into-view-if-needed@3.1.0/node_modules/scroll-into-view-if-needed/dist/index.js +0 -0
- /package/dist/es/{Users/xuyu/Code/x-next/node_modules → node_modules}/.pnpm/sortablejs@1.15.7/node_modules/sortablejs/modular/sortable.esm.js +0 -0
|
@@ -0,0 +1,2919 @@
|
|
|
1
|
+
<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
|
|
2
|
+
# Table 完整公开 API
|
|
3
|
+
|
|
4
|
+
适用版本:x-next@1.14.0;来源指纹:`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
|
|
5
|
+
|
|
6
|
+
从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`,声明路径仅作定位。插槽类型未细化时,具体槽名与作用域见本地用法示例。
|
|
7
|
+
|
|
8
|
+
## Table API
|
|
9
|
+
|
|
10
|
+
公开声明:`dist/components/table/index.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
11
|
+
|
|
12
|
+
### Props
|
|
13
|
+
|
|
14
|
+
| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
|
|
15
|
+
| --- | --- | --- | --- | --- |
|
|
16
|
+
| columns | 表格列配置 | undefined | TableColumnData[] | 否 | [] |
|
|
17
|
+
| keyboardNavigation | 启用表体单元格方向键、Home / End 导航,保留内嵌控件的键盘行为 | undefined | false | true | 否 | false |
|
|
18
|
+
| data | 表格数据 | undefined | TableData[] | 否 | [] |
|
|
19
|
+
| bordered | 是否显示边框 | undefined | false | true | TableBorder | 否 | false |
|
|
20
|
+
| hoverable | 是否显示行悬浮效果 | undefined | false | true | 否 | true |
|
|
21
|
+
| stripe | 是否显示斑马纹 | undefined | false | true | 否 | false |
|
|
22
|
+
| size | 表格尺寸 | undefined | "mini" | "small" | "medium" | "large" | 否 | undefined |
|
|
23
|
+
| tableLayoutFixed | 是否使用 fixed 表格布局 | undefined | false | true | 否 | false |
|
|
24
|
+
| loading | 是否加载中,默认主题色圆环;object 会透传给 Spin | undefined | false | true | { [x: string]: any; } | 否 | false |
|
|
25
|
+
| rowSelection | 行选择配置 | undefined | TableRowSelection | 否 | 未声明 |
|
|
26
|
+
| expandable | 展开行配置 | undefined | TableExpandable | 否 | 未声明 |
|
|
27
|
+
| scroll | 滚动配置 | undefined | { x?: number | string; y?: number | string; minWidth?: number | string; maxHeight?: number | string; } | 否 | 未声明 |
|
|
28
|
+
| pagination | 分页配置,传 false 可关闭分页 | undefined | false | true | PaginationProps | 否 | true |
|
|
29
|
+
| pagePosition | 分页位置 | undefined | "top" | "bottom" | "tl" | "tr" | "bl" | "br" | 否 | "br" |
|
|
30
|
+
| indentSize | 树形表格缩进距离 | undefined | number | 否 | 16 |
|
|
31
|
+
| rowKey | 表格行 key 字段 | undefined | string | 否 | "key" |
|
|
32
|
+
| showHeader | 是否显示表头 | undefined | false | true | 否 | true |
|
|
33
|
+
| virtualListProps | 虚拟列表配置,传入后开启虚拟滚动 | undefined | VirtualListProps | 否 | 未声明 |
|
|
34
|
+
| spanMethod | 单元格合并方法 | undefined | (data: { record: TableData; column: TableColumnData | TableOperationColumn; rowIndex: number; columnIndex: number; }) => { rowspan?: number; colspan?: number; } | void | 否 | 未声明 |
|
|
35
|
+
| spanAll | 合并方法索引是否包含操作列 | undefined | false | true | 否 | false |
|
|
36
|
+
| components | 自定义内部操作列组织方式 | undefined | TableComponents | 否 | 未声明 |
|
|
37
|
+
| loadMore | 树形数据懒加载函数 | undefined | (record: TableData, done: (children?: TableData[]) => void) => void | 否 | 未声明 |
|
|
38
|
+
| filterIconAlignLeft | 筛选图标是否左对齐 | undefined | false | true | 否 | false |
|
|
39
|
+
| hideExpandButtonOnEmpty | 子树为空时是否隐藏展开按钮 | undefined | false | true | 否 | false |
|
|
40
|
+
| rowClass | 行 class,支持函数 | undefined | string | any[] | { [x: string]: any; } | (record: TableData, rowIndex: number) => any | 否 | 未声明 |
|
|
41
|
+
| draggable | 拖拽排序配置 | undefined | TableDraggable | 否 | 未声明 |
|
|
42
|
+
| columnResizable | 是否允许调整列宽 | undefined | false | true | 否 | false(Vue Boolean 转换) |
|
|
43
|
+
| summary | 是否显示总结行,或自定义总结数据 | undefined | false | true | (params: { columns: TableColumnData[]; data: TableData[]; }) => TableData[] | 否 | false(Vue Boolean 转换) |
|
|
44
|
+
| summaryText | 默认总结行首列文字 | undefined | string | 否 | undefined |
|
|
45
|
+
| summarySpanMethod | 总结行单元格合并方法 | undefined | (data: { record: TableData; column: TableColumnData | TableOperationColumn; rowIndex: number; columnIndex: number; }) => { rowspan?: number; colspan?: number; } | void | 否 | 未声明 |
|
|
46
|
+
| selectedKeys | 已选择行 key,受控模式 | undefined | (string | number)[] | 否 | 未声明 |
|
|
47
|
+
| defaultSelectedKeys | 默认已选择行 key | undefined | (string | number)[] | 否 | 未声明 |
|
|
48
|
+
| expandedKeys | 已展开行 key,受控模式 | undefined | (string | number)[] | 否 | 未声明 |
|
|
49
|
+
| defaultExpandedKeys | 默认展开行 key | undefined | (string | number)[] | 否 | 未声明 |
|
|
50
|
+
| defaultExpandAllRows | 是否默认展开全部行 | undefined | false | true | 否 | false |
|
|
51
|
+
| stickyHeader | 是否开启表头吸顶,数字表示 top 偏移 | undefined | number | false | true | 否 | false |
|
|
52
|
+
| scrollbar | 是否使用自定义滚动条,或传入 Scrollbar 配置 | undefined | false | true | ScrollbarProps | 否 | true |
|
|
53
|
+
| showEmptyTree | 是否展示空子树 | undefined | false | true | 否 | false |
|
|
54
|
+
|
|
55
|
+
### Events
|
|
56
|
+
|
|
57
|
+
| 事件 | 用途 | 监听器签名(即事件参数) |
|
|
58
|
+
| --- | --- | --- |
|
|
59
|
+
| update:selectedKeys | 选中行变化时触发 | undefined | (rowKeys: (string | number)[]) => any |
|
|
60
|
+
| update:expandedKeys | 展开行变化时触发 | undefined | (rowKeys: (string | number)[]) => any |
|
|
61
|
+
| expand | 点击展开行时触发 | undefined | (rowKey: string | number, record: TableData) => any |
|
|
62
|
+
| expandedChange | 展开行变化时触发 | undefined | (rowKeys: (string | number)[]) => any |
|
|
63
|
+
| select | 点击行选择器时触发 | undefined | (rowKeys: (string | number)[], rowKey: string | number, record: TableData) => any |
|
|
64
|
+
| selectAll | 点击全选选择器时触发 | undefined | (checked: boolean) => any |
|
|
65
|
+
| selectionChange | 已选择行变化时触发 | undefined | (rowKeys: (string | number)[]) => any |
|
|
66
|
+
| sorterChange | 排序规则变化时触发 | undefined | (dataIndex: string, direction: string) => any |
|
|
67
|
+
| filterChange | 筛选项变化时触发 | undefined | (dataIndex: string, filteredValues: string[]) => any |
|
|
68
|
+
| pageChange | 分页页码变化时触发 | undefined | (page: number) => any |
|
|
69
|
+
| pageSizeChange | 每页数量变化时触发 | undefined | (pageSize: number) => any |
|
|
70
|
+
| change | 分页、排序、筛选、拖拽变化时触发 | undefined | (data: TableData[], extra: TableChangeExtra, currentData: TableData[]) => any |
|
|
71
|
+
| cellMouseEnter | 鼠标进入单元格时触发 | undefined | (record: TableData, column: TableColumnData, ev: Event) => any |
|
|
72
|
+
| cellMouseLeave | 鼠标离开单元格时触发 | undefined | (record: TableData, column: TableColumnData, ev: Event) => any |
|
|
73
|
+
| cellClick | 点击单元格时触发 | undefined | (record: TableData, column: TableColumnData, ev: Event) => any |
|
|
74
|
+
| rowClick | 点击行时触发 | undefined | (record: TableData, ev: Event) => any |
|
|
75
|
+
| headerClick | 点击表头时触发 | undefined | (column: TableColumnData, ev: Event) => any |
|
|
76
|
+
| columnResize | 调整列宽时触发 | undefined | (dataIndex: string, width: number) => any |
|
|
77
|
+
| rowDblclick | 双击行时触发 | undefined | (record: TableData, ev: Event) => any |
|
|
78
|
+
| cellDblclick | 双击单元格时触发 | undefined | (record: TableData, column: TableColumnData, ev: Event) => any |
|
|
79
|
+
| rowContextmenu | 右击行时触发 | undefined | (record: TableData, ev: Event) => any |
|
|
80
|
+
| cellContextmenu | 右击单元格时触发 | undefined | (record: TableData, column: TableColumnData, ev: Event) => any |
|
|
81
|
+
|
|
82
|
+
### Slots
|
|
83
|
+
|
|
84
|
+
| 名称 | 用途 | 公开类型 |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| default | TableColumn 声明式列,或自定义 table 内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
87
|
+
| columns | TableColumn 声明式列 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
88
|
+
| expand-icon | 自定义展开图标 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
89
|
+
| expand-row | 展开行内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
90
|
+
| footer | 表格底部内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
91
|
+
| drag-handle-icon | 拖拽手柄图标 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
92
|
+
| tbody | 自定义 tbody 元素 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
93
|
+
| tr | 自定义 tr 元素 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
94
|
+
| td | 自定义 td 元素 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
95
|
+
| pagination-left | 分页器左侧内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
96
|
+
| pagination-right | 分页器右侧内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
97
|
+
| summary-cell | 总结行单元格 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
98
|
+
| empty | 空态内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
99
|
+
| thead | 自定义 thead 元素 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
100
|
+
| th | 自定义 th 元素 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
101
|
+
|
|
102
|
+
### 实例方法 / 暴露值
|
|
103
|
+
|
|
104
|
+
| 名称 | 公开类型 |
|
|
105
|
+
| --- | --- |
|
|
106
|
+
| selectAll | (checked?: boolean) => void |
|
|
107
|
+
| select | (rowKey: string | number | (string | number)[], checked?: boolean) => void |
|
|
108
|
+
| expandAll | (checked?: boolean) => void |
|
|
109
|
+
| expand | (rowKey: string | number | (string | number)[], checked?: boolean) => void |
|
|
110
|
+
| resetFilters | (dataIndex?: string | string[]) => void |
|
|
111
|
+
| clearFilters | (dataIndex?: string | string[]) => void |
|
|
112
|
+
| resetSorters | () => void |
|
|
113
|
+
| clearSorters | () => void |
|
|
114
|
+
|
|
115
|
+
### 关联类型定义
|
|
116
|
+
|
|
117
|
+
以下摘自本组件族声明,供查阅嵌套配置;运行时和值类型均以根入口可导出项为准。
|
|
118
|
+
|
|
119
|
+
```typescript-reference
|
|
120
|
+
declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
|
|
121
|
+
|
|
122
|
+
type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
|
|
123
|
+
|
|
124
|
+
interface TableData {
|
|
125
|
+
/**
|
|
126
|
+
* @zh 数据行的key
|
|
127
|
+
* @en The key of the data row
|
|
128
|
+
*/
|
|
129
|
+
key?: string | number;
|
|
130
|
+
/**
|
|
131
|
+
* @zh 扩展行内容
|
|
132
|
+
* @en Expand row content
|
|
133
|
+
*/
|
|
134
|
+
expand?: string | RenderFunction;
|
|
135
|
+
/**
|
|
136
|
+
* @zh 子数据
|
|
137
|
+
* @en Sub data
|
|
138
|
+
*/
|
|
139
|
+
children?: TableData[];
|
|
140
|
+
/**
|
|
141
|
+
* @zh 是否禁用行选择器
|
|
142
|
+
* @en Whether to disable the row selector
|
|
143
|
+
*/
|
|
144
|
+
disabled?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* @zh 是否是叶子节点
|
|
147
|
+
* @en Whether it is a leaf node
|
|
148
|
+
* @version 2.13.0
|
|
149
|
+
*/
|
|
150
|
+
isLeaf?: boolean;
|
|
151
|
+
[name: string]: any;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
interface TableDataWithRaw {
|
|
155
|
+
raw: TableData;
|
|
156
|
+
key: string | number;
|
|
157
|
+
disabled?: boolean;
|
|
158
|
+
expand?: string | RenderFunction;
|
|
159
|
+
children?: TableDataWithRaw[];
|
|
160
|
+
isLeaf?: boolean;
|
|
161
|
+
hasSubtree?: boolean;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
interface TableSortable {
|
|
165
|
+
/**
|
|
166
|
+
* @zh 支持的排序方向
|
|
167
|
+
* @en Supported sort direction
|
|
168
|
+
*/
|
|
169
|
+
sortDirections: ('ascend' | 'descend')[];
|
|
170
|
+
/**
|
|
171
|
+
* @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。
|
|
172
|
+
* @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.
|
|
173
|
+
*/
|
|
174
|
+
sorter?: ((a: TableData, b: TableData, extra: {
|
|
175
|
+
dataIndex: string;
|
|
176
|
+
direction: 'ascend' | 'descend';
|
|
177
|
+
}) => number) | boolean;
|
|
178
|
+
/**
|
|
179
|
+
* @zh 排序方向
|
|
180
|
+
* @en Sort direction
|
|
181
|
+
*/
|
|
182
|
+
sortOrder?: 'ascend' | 'descend' | '';
|
|
183
|
+
/**
|
|
184
|
+
* @zh 默认排序方向(非受控模式)
|
|
185
|
+
* @en Default sort direction (uncontrolled mode)
|
|
186
|
+
*/
|
|
187
|
+
defaultSortOrder?: 'ascend' | 'descend' | '';
|
|
188
|
+
/**
|
|
189
|
+
* @zh 多列排序优先级,数字越大越先比较;只在声明优先级的列之间保留多列排序。
|
|
190
|
+
* @en Multi-column sort priority. Higher values are compared first.
|
|
191
|
+
*/
|
|
192
|
+
sortPriority?: number;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
interface TableFilterData {
|
|
196
|
+
/**
|
|
197
|
+
* @zh 筛选数据选项的内容
|
|
198
|
+
* @en Filter the content of the data option
|
|
199
|
+
*/
|
|
200
|
+
text: string | RenderFunction;
|
|
201
|
+
/**
|
|
202
|
+
* @zh 筛选数据选项的值
|
|
203
|
+
* @en Filter the value of the data option
|
|
204
|
+
*/
|
|
205
|
+
value: string;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
interface TableFilterable {
|
|
209
|
+
/**
|
|
210
|
+
* @zh 筛选数据
|
|
211
|
+
* @en Filter data
|
|
212
|
+
*/
|
|
213
|
+
filters?: TableFilterData[];
|
|
214
|
+
/**
|
|
215
|
+
* @zh 筛选函数
|
|
216
|
+
* @en Filter function
|
|
217
|
+
*/
|
|
218
|
+
filter: (filteredValue: string[], record: TableData) => boolean;
|
|
219
|
+
/**
|
|
220
|
+
* @zh 是否支持多选
|
|
221
|
+
* @en Whether to support multiple selection
|
|
222
|
+
*/
|
|
223
|
+
multiple?: boolean;
|
|
224
|
+
/**
|
|
225
|
+
* @zh 筛选项
|
|
226
|
+
* @en Filter value
|
|
227
|
+
*/
|
|
228
|
+
filteredValue?: string[];
|
|
229
|
+
/**
|
|
230
|
+
* @zh 默认筛选项
|
|
231
|
+
* @en Default filter value
|
|
232
|
+
*/
|
|
233
|
+
defaultFilteredValue?: string[];
|
|
234
|
+
/**
|
|
235
|
+
* @zh 筛选框的内容
|
|
236
|
+
* @en The content of filter box
|
|
237
|
+
*/
|
|
238
|
+
renderContent?: (data: {
|
|
239
|
+
filterValue: string[];
|
|
240
|
+
setFilterValue: (filterValue: string[]) => void;
|
|
241
|
+
handleFilterConfirm: (event: Event) => void;
|
|
242
|
+
handleFilterReset: (event: Event) => void;
|
|
243
|
+
}) => VNodeChild;
|
|
244
|
+
/**
|
|
245
|
+
* @zh 筛选按钮的图标
|
|
246
|
+
* @en Filter icon for button
|
|
247
|
+
*/
|
|
248
|
+
icon?: RenderFunction;
|
|
249
|
+
/**
|
|
250
|
+
* @zh 筛选框的弹出框配置
|
|
251
|
+
* @en Pop-up box configuration of filter box
|
|
252
|
+
*/
|
|
253
|
+
triggerProps?: TriggerProps;
|
|
254
|
+
/**
|
|
255
|
+
* @zh 筛选图标是否左对齐
|
|
256
|
+
* @en Whether the filter icon is aligned to the left
|
|
257
|
+
* @version 2.13.0
|
|
258
|
+
*/
|
|
259
|
+
alignLeft?: boolean;
|
|
260
|
+
slotName?: string;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
interface TableColumnData {
|
|
264
|
+
/**
|
|
265
|
+
* @zh 列信息的标识,对应 `TableData` 中的数据
|
|
266
|
+
* @en The identifier of the column information, corresponding to the data in `TableData`
|
|
267
|
+
*/
|
|
268
|
+
dataIndex?: string;
|
|
269
|
+
/**
|
|
270
|
+
* @zh 列标题
|
|
271
|
+
* @en Column header
|
|
272
|
+
*/
|
|
273
|
+
title?: string | RenderFunction;
|
|
274
|
+
/**
|
|
275
|
+
* @zh 列宽度
|
|
276
|
+
* @en Column width
|
|
277
|
+
*/
|
|
278
|
+
width?: number;
|
|
279
|
+
/**
|
|
280
|
+
* @zh 最小列宽
|
|
281
|
+
* @en Minimum column width
|
|
282
|
+
*/
|
|
283
|
+
minWidth?: number;
|
|
284
|
+
/**
|
|
285
|
+
* @zh 对齐方向
|
|
286
|
+
* @en Alignment direction
|
|
287
|
+
*/
|
|
288
|
+
align?: 'left' | 'center' | 'right';
|
|
289
|
+
/**
|
|
290
|
+
* @zh 固定位置
|
|
291
|
+
* @en Fixed position
|
|
292
|
+
*/
|
|
293
|
+
fixed?: 'left' | 'right';
|
|
294
|
+
/**
|
|
295
|
+
* @zh 是否显示省略号
|
|
296
|
+
* @en Whether to show ellipsis
|
|
297
|
+
*/
|
|
298
|
+
ellipsis?: boolean;
|
|
299
|
+
/**
|
|
300
|
+
* @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性
|
|
301
|
+
* @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties
|
|
302
|
+
* @version 2.26.0
|
|
303
|
+
*/
|
|
304
|
+
tooltip?: boolean | Record<string, any>;
|
|
305
|
+
/**
|
|
306
|
+
* @zh 排序相关选项
|
|
307
|
+
* @en Sorting related options
|
|
308
|
+
*/
|
|
309
|
+
sortable?: TableSortable;
|
|
310
|
+
/**
|
|
311
|
+
* @zh 过滤相关选项
|
|
312
|
+
* @en Filter related options
|
|
313
|
+
*/
|
|
314
|
+
filterable?: TableFilterable;
|
|
315
|
+
/**
|
|
316
|
+
* @zh 表头子数据,用于表头分组
|
|
317
|
+
* @en Header sub-data, used for header grouping
|
|
318
|
+
*/
|
|
319
|
+
children?: TableColumnData[];
|
|
320
|
+
/**
|
|
321
|
+
* @zh 自定义单元格类名
|
|
322
|
+
* @en Custom cell class
|
|
323
|
+
* @version 2.36.0
|
|
324
|
+
*/
|
|
325
|
+
cellClass?: ClassName;
|
|
326
|
+
/**
|
|
327
|
+
* @zh 自定义表头单元格类名
|
|
328
|
+
* @en Custom header cell class
|
|
329
|
+
* @version 2.36.0
|
|
330
|
+
*/
|
|
331
|
+
headerCellClass?: ClassName;
|
|
332
|
+
/**
|
|
333
|
+
* @zh 自定义内容单元格类名
|
|
334
|
+
* @en Custom body cell class
|
|
335
|
+
* @version 2.36.0
|
|
336
|
+
*/
|
|
337
|
+
bodyCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
338
|
+
/**
|
|
339
|
+
* @zh 自定义总结栏单元格类名
|
|
340
|
+
* @en Custom body cell class
|
|
341
|
+
* @version 2.36.0
|
|
342
|
+
*/
|
|
343
|
+
summaryCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
344
|
+
/**
|
|
345
|
+
* @zh 自定义单元格样式
|
|
346
|
+
* @en Custom cell style
|
|
347
|
+
* @version 2.11.0
|
|
348
|
+
*/
|
|
349
|
+
cellStyle?: CSSProperties;
|
|
350
|
+
/**
|
|
351
|
+
* @zh 自定义表头单元格样式
|
|
352
|
+
* @en Custom header cell style
|
|
353
|
+
* @version 2.29.0
|
|
354
|
+
*/
|
|
355
|
+
headerCellStyle?: CSSProperties;
|
|
356
|
+
/**
|
|
357
|
+
* @zh 自定义内容单元格样式
|
|
358
|
+
* @en Custom body cell style
|
|
359
|
+
* @version 2.29.0
|
|
360
|
+
*/
|
|
361
|
+
bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
362
|
+
/**
|
|
363
|
+
* @zh 自定义总结栏单元格样式
|
|
364
|
+
* @en Custom summary cell style
|
|
365
|
+
* @version 2.30.0
|
|
366
|
+
*/
|
|
367
|
+
summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
368
|
+
/**
|
|
369
|
+
* @zh 自定义列单元格的渲染
|
|
370
|
+
* @en Customize the rendering of column cells
|
|
371
|
+
*/
|
|
372
|
+
render?: (data: {
|
|
373
|
+
record: TableData;
|
|
374
|
+
column: TableColumnData;
|
|
375
|
+
rowIndex: number;
|
|
376
|
+
}) => VNodeChild;
|
|
377
|
+
/**
|
|
378
|
+
* @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell
|
|
379
|
+
* @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell
|
|
380
|
+
* @version 2.18.0
|
|
381
|
+
*/
|
|
382
|
+
slotName?: string;
|
|
383
|
+
/**
|
|
384
|
+
* @zh 设置当前列的标题的渲染插槽的名字
|
|
385
|
+
* @en Set the name of the render slot for the header of the current column
|
|
386
|
+
* @version 2.23.0
|
|
387
|
+
*/
|
|
388
|
+
titleSlotName?: string;
|
|
389
|
+
slots?: Slots;
|
|
390
|
+
isLastLeftFixed?: boolean;
|
|
391
|
+
isFirstRightFixed?: boolean;
|
|
392
|
+
colSpan?: number;
|
|
393
|
+
rowSpan?: number;
|
|
394
|
+
index?: number;
|
|
395
|
+
parent?: TableColumnData;
|
|
396
|
+
_resizeWidth?: number;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
interface TableBorder {
|
|
400
|
+
/**
|
|
401
|
+
* @zh 是否展示外边框
|
|
402
|
+
* @en TWhether to display the outer border
|
|
403
|
+
*/
|
|
404
|
+
wrapper?: boolean;
|
|
405
|
+
/**
|
|
406
|
+
* @zh 是否展示单元格边框(表头+主体)
|
|
407
|
+
* @en Whether to display the cell border (header + body)
|
|
408
|
+
*/
|
|
409
|
+
cell?: boolean;
|
|
410
|
+
/**
|
|
411
|
+
* @zh 是否展示表头单元格边框
|
|
412
|
+
* @en Whether to display the header cell border
|
|
413
|
+
*/
|
|
414
|
+
headerCell?: boolean;
|
|
415
|
+
/**
|
|
416
|
+
* @zh 是否展示主体单元格边框
|
|
417
|
+
* @en Whether to display the body cell border
|
|
418
|
+
*/
|
|
419
|
+
bodyCell?: boolean;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
interface TableRowSelection {
|
|
423
|
+
/**
|
|
424
|
+
* @zh 行选择器的类型
|
|
425
|
+
* @en The type of row selector
|
|
426
|
+
*/
|
|
427
|
+
type?: 'checkbox' | 'radio';
|
|
428
|
+
/**
|
|
429
|
+
* @zh 已选择的行(受控模式)
|
|
430
|
+
* @en Selected row (controlled mode)
|
|
431
|
+
*/
|
|
432
|
+
selectedRowKeys?: BaseType[];
|
|
433
|
+
/**
|
|
434
|
+
* @zh 默认已选择的行(非受控模式)
|
|
435
|
+
* @en The selected row by default (uncontrolled mode)
|
|
436
|
+
*/
|
|
437
|
+
defaultSelectedRowKeys?: BaseType[];
|
|
438
|
+
/**
|
|
439
|
+
* @zh 是否显示全选选择器
|
|
440
|
+
* @en Whether to show the select all selector
|
|
441
|
+
*/
|
|
442
|
+
showCheckedAll?: boolean;
|
|
443
|
+
/**
|
|
444
|
+
* @zh 列标题
|
|
445
|
+
* @en Column title
|
|
446
|
+
*/
|
|
447
|
+
title?: string;
|
|
448
|
+
/**
|
|
449
|
+
* @zh 列宽度
|
|
450
|
+
* @en Column width
|
|
451
|
+
*/
|
|
452
|
+
width?: number;
|
|
453
|
+
/**
|
|
454
|
+
* @zh 是否固定
|
|
455
|
+
* @en Is it fixed
|
|
456
|
+
*/
|
|
457
|
+
fixed?: boolean;
|
|
458
|
+
/**
|
|
459
|
+
* @zh 是否开启严格选择模式
|
|
460
|
+
* @en Whether to enable strict selection mode
|
|
461
|
+
* @defaultValue true
|
|
462
|
+
* @version 2.29.0
|
|
463
|
+
*/
|
|
464
|
+
checkStrictly?: boolean;
|
|
465
|
+
/**
|
|
466
|
+
* @zh 是否仅展示当前页的 keys(切换分页时清空 keys)
|
|
467
|
+
* @en Whether to display only the keys of the current page (clear keys when switching paging)
|
|
468
|
+
* @version 2.32.0
|
|
469
|
+
*/
|
|
470
|
+
onlyCurrent?: boolean;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
interface TableExpandable {
|
|
474
|
+
/**
|
|
475
|
+
* @zh 显示的展开行(受控模式)
|
|
476
|
+
* @en Displayed Expanded Row (Controlled Mode)
|
|
477
|
+
*/
|
|
478
|
+
expandedRowKeys?: BaseType[];
|
|
479
|
+
/**
|
|
480
|
+
* @zh 默认显示的展开行(非受控模式)
|
|
481
|
+
* @en Expand row displayed by default (Uncontrolled mode)
|
|
482
|
+
*/
|
|
483
|
+
defaultExpandedRowKeys?: BaseType[];
|
|
484
|
+
/**
|
|
485
|
+
* @zh 是否默认展开所有的行
|
|
486
|
+
* @en Whether to expand all rows by default
|
|
487
|
+
*/
|
|
488
|
+
defaultExpandAllRows?: boolean;
|
|
489
|
+
/**
|
|
490
|
+
* @zh 自定义展开行内容
|
|
491
|
+
* @en Customize expanded row content
|
|
492
|
+
*/
|
|
493
|
+
expandedRowRender?: (record: TableData) => VNodeChild;
|
|
494
|
+
/**
|
|
495
|
+
* @zh 展开图标
|
|
496
|
+
* @en Expand icon
|
|
497
|
+
*/
|
|
498
|
+
icon?: (expanded: boolean, record: TableData) => VNodeChild;
|
|
499
|
+
/**
|
|
500
|
+
* @zh 列标题
|
|
501
|
+
* @en Column title
|
|
502
|
+
*/
|
|
503
|
+
title?: string;
|
|
504
|
+
/**
|
|
505
|
+
* @zh 列宽度
|
|
506
|
+
* @en Column width
|
|
507
|
+
*/
|
|
508
|
+
width?: number;
|
|
509
|
+
/**
|
|
510
|
+
* @zh 是否固定
|
|
511
|
+
* @en Is it fixed
|
|
512
|
+
*/
|
|
513
|
+
fixed?: boolean;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
interface TableDraggable {
|
|
517
|
+
/**
|
|
518
|
+
* @zh 拖拽类型
|
|
519
|
+
* @en drag type
|
|
520
|
+
*/
|
|
521
|
+
type?: 'row' | 'handle';
|
|
522
|
+
/**
|
|
523
|
+
* @zh 列标题
|
|
524
|
+
* @en Column title
|
|
525
|
+
*/
|
|
526
|
+
title?: string;
|
|
527
|
+
/**
|
|
528
|
+
* @zh 列宽度
|
|
529
|
+
* @en Column width
|
|
530
|
+
*/
|
|
531
|
+
width?: number;
|
|
532
|
+
/**
|
|
533
|
+
* @zh 是否固定
|
|
534
|
+
* @en Is it fixed
|
|
535
|
+
*/
|
|
536
|
+
fixed?: boolean;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
|
|
540
|
+
|
|
541
|
+
interface TableOperationColumn {
|
|
542
|
+
name: OperationName | string;
|
|
543
|
+
title?: string | RenderFunction;
|
|
544
|
+
width?: number;
|
|
545
|
+
fixed?: boolean;
|
|
546
|
+
render?: (record: TableData) => VNodeChild;
|
|
547
|
+
isLastLeftFixed?: boolean;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
interface TableComponents {
|
|
551
|
+
operations: (operations: {
|
|
552
|
+
dragHandle?: TableOperationColumn;
|
|
553
|
+
expand?: TableOperationColumn;
|
|
554
|
+
selection?: TableOperationColumn;
|
|
555
|
+
}) => TableOperationColumn[];
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
interface TableChangeExtra {
|
|
559
|
+
/**
|
|
560
|
+
* @zh 触发类型
|
|
561
|
+
* @en Trigger type
|
|
562
|
+
*/
|
|
563
|
+
type: 'pagination' | 'sorter' | 'filter' | 'drag';
|
|
564
|
+
/**
|
|
565
|
+
* @zh 页码
|
|
566
|
+
* @en page number
|
|
567
|
+
*/
|
|
568
|
+
page?: number;
|
|
569
|
+
/**
|
|
570
|
+
* @zh 每页数据数
|
|
571
|
+
* @en number per page
|
|
572
|
+
*/
|
|
573
|
+
pageSize?: number;
|
|
574
|
+
/**
|
|
575
|
+
* @zh 排序信息
|
|
576
|
+
* @en Sort information
|
|
577
|
+
*/
|
|
578
|
+
sorter?: Sorter;
|
|
579
|
+
/** 按优先级排列的全部排序条件;sorter 保留首个条件以兼容已有消费方。 */
|
|
580
|
+
sorters?: Sorter[];
|
|
581
|
+
/**
|
|
582
|
+
* @zh 筛选信息
|
|
583
|
+
* @en Filter information
|
|
584
|
+
*/
|
|
585
|
+
filters?: Filters;
|
|
586
|
+
/**
|
|
587
|
+
* @zh 拖拽信息
|
|
588
|
+
* @en Drag and drop information
|
|
589
|
+
*/
|
|
590
|
+
dragTarget?: TableData;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
interface TableInternalProps {
|
|
594
|
+
columns: TableColumnData[];
|
|
595
|
+
data: TableData[];
|
|
596
|
+
bordered?: boolean | TableBorder;
|
|
597
|
+
rowSelection?: TableRowSelection;
|
|
598
|
+
expandable?: TableExpandable;
|
|
599
|
+
pagination?: boolean | Data;
|
|
600
|
+
pagePosition?: string;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
type Sorter = {
|
|
604
|
+
field: string;
|
|
605
|
+
direction: 'ascend' | 'descend';
|
|
606
|
+
};
|
|
607
|
+
|
|
608
|
+
type Filters = Record<string, string[]>;
|
|
609
|
+
|
|
610
|
+
declare const TD_TYPES: readonly ["normal", "operation", "checkbox", "radio", "expand"];
|
|
611
|
+
|
|
612
|
+
type TdTypes = (typeof TD_TYPES)[number];
|
|
613
|
+
|
|
614
|
+
type TableInstance = InstanceType<typeof _Table>;
|
|
615
|
+
|
|
616
|
+
type TableProps = InstanceType<typeof _Table>['$props'];
|
|
617
|
+
|
|
618
|
+
type TheadInstance = InstanceType<typeof _Thead>;
|
|
619
|
+
|
|
620
|
+
type TbodyInstance = InstanceType<typeof _Tbody>;
|
|
621
|
+
|
|
622
|
+
type TrInstance = InstanceType<typeof _Tr>;
|
|
623
|
+
|
|
624
|
+
type ThInstance = InstanceType<typeof _Th>;
|
|
625
|
+
|
|
626
|
+
type TdInstance = InstanceType<typeof _Td>;
|
|
627
|
+
|
|
628
|
+
type TableColumnInstance = InstanceType<typeof _TableColumn>;
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
|
|
632
|
+
## TableColumn API
|
|
633
|
+
|
|
634
|
+
公开声明:`dist/components/table/index.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
635
|
+
|
|
636
|
+
### Props
|
|
637
|
+
|
|
638
|
+
| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
|
|
639
|
+
| --- | --- | --- | --- | --- |
|
|
640
|
+
| dataIndex | 列字段名 | undefined | string | 否 | 未声明 |
|
|
641
|
+
| title | 列标题 | undefined | string | 否 | 未声明 |
|
|
642
|
+
| width | 列宽 | undefined | number | 否 | 未声明 |
|
|
643
|
+
| minWidth | 最小列宽 | undefined | number | 否 | 未声明 |
|
|
644
|
+
| align | 对齐方式 | undefined | "center" | "right" | "left" | 否 | 未声明 |
|
|
645
|
+
| fixed | 固定位置 | undefined | "right" | "left" | 否 | 未声明 |
|
|
646
|
+
| ellipsis | 是否显示省略 | undefined | false | true | 否 | false |
|
|
647
|
+
| sortable | 排序配置 | undefined | TableSortable | 否 | undefined |
|
|
648
|
+
| filterable | 筛选配置 | undefined | TableFilterable | 否 | undefined |
|
|
649
|
+
| cellClass | 单元格 class | undefined | string | { [x: string]: boolean; } | (string | Record<string, boolean>)[] | 否 | 未声明 |
|
|
650
|
+
| headerCellClass | 表头单元格 class | undefined | string | { [x: string]: boolean; } | (string | Record<string, boolean>)[] | 否 | 未声明 |
|
|
651
|
+
| bodyCellClass | 内容单元格 class | undefined | string | { [x: string]: boolean; } | (string | Record<string, boolean>)[] | (record: TableData) => ClassName | 否 | 未声明 |
|
|
652
|
+
| summaryCellClass | 总结单元格 class | undefined | string | { [x: string]: boolean; } | (string | Record<string, boolean>)[] | (record: TableData) => ClassName | 否 | 未声明 |
|
|
653
|
+
| cellStyle | 单元格样式 | undefined | CSSProperties | 否 | 未声明 |
|
|
654
|
+
| headerCellStyle | 表头单元格样式 | undefined | CSSProperties | 否 | 未声明 |
|
|
655
|
+
| bodyCellStyle | 内容单元格样式 | undefined | CSSProperties | (record: TableData) => CSSProperties | 否 | 未声明 |
|
|
656
|
+
| summaryCellStyle | 总结单元格样式 | undefined | CSSProperties | (record: TableData) => CSSProperties | 否 | 未声明 |
|
|
657
|
+
| index | 手动指定列序号,通常无需使用 | undefined | number | 否 | 未声明 |
|
|
658
|
+
| tooltip | 省略时是否显示提示,或 Tooltip 配置 | undefined | false | true | { [x: string]: any; } | 否 | false |
|
|
659
|
+
|
|
660
|
+
### Events
|
|
661
|
+
|
|
662
|
+
未声明组件 emits;原生事件与包装透传按本页用法核实。
|
|
663
|
+
|
|
664
|
+
### Slots
|
|
665
|
+
|
|
666
|
+
| 名称 | 用途 | 公开类型 |
|
|
667
|
+
| --- | --- | --- |
|
|
668
|
+
| cell | 单元格内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
669
|
+
| title | 表头内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
670
|
+
| filter-content | 自定义筛选弹层内容 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
671
|
+
| filter-icon | 自定义筛选图标 | 文档列出的实际插槽;公开类型未细化,作用域见场景用法 |
|
|
672
|
+
|
|
673
|
+
### 实例方法
|
|
674
|
+
|
|
675
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
676
|
+
|
|
677
|
+
### 关联类型定义
|
|
678
|
+
|
|
679
|
+
以下摘自本组件族声明,供查阅嵌套配置;运行时和值类型均以根入口可导出项为准。
|
|
680
|
+
|
|
681
|
+
```typescript-reference
|
|
682
|
+
declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
|
|
683
|
+
|
|
684
|
+
type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
|
|
685
|
+
|
|
686
|
+
interface TableData {
|
|
687
|
+
/**
|
|
688
|
+
* @zh 数据行的key
|
|
689
|
+
* @en The key of the data row
|
|
690
|
+
*/
|
|
691
|
+
key?: string | number;
|
|
692
|
+
/**
|
|
693
|
+
* @zh 扩展行内容
|
|
694
|
+
* @en Expand row content
|
|
695
|
+
*/
|
|
696
|
+
expand?: string | RenderFunction;
|
|
697
|
+
/**
|
|
698
|
+
* @zh 子数据
|
|
699
|
+
* @en Sub data
|
|
700
|
+
*/
|
|
701
|
+
children?: TableData[];
|
|
702
|
+
/**
|
|
703
|
+
* @zh 是否禁用行选择器
|
|
704
|
+
* @en Whether to disable the row selector
|
|
705
|
+
*/
|
|
706
|
+
disabled?: boolean;
|
|
707
|
+
/**
|
|
708
|
+
* @zh 是否是叶子节点
|
|
709
|
+
* @en Whether it is a leaf node
|
|
710
|
+
* @version 2.13.0
|
|
711
|
+
*/
|
|
712
|
+
isLeaf?: boolean;
|
|
713
|
+
[name: string]: any;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
interface TableDataWithRaw {
|
|
717
|
+
raw: TableData;
|
|
718
|
+
key: string | number;
|
|
719
|
+
disabled?: boolean;
|
|
720
|
+
expand?: string | RenderFunction;
|
|
721
|
+
children?: TableDataWithRaw[];
|
|
722
|
+
isLeaf?: boolean;
|
|
723
|
+
hasSubtree?: boolean;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
interface TableSortable {
|
|
727
|
+
/**
|
|
728
|
+
* @zh 支持的排序方向
|
|
729
|
+
* @en Supported sort direction
|
|
730
|
+
*/
|
|
731
|
+
sortDirections: ('ascend' | 'descend')[];
|
|
732
|
+
/**
|
|
733
|
+
* @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。
|
|
734
|
+
* @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.
|
|
735
|
+
*/
|
|
736
|
+
sorter?: ((a: TableData, b: TableData, extra: {
|
|
737
|
+
dataIndex: string;
|
|
738
|
+
direction: 'ascend' | 'descend';
|
|
739
|
+
}) => number) | boolean;
|
|
740
|
+
/**
|
|
741
|
+
* @zh 排序方向
|
|
742
|
+
* @en Sort direction
|
|
743
|
+
*/
|
|
744
|
+
sortOrder?: 'ascend' | 'descend' | '';
|
|
745
|
+
/**
|
|
746
|
+
* @zh 默认排序方向(非受控模式)
|
|
747
|
+
* @en Default sort direction (uncontrolled mode)
|
|
748
|
+
*/
|
|
749
|
+
defaultSortOrder?: 'ascend' | 'descend' | '';
|
|
750
|
+
/**
|
|
751
|
+
* @zh 多列排序优先级,数字越大越先比较;只在声明优先级的列之间保留多列排序。
|
|
752
|
+
* @en Multi-column sort priority. Higher values are compared first.
|
|
753
|
+
*/
|
|
754
|
+
sortPriority?: number;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
interface TableFilterData {
|
|
758
|
+
/**
|
|
759
|
+
* @zh 筛选数据选项的内容
|
|
760
|
+
* @en Filter the content of the data option
|
|
761
|
+
*/
|
|
762
|
+
text: string | RenderFunction;
|
|
763
|
+
/**
|
|
764
|
+
* @zh 筛选数据选项的值
|
|
765
|
+
* @en Filter the value of the data option
|
|
766
|
+
*/
|
|
767
|
+
value: string;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
interface TableFilterable {
|
|
771
|
+
/**
|
|
772
|
+
* @zh 筛选数据
|
|
773
|
+
* @en Filter data
|
|
774
|
+
*/
|
|
775
|
+
filters?: TableFilterData[];
|
|
776
|
+
/**
|
|
777
|
+
* @zh 筛选函数
|
|
778
|
+
* @en Filter function
|
|
779
|
+
*/
|
|
780
|
+
filter: (filteredValue: string[], record: TableData) => boolean;
|
|
781
|
+
/**
|
|
782
|
+
* @zh 是否支持多选
|
|
783
|
+
* @en Whether to support multiple selection
|
|
784
|
+
*/
|
|
785
|
+
multiple?: boolean;
|
|
786
|
+
/**
|
|
787
|
+
* @zh 筛选项
|
|
788
|
+
* @en Filter value
|
|
789
|
+
*/
|
|
790
|
+
filteredValue?: string[];
|
|
791
|
+
/**
|
|
792
|
+
* @zh 默认筛选项
|
|
793
|
+
* @en Default filter value
|
|
794
|
+
*/
|
|
795
|
+
defaultFilteredValue?: string[];
|
|
796
|
+
/**
|
|
797
|
+
* @zh 筛选框的内容
|
|
798
|
+
* @en The content of filter box
|
|
799
|
+
*/
|
|
800
|
+
renderContent?: (data: {
|
|
801
|
+
filterValue: string[];
|
|
802
|
+
setFilterValue: (filterValue: string[]) => void;
|
|
803
|
+
handleFilterConfirm: (event: Event) => void;
|
|
804
|
+
handleFilterReset: (event: Event) => void;
|
|
805
|
+
}) => VNodeChild;
|
|
806
|
+
/**
|
|
807
|
+
* @zh 筛选按钮的图标
|
|
808
|
+
* @en Filter icon for button
|
|
809
|
+
*/
|
|
810
|
+
icon?: RenderFunction;
|
|
811
|
+
/**
|
|
812
|
+
* @zh 筛选框的弹出框配置
|
|
813
|
+
* @en Pop-up box configuration of filter box
|
|
814
|
+
*/
|
|
815
|
+
triggerProps?: TriggerProps;
|
|
816
|
+
/**
|
|
817
|
+
* @zh 筛选图标是否左对齐
|
|
818
|
+
* @en Whether the filter icon is aligned to the left
|
|
819
|
+
* @version 2.13.0
|
|
820
|
+
*/
|
|
821
|
+
alignLeft?: boolean;
|
|
822
|
+
slotName?: string;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
interface TableColumnData {
|
|
826
|
+
/**
|
|
827
|
+
* @zh 列信息的标识,对应 `TableData` 中的数据
|
|
828
|
+
* @en The identifier of the column information, corresponding to the data in `TableData`
|
|
829
|
+
*/
|
|
830
|
+
dataIndex?: string;
|
|
831
|
+
/**
|
|
832
|
+
* @zh 列标题
|
|
833
|
+
* @en Column header
|
|
834
|
+
*/
|
|
835
|
+
title?: string | RenderFunction;
|
|
836
|
+
/**
|
|
837
|
+
* @zh 列宽度
|
|
838
|
+
* @en Column width
|
|
839
|
+
*/
|
|
840
|
+
width?: number;
|
|
841
|
+
/**
|
|
842
|
+
* @zh 最小列宽
|
|
843
|
+
* @en Minimum column width
|
|
844
|
+
*/
|
|
845
|
+
minWidth?: number;
|
|
846
|
+
/**
|
|
847
|
+
* @zh 对齐方向
|
|
848
|
+
* @en Alignment direction
|
|
849
|
+
*/
|
|
850
|
+
align?: 'left' | 'center' | 'right';
|
|
851
|
+
/**
|
|
852
|
+
* @zh 固定位置
|
|
853
|
+
* @en Fixed position
|
|
854
|
+
*/
|
|
855
|
+
fixed?: 'left' | 'right';
|
|
856
|
+
/**
|
|
857
|
+
* @zh 是否显示省略号
|
|
858
|
+
* @en Whether to show ellipsis
|
|
859
|
+
*/
|
|
860
|
+
ellipsis?: boolean;
|
|
861
|
+
/**
|
|
862
|
+
* @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性
|
|
863
|
+
* @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties
|
|
864
|
+
* @version 2.26.0
|
|
865
|
+
*/
|
|
866
|
+
tooltip?: boolean | Record<string, any>;
|
|
867
|
+
/**
|
|
868
|
+
* @zh 排序相关选项
|
|
869
|
+
* @en Sorting related options
|
|
870
|
+
*/
|
|
871
|
+
sortable?: TableSortable;
|
|
872
|
+
/**
|
|
873
|
+
* @zh 过滤相关选项
|
|
874
|
+
* @en Filter related options
|
|
875
|
+
*/
|
|
876
|
+
filterable?: TableFilterable;
|
|
877
|
+
/**
|
|
878
|
+
* @zh 表头子数据,用于表头分组
|
|
879
|
+
* @en Header sub-data, used for header grouping
|
|
880
|
+
*/
|
|
881
|
+
children?: TableColumnData[];
|
|
882
|
+
/**
|
|
883
|
+
* @zh 自定义单元格类名
|
|
884
|
+
* @en Custom cell class
|
|
885
|
+
* @version 2.36.0
|
|
886
|
+
*/
|
|
887
|
+
cellClass?: ClassName;
|
|
888
|
+
/**
|
|
889
|
+
* @zh 自定义表头单元格类名
|
|
890
|
+
* @en Custom header cell class
|
|
891
|
+
* @version 2.36.0
|
|
892
|
+
*/
|
|
893
|
+
headerCellClass?: ClassName;
|
|
894
|
+
/**
|
|
895
|
+
* @zh 自定义内容单元格类名
|
|
896
|
+
* @en Custom body cell class
|
|
897
|
+
* @version 2.36.0
|
|
898
|
+
*/
|
|
899
|
+
bodyCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
900
|
+
/**
|
|
901
|
+
* @zh 自定义总结栏单元格类名
|
|
902
|
+
* @en Custom body cell class
|
|
903
|
+
* @version 2.36.0
|
|
904
|
+
*/
|
|
905
|
+
summaryCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
906
|
+
/**
|
|
907
|
+
* @zh 自定义单元格样式
|
|
908
|
+
* @en Custom cell style
|
|
909
|
+
* @version 2.11.0
|
|
910
|
+
*/
|
|
911
|
+
cellStyle?: CSSProperties;
|
|
912
|
+
/**
|
|
913
|
+
* @zh 自定义表头单元格样式
|
|
914
|
+
* @en Custom header cell style
|
|
915
|
+
* @version 2.29.0
|
|
916
|
+
*/
|
|
917
|
+
headerCellStyle?: CSSProperties;
|
|
918
|
+
/**
|
|
919
|
+
* @zh 自定义内容单元格样式
|
|
920
|
+
* @en Custom body cell style
|
|
921
|
+
* @version 2.29.0
|
|
922
|
+
*/
|
|
923
|
+
bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
924
|
+
/**
|
|
925
|
+
* @zh 自定义总结栏单元格样式
|
|
926
|
+
* @en Custom summary cell style
|
|
927
|
+
* @version 2.30.0
|
|
928
|
+
*/
|
|
929
|
+
summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
930
|
+
/**
|
|
931
|
+
* @zh 自定义列单元格的渲染
|
|
932
|
+
* @en Customize the rendering of column cells
|
|
933
|
+
*/
|
|
934
|
+
render?: (data: {
|
|
935
|
+
record: TableData;
|
|
936
|
+
column: TableColumnData;
|
|
937
|
+
rowIndex: number;
|
|
938
|
+
}) => VNodeChild;
|
|
939
|
+
/**
|
|
940
|
+
* @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell
|
|
941
|
+
* @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell
|
|
942
|
+
* @version 2.18.0
|
|
943
|
+
*/
|
|
944
|
+
slotName?: string;
|
|
945
|
+
/**
|
|
946
|
+
* @zh 设置当前列的标题的渲染插槽的名字
|
|
947
|
+
* @en Set the name of the render slot for the header of the current column
|
|
948
|
+
* @version 2.23.0
|
|
949
|
+
*/
|
|
950
|
+
titleSlotName?: string;
|
|
951
|
+
slots?: Slots;
|
|
952
|
+
isLastLeftFixed?: boolean;
|
|
953
|
+
isFirstRightFixed?: boolean;
|
|
954
|
+
colSpan?: number;
|
|
955
|
+
rowSpan?: number;
|
|
956
|
+
index?: number;
|
|
957
|
+
parent?: TableColumnData;
|
|
958
|
+
_resizeWidth?: number;
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
interface TableBorder {
|
|
962
|
+
/**
|
|
963
|
+
* @zh 是否展示外边框
|
|
964
|
+
* @en TWhether to display the outer border
|
|
965
|
+
*/
|
|
966
|
+
wrapper?: boolean;
|
|
967
|
+
/**
|
|
968
|
+
* @zh 是否展示单元格边框(表头+主体)
|
|
969
|
+
* @en Whether to display the cell border (header + body)
|
|
970
|
+
*/
|
|
971
|
+
cell?: boolean;
|
|
972
|
+
/**
|
|
973
|
+
* @zh 是否展示表头单元格边框
|
|
974
|
+
* @en Whether to display the header cell border
|
|
975
|
+
*/
|
|
976
|
+
headerCell?: boolean;
|
|
977
|
+
/**
|
|
978
|
+
* @zh 是否展示主体单元格边框
|
|
979
|
+
* @en Whether to display the body cell border
|
|
980
|
+
*/
|
|
981
|
+
bodyCell?: boolean;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
interface TableRowSelection {
|
|
985
|
+
/**
|
|
986
|
+
* @zh 行选择器的类型
|
|
987
|
+
* @en The type of row selector
|
|
988
|
+
*/
|
|
989
|
+
type?: 'checkbox' | 'radio';
|
|
990
|
+
/**
|
|
991
|
+
* @zh 已选择的行(受控模式)
|
|
992
|
+
* @en Selected row (controlled mode)
|
|
993
|
+
*/
|
|
994
|
+
selectedRowKeys?: BaseType[];
|
|
995
|
+
/**
|
|
996
|
+
* @zh 默认已选择的行(非受控模式)
|
|
997
|
+
* @en The selected row by default (uncontrolled mode)
|
|
998
|
+
*/
|
|
999
|
+
defaultSelectedRowKeys?: BaseType[];
|
|
1000
|
+
/**
|
|
1001
|
+
* @zh 是否显示全选选择器
|
|
1002
|
+
* @en Whether to show the select all selector
|
|
1003
|
+
*/
|
|
1004
|
+
showCheckedAll?: boolean;
|
|
1005
|
+
/**
|
|
1006
|
+
* @zh 列标题
|
|
1007
|
+
* @en Column title
|
|
1008
|
+
*/
|
|
1009
|
+
title?: string;
|
|
1010
|
+
/**
|
|
1011
|
+
* @zh 列宽度
|
|
1012
|
+
* @en Column width
|
|
1013
|
+
*/
|
|
1014
|
+
width?: number;
|
|
1015
|
+
/**
|
|
1016
|
+
* @zh 是否固定
|
|
1017
|
+
* @en Is it fixed
|
|
1018
|
+
*/
|
|
1019
|
+
fixed?: boolean;
|
|
1020
|
+
/**
|
|
1021
|
+
* @zh 是否开启严格选择模式
|
|
1022
|
+
* @en Whether to enable strict selection mode
|
|
1023
|
+
* @defaultValue true
|
|
1024
|
+
* @version 2.29.0
|
|
1025
|
+
*/
|
|
1026
|
+
checkStrictly?: boolean;
|
|
1027
|
+
/**
|
|
1028
|
+
* @zh 是否仅展示当前页的 keys(切换分页时清空 keys)
|
|
1029
|
+
* @en Whether to display only the keys of the current page (clear keys when switching paging)
|
|
1030
|
+
* @version 2.32.0
|
|
1031
|
+
*/
|
|
1032
|
+
onlyCurrent?: boolean;
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
interface TableExpandable {
|
|
1036
|
+
/**
|
|
1037
|
+
* @zh 显示的展开行(受控模式)
|
|
1038
|
+
* @en Displayed Expanded Row (Controlled Mode)
|
|
1039
|
+
*/
|
|
1040
|
+
expandedRowKeys?: BaseType[];
|
|
1041
|
+
/**
|
|
1042
|
+
* @zh 默认显示的展开行(非受控模式)
|
|
1043
|
+
* @en Expand row displayed by default (Uncontrolled mode)
|
|
1044
|
+
*/
|
|
1045
|
+
defaultExpandedRowKeys?: BaseType[];
|
|
1046
|
+
/**
|
|
1047
|
+
* @zh 是否默认展开所有的行
|
|
1048
|
+
* @en Whether to expand all rows by default
|
|
1049
|
+
*/
|
|
1050
|
+
defaultExpandAllRows?: boolean;
|
|
1051
|
+
/**
|
|
1052
|
+
* @zh 自定义展开行内容
|
|
1053
|
+
* @en Customize expanded row content
|
|
1054
|
+
*/
|
|
1055
|
+
expandedRowRender?: (record: TableData) => VNodeChild;
|
|
1056
|
+
/**
|
|
1057
|
+
* @zh 展开图标
|
|
1058
|
+
* @en Expand icon
|
|
1059
|
+
*/
|
|
1060
|
+
icon?: (expanded: boolean, record: TableData) => VNodeChild;
|
|
1061
|
+
/**
|
|
1062
|
+
* @zh 列标题
|
|
1063
|
+
* @en Column title
|
|
1064
|
+
*/
|
|
1065
|
+
title?: string;
|
|
1066
|
+
/**
|
|
1067
|
+
* @zh 列宽度
|
|
1068
|
+
* @en Column width
|
|
1069
|
+
*/
|
|
1070
|
+
width?: number;
|
|
1071
|
+
/**
|
|
1072
|
+
* @zh 是否固定
|
|
1073
|
+
* @en Is it fixed
|
|
1074
|
+
*/
|
|
1075
|
+
fixed?: boolean;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
interface TableDraggable {
|
|
1079
|
+
/**
|
|
1080
|
+
* @zh 拖拽类型
|
|
1081
|
+
* @en drag type
|
|
1082
|
+
*/
|
|
1083
|
+
type?: 'row' | 'handle';
|
|
1084
|
+
/**
|
|
1085
|
+
* @zh 列标题
|
|
1086
|
+
* @en Column title
|
|
1087
|
+
*/
|
|
1088
|
+
title?: string;
|
|
1089
|
+
/**
|
|
1090
|
+
* @zh 列宽度
|
|
1091
|
+
* @en Column width
|
|
1092
|
+
*/
|
|
1093
|
+
width?: number;
|
|
1094
|
+
/**
|
|
1095
|
+
* @zh 是否固定
|
|
1096
|
+
* @en Is it fixed
|
|
1097
|
+
*/
|
|
1098
|
+
fixed?: boolean;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
|
|
1102
|
+
|
|
1103
|
+
interface TableOperationColumn {
|
|
1104
|
+
name: OperationName | string;
|
|
1105
|
+
title?: string | RenderFunction;
|
|
1106
|
+
width?: number;
|
|
1107
|
+
fixed?: boolean;
|
|
1108
|
+
render?: (record: TableData) => VNodeChild;
|
|
1109
|
+
isLastLeftFixed?: boolean;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
interface TableComponents {
|
|
1113
|
+
operations: (operations: {
|
|
1114
|
+
dragHandle?: TableOperationColumn;
|
|
1115
|
+
expand?: TableOperationColumn;
|
|
1116
|
+
selection?: TableOperationColumn;
|
|
1117
|
+
}) => TableOperationColumn[];
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
interface TableChangeExtra {
|
|
1121
|
+
/**
|
|
1122
|
+
* @zh 触发类型
|
|
1123
|
+
* @en Trigger type
|
|
1124
|
+
*/
|
|
1125
|
+
type: 'pagination' | 'sorter' | 'filter' | 'drag';
|
|
1126
|
+
/**
|
|
1127
|
+
* @zh 页码
|
|
1128
|
+
* @en page number
|
|
1129
|
+
*/
|
|
1130
|
+
page?: number;
|
|
1131
|
+
/**
|
|
1132
|
+
* @zh 每页数据数
|
|
1133
|
+
* @en number per page
|
|
1134
|
+
*/
|
|
1135
|
+
pageSize?: number;
|
|
1136
|
+
/**
|
|
1137
|
+
* @zh 排序信息
|
|
1138
|
+
* @en Sort information
|
|
1139
|
+
*/
|
|
1140
|
+
sorter?: Sorter;
|
|
1141
|
+
/** 按优先级排列的全部排序条件;sorter 保留首个条件以兼容已有消费方。 */
|
|
1142
|
+
sorters?: Sorter[];
|
|
1143
|
+
/**
|
|
1144
|
+
* @zh 筛选信息
|
|
1145
|
+
* @en Filter information
|
|
1146
|
+
*/
|
|
1147
|
+
filters?: Filters;
|
|
1148
|
+
/**
|
|
1149
|
+
* @zh 拖拽信息
|
|
1150
|
+
* @en Drag and drop information
|
|
1151
|
+
*/
|
|
1152
|
+
dragTarget?: TableData;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
interface TableInternalProps {
|
|
1156
|
+
columns: TableColumnData[];
|
|
1157
|
+
data: TableData[];
|
|
1158
|
+
bordered?: boolean | TableBorder;
|
|
1159
|
+
rowSelection?: TableRowSelection;
|
|
1160
|
+
expandable?: TableExpandable;
|
|
1161
|
+
pagination?: boolean | Data;
|
|
1162
|
+
pagePosition?: string;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
type Sorter = {
|
|
1166
|
+
field: string;
|
|
1167
|
+
direction: 'ascend' | 'descend';
|
|
1168
|
+
};
|
|
1169
|
+
|
|
1170
|
+
type Filters = Record<string, string[]>;
|
|
1171
|
+
|
|
1172
|
+
declare const TD_TYPES: readonly ["normal", "operation", "checkbox", "radio", "expand"];
|
|
1173
|
+
|
|
1174
|
+
type TdTypes = (typeof TD_TYPES)[number];
|
|
1175
|
+
|
|
1176
|
+
type TableInstance = InstanceType<typeof _Table>;
|
|
1177
|
+
|
|
1178
|
+
type TableProps = InstanceType<typeof _Table>['$props'];
|
|
1179
|
+
|
|
1180
|
+
type TheadInstance = InstanceType<typeof _Thead>;
|
|
1181
|
+
|
|
1182
|
+
type TbodyInstance = InstanceType<typeof _Tbody>;
|
|
1183
|
+
|
|
1184
|
+
type TrInstance = InstanceType<typeof _Tr>;
|
|
1185
|
+
|
|
1186
|
+
type ThInstance = InstanceType<typeof _Th>;
|
|
1187
|
+
|
|
1188
|
+
type TdInstance = InstanceType<typeof _Td>;
|
|
1189
|
+
|
|
1190
|
+
type TableColumnInstance = InstanceType<typeof _TableColumn>;
|
|
1191
|
+
```
|
|
1192
|
+
|
|
1193
|
+
|
|
1194
|
+
## Tbody API
|
|
1195
|
+
|
|
1196
|
+
公开声明:`dist/components/table/table-tbody.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
1197
|
+
|
|
1198
|
+
### Props
|
|
1199
|
+
|
|
1200
|
+
未声明自身 props;包装透传能力见本页用法。
|
|
1201
|
+
|
|
1202
|
+
### Events
|
|
1203
|
+
|
|
1204
|
+
未声明组件 emits;原生事件与包装透传按本页用法核实。
|
|
1205
|
+
|
|
1206
|
+
### Slots
|
|
1207
|
+
|
|
1208
|
+
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
1209
|
+
|
|
1210
|
+
### 实例方法
|
|
1211
|
+
|
|
1212
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
1213
|
+
|
|
1214
|
+
|
|
1215
|
+
## Td API
|
|
1216
|
+
|
|
1217
|
+
公开声明:`dist/components/table/table-td.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
1218
|
+
|
|
1219
|
+
### Props
|
|
1220
|
+
|
|
1221
|
+
| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
|
|
1222
|
+
| --- | --- | --- | --- | --- |
|
|
1223
|
+
| tabindex | 见场景用法与类型 | undefined | string | number | 否 | 未声明 |
|
|
1224
|
+
| onClick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1225
|
+
| onDblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1226
|
+
| onContextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1227
|
+
| onMouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1228
|
+
| onMouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1229
|
+
| onDragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1230
|
+
| onDragend | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1231
|
+
| onDragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1232
|
+
| onDragover | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1233
|
+
| onDrop | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1234
|
+
| onKeydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void | 否 | 未声明 |
|
|
1235
|
+
| onFocus | 见场景用法与类型 | undefined | (event: FocusEvent) => void | 否 | 未声明 |
|
|
1236
|
+
| onPointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1237
|
+
| onPointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1238
|
+
| onPointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1239
|
+
| onPointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1240
|
+
| rowIndex | 见场景用法与类型 | undefined | number | 否 | 未声明 |
|
|
1241
|
+
| record | 见场景用法与类型 | undefined | TableDataWithRaw | 否 | {} |
|
|
1242
|
+
| column | 见场景用法与类型 | undefined | TableColumnData | 否 | {} |
|
|
1243
|
+
| type | 见场景用法与类型 | undefined | "normal" | "radio" | "expand" | "checkbox" | "operation" | 否 | "normal" |
|
|
1244
|
+
| operations | 见场景用法与类型 | undefined | TableOperationColumn[] | 否 | [] |
|
|
1245
|
+
| dataColumns | 见场景用法与类型 | undefined | TableColumnData[] | 否 | [] |
|
|
1246
|
+
| colSpan | 见场景用法与类型 | undefined | number | 否 | 1 |
|
|
1247
|
+
| rowSpan | 见场景用法与类型 | undefined | number | 否 | 1 |
|
|
1248
|
+
| isFixedExpand | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
1249
|
+
| containerWidth | 见场景用法与类型 | undefined | number | 否 | 未声明 |
|
|
1250
|
+
| showExpandBtn | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
1251
|
+
| indentSize | 见场景用法与类型 | undefined | number | 否 | 0 |
|
|
1252
|
+
| renderExpandBtn | 见场景用法与类型 | undefined | (record: TableDataWithRaw, stopPropagation?: boolean, loading?: boolean) => VNode | 否 | 未声明 |
|
|
1253
|
+
| summary | 见场景用法与类型 | undefined | false | true | 否 | false |
|
|
1254
|
+
|
|
1255
|
+
### Events
|
|
1256
|
+
|
|
1257
|
+
| 事件 | 用途 | 监听器签名(即事件参数) |
|
|
1258
|
+
| --- | --- | --- |
|
|
1259
|
+
| click | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1260
|
+
| focus | 见场景用法与类型 | undefined | (event: FocusEvent) => void |
|
|
1261
|
+
| keydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void |
|
|
1262
|
+
| dblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1263
|
+
| contextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1264
|
+
| mouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1265
|
+
| mouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1266
|
+
| dragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1267
|
+
| dragend | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1268
|
+
| dragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1269
|
+
| dragover | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1270
|
+
| drop | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1271
|
+
| pointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1272
|
+
| pointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1273
|
+
| pointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1274
|
+
| pointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1275
|
+
|
|
1276
|
+
### Slots
|
|
1277
|
+
|
|
1278
|
+
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
1279
|
+
|
|
1280
|
+
### 实例方法
|
|
1281
|
+
|
|
1282
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
1283
|
+
|
|
1284
|
+
### 关联类型定义
|
|
1285
|
+
|
|
1286
|
+
以下摘自本组件族声明,供查阅嵌套配置;运行时和值类型均以根入口可导出项为准。
|
|
1287
|
+
|
|
1288
|
+
```typescript-reference
|
|
1289
|
+
declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
|
|
1290
|
+
|
|
1291
|
+
type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
|
|
1292
|
+
|
|
1293
|
+
interface TableData {
|
|
1294
|
+
/**
|
|
1295
|
+
* @zh 数据行的key
|
|
1296
|
+
* @en The key of the data row
|
|
1297
|
+
*/
|
|
1298
|
+
key?: string | number;
|
|
1299
|
+
/**
|
|
1300
|
+
* @zh 扩展行内容
|
|
1301
|
+
* @en Expand row content
|
|
1302
|
+
*/
|
|
1303
|
+
expand?: string | RenderFunction;
|
|
1304
|
+
/**
|
|
1305
|
+
* @zh 子数据
|
|
1306
|
+
* @en Sub data
|
|
1307
|
+
*/
|
|
1308
|
+
children?: TableData[];
|
|
1309
|
+
/**
|
|
1310
|
+
* @zh 是否禁用行选择器
|
|
1311
|
+
* @en Whether to disable the row selector
|
|
1312
|
+
*/
|
|
1313
|
+
disabled?: boolean;
|
|
1314
|
+
/**
|
|
1315
|
+
* @zh 是否是叶子节点
|
|
1316
|
+
* @en Whether it is a leaf node
|
|
1317
|
+
* @version 2.13.0
|
|
1318
|
+
*/
|
|
1319
|
+
isLeaf?: boolean;
|
|
1320
|
+
[name: string]: any;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
interface TableDataWithRaw {
|
|
1324
|
+
raw: TableData;
|
|
1325
|
+
key: string | number;
|
|
1326
|
+
disabled?: boolean;
|
|
1327
|
+
expand?: string | RenderFunction;
|
|
1328
|
+
children?: TableDataWithRaw[];
|
|
1329
|
+
isLeaf?: boolean;
|
|
1330
|
+
hasSubtree?: boolean;
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
interface TableSortable {
|
|
1334
|
+
/**
|
|
1335
|
+
* @zh 支持的排序方向
|
|
1336
|
+
* @en Supported sort direction
|
|
1337
|
+
*/
|
|
1338
|
+
sortDirections: ('ascend' | 'descend')[];
|
|
1339
|
+
/**
|
|
1340
|
+
* @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。
|
|
1341
|
+
* @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.
|
|
1342
|
+
*/
|
|
1343
|
+
sorter?: ((a: TableData, b: TableData, extra: {
|
|
1344
|
+
dataIndex: string;
|
|
1345
|
+
direction: 'ascend' | 'descend';
|
|
1346
|
+
}) => number) | boolean;
|
|
1347
|
+
/**
|
|
1348
|
+
* @zh 排序方向
|
|
1349
|
+
* @en Sort direction
|
|
1350
|
+
*/
|
|
1351
|
+
sortOrder?: 'ascend' | 'descend' | '';
|
|
1352
|
+
/**
|
|
1353
|
+
* @zh 默认排序方向(非受控模式)
|
|
1354
|
+
* @en Default sort direction (uncontrolled mode)
|
|
1355
|
+
*/
|
|
1356
|
+
defaultSortOrder?: 'ascend' | 'descend' | '';
|
|
1357
|
+
/**
|
|
1358
|
+
* @zh 多列排序优先级,数字越大越先比较;只在声明优先级的列之间保留多列排序。
|
|
1359
|
+
* @en Multi-column sort priority. Higher values are compared first.
|
|
1360
|
+
*/
|
|
1361
|
+
sortPriority?: number;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
interface TableFilterData {
|
|
1365
|
+
/**
|
|
1366
|
+
* @zh 筛选数据选项的内容
|
|
1367
|
+
* @en Filter the content of the data option
|
|
1368
|
+
*/
|
|
1369
|
+
text: string | RenderFunction;
|
|
1370
|
+
/**
|
|
1371
|
+
* @zh 筛选数据选项的值
|
|
1372
|
+
* @en Filter the value of the data option
|
|
1373
|
+
*/
|
|
1374
|
+
value: string;
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
interface TableFilterable {
|
|
1378
|
+
/**
|
|
1379
|
+
* @zh 筛选数据
|
|
1380
|
+
* @en Filter data
|
|
1381
|
+
*/
|
|
1382
|
+
filters?: TableFilterData[];
|
|
1383
|
+
/**
|
|
1384
|
+
* @zh 筛选函数
|
|
1385
|
+
* @en Filter function
|
|
1386
|
+
*/
|
|
1387
|
+
filter: (filteredValue: string[], record: TableData) => boolean;
|
|
1388
|
+
/**
|
|
1389
|
+
* @zh 是否支持多选
|
|
1390
|
+
* @en Whether to support multiple selection
|
|
1391
|
+
*/
|
|
1392
|
+
multiple?: boolean;
|
|
1393
|
+
/**
|
|
1394
|
+
* @zh 筛选项
|
|
1395
|
+
* @en Filter value
|
|
1396
|
+
*/
|
|
1397
|
+
filteredValue?: string[];
|
|
1398
|
+
/**
|
|
1399
|
+
* @zh 默认筛选项
|
|
1400
|
+
* @en Default filter value
|
|
1401
|
+
*/
|
|
1402
|
+
defaultFilteredValue?: string[];
|
|
1403
|
+
/**
|
|
1404
|
+
* @zh 筛选框的内容
|
|
1405
|
+
* @en The content of filter box
|
|
1406
|
+
*/
|
|
1407
|
+
renderContent?: (data: {
|
|
1408
|
+
filterValue: string[];
|
|
1409
|
+
setFilterValue: (filterValue: string[]) => void;
|
|
1410
|
+
handleFilterConfirm: (event: Event) => void;
|
|
1411
|
+
handleFilterReset: (event: Event) => void;
|
|
1412
|
+
}) => VNodeChild;
|
|
1413
|
+
/**
|
|
1414
|
+
* @zh 筛选按钮的图标
|
|
1415
|
+
* @en Filter icon for button
|
|
1416
|
+
*/
|
|
1417
|
+
icon?: RenderFunction;
|
|
1418
|
+
/**
|
|
1419
|
+
* @zh 筛选框的弹出框配置
|
|
1420
|
+
* @en Pop-up box configuration of filter box
|
|
1421
|
+
*/
|
|
1422
|
+
triggerProps?: TriggerProps;
|
|
1423
|
+
/**
|
|
1424
|
+
* @zh 筛选图标是否左对齐
|
|
1425
|
+
* @en Whether the filter icon is aligned to the left
|
|
1426
|
+
* @version 2.13.0
|
|
1427
|
+
*/
|
|
1428
|
+
alignLeft?: boolean;
|
|
1429
|
+
slotName?: string;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
interface TableColumnData {
|
|
1433
|
+
/**
|
|
1434
|
+
* @zh 列信息的标识,对应 `TableData` 中的数据
|
|
1435
|
+
* @en The identifier of the column information, corresponding to the data in `TableData`
|
|
1436
|
+
*/
|
|
1437
|
+
dataIndex?: string;
|
|
1438
|
+
/**
|
|
1439
|
+
* @zh 列标题
|
|
1440
|
+
* @en Column header
|
|
1441
|
+
*/
|
|
1442
|
+
title?: string | RenderFunction;
|
|
1443
|
+
/**
|
|
1444
|
+
* @zh 列宽度
|
|
1445
|
+
* @en Column width
|
|
1446
|
+
*/
|
|
1447
|
+
width?: number;
|
|
1448
|
+
/**
|
|
1449
|
+
* @zh 最小列宽
|
|
1450
|
+
* @en Minimum column width
|
|
1451
|
+
*/
|
|
1452
|
+
minWidth?: number;
|
|
1453
|
+
/**
|
|
1454
|
+
* @zh 对齐方向
|
|
1455
|
+
* @en Alignment direction
|
|
1456
|
+
*/
|
|
1457
|
+
align?: 'left' | 'center' | 'right';
|
|
1458
|
+
/**
|
|
1459
|
+
* @zh 固定位置
|
|
1460
|
+
* @en Fixed position
|
|
1461
|
+
*/
|
|
1462
|
+
fixed?: 'left' | 'right';
|
|
1463
|
+
/**
|
|
1464
|
+
* @zh 是否显示省略号
|
|
1465
|
+
* @en Whether to show ellipsis
|
|
1466
|
+
*/
|
|
1467
|
+
ellipsis?: boolean;
|
|
1468
|
+
/**
|
|
1469
|
+
* @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性
|
|
1470
|
+
* @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties
|
|
1471
|
+
* @version 2.26.0
|
|
1472
|
+
*/
|
|
1473
|
+
tooltip?: boolean | Record<string, any>;
|
|
1474
|
+
/**
|
|
1475
|
+
* @zh 排序相关选项
|
|
1476
|
+
* @en Sorting related options
|
|
1477
|
+
*/
|
|
1478
|
+
sortable?: TableSortable;
|
|
1479
|
+
/**
|
|
1480
|
+
* @zh 过滤相关选项
|
|
1481
|
+
* @en Filter related options
|
|
1482
|
+
*/
|
|
1483
|
+
filterable?: TableFilterable;
|
|
1484
|
+
/**
|
|
1485
|
+
* @zh 表头子数据,用于表头分组
|
|
1486
|
+
* @en Header sub-data, used for header grouping
|
|
1487
|
+
*/
|
|
1488
|
+
children?: TableColumnData[];
|
|
1489
|
+
/**
|
|
1490
|
+
* @zh 自定义单元格类名
|
|
1491
|
+
* @en Custom cell class
|
|
1492
|
+
* @version 2.36.0
|
|
1493
|
+
*/
|
|
1494
|
+
cellClass?: ClassName;
|
|
1495
|
+
/**
|
|
1496
|
+
* @zh 自定义表头单元格类名
|
|
1497
|
+
* @en Custom header cell class
|
|
1498
|
+
* @version 2.36.0
|
|
1499
|
+
*/
|
|
1500
|
+
headerCellClass?: ClassName;
|
|
1501
|
+
/**
|
|
1502
|
+
* @zh 自定义内容单元格类名
|
|
1503
|
+
* @en Custom body cell class
|
|
1504
|
+
* @version 2.36.0
|
|
1505
|
+
*/
|
|
1506
|
+
bodyCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
1507
|
+
/**
|
|
1508
|
+
* @zh 自定义总结栏单元格类名
|
|
1509
|
+
* @en Custom body cell class
|
|
1510
|
+
* @version 2.36.0
|
|
1511
|
+
*/
|
|
1512
|
+
summaryCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
1513
|
+
/**
|
|
1514
|
+
* @zh 自定义单元格样式
|
|
1515
|
+
* @en Custom cell style
|
|
1516
|
+
* @version 2.11.0
|
|
1517
|
+
*/
|
|
1518
|
+
cellStyle?: CSSProperties;
|
|
1519
|
+
/**
|
|
1520
|
+
* @zh 自定义表头单元格样式
|
|
1521
|
+
* @en Custom header cell style
|
|
1522
|
+
* @version 2.29.0
|
|
1523
|
+
*/
|
|
1524
|
+
headerCellStyle?: CSSProperties;
|
|
1525
|
+
/**
|
|
1526
|
+
* @zh 自定义内容单元格样式
|
|
1527
|
+
* @en Custom body cell style
|
|
1528
|
+
* @version 2.29.0
|
|
1529
|
+
*/
|
|
1530
|
+
bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
1531
|
+
/**
|
|
1532
|
+
* @zh 自定义总结栏单元格样式
|
|
1533
|
+
* @en Custom summary cell style
|
|
1534
|
+
* @version 2.30.0
|
|
1535
|
+
*/
|
|
1536
|
+
summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
1537
|
+
/**
|
|
1538
|
+
* @zh 自定义列单元格的渲染
|
|
1539
|
+
* @en Customize the rendering of column cells
|
|
1540
|
+
*/
|
|
1541
|
+
render?: (data: {
|
|
1542
|
+
record: TableData;
|
|
1543
|
+
column: TableColumnData;
|
|
1544
|
+
rowIndex: number;
|
|
1545
|
+
}) => VNodeChild;
|
|
1546
|
+
/**
|
|
1547
|
+
* @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell
|
|
1548
|
+
* @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell
|
|
1549
|
+
* @version 2.18.0
|
|
1550
|
+
*/
|
|
1551
|
+
slotName?: string;
|
|
1552
|
+
/**
|
|
1553
|
+
* @zh 设置当前列的标题的渲染插槽的名字
|
|
1554
|
+
* @en Set the name of the render slot for the header of the current column
|
|
1555
|
+
* @version 2.23.0
|
|
1556
|
+
*/
|
|
1557
|
+
titleSlotName?: string;
|
|
1558
|
+
slots?: Slots;
|
|
1559
|
+
isLastLeftFixed?: boolean;
|
|
1560
|
+
isFirstRightFixed?: boolean;
|
|
1561
|
+
colSpan?: number;
|
|
1562
|
+
rowSpan?: number;
|
|
1563
|
+
index?: number;
|
|
1564
|
+
parent?: TableColumnData;
|
|
1565
|
+
_resizeWidth?: number;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
interface TableBorder {
|
|
1569
|
+
/**
|
|
1570
|
+
* @zh 是否展示外边框
|
|
1571
|
+
* @en TWhether to display the outer border
|
|
1572
|
+
*/
|
|
1573
|
+
wrapper?: boolean;
|
|
1574
|
+
/**
|
|
1575
|
+
* @zh 是否展示单元格边框(表头+主体)
|
|
1576
|
+
* @en Whether to display the cell border (header + body)
|
|
1577
|
+
*/
|
|
1578
|
+
cell?: boolean;
|
|
1579
|
+
/**
|
|
1580
|
+
* @zh 是否展示表头单元格边框
|
|
1581
|
+
* @en Whether to display the header cell border
|
|
1582
|
+
*/
|
|
1583
|
+
headerCell?: boolean;
|
|
1584
|
+
/**
|
|
1585
|
+
* @zh 是否展示主体单元格边框
|
|
1586
|
+
* @en Whether to display the body cell border
|
|
1587
|
+
*/
|
|
1588
|
+
bodyCell?: boolean;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
interface TableRowSelection {
|
|
1592
|
+
/**
|
|
1593
|
+
* @zh 行选择器的类型
|
|
1594
|
+
* @en The type of row selector
|
|
1595
|
+
*/
|
|
1596
|
+
type?: 'checkbox' | 'radio';
|
|
1597
|
+
/**
|
|
1598
|
+
* @zh 已选择的行(受控模式)
|
|
1599
|
+
* @en Selected row (controlled mode)
|
|
1600
|
+
*/
|
|
1601
|
+
selectedRowKeys?: BaseType[];
|
|
1602
|
+
/**
|
|
1603
|
+
* @zh 默认已选择的行(非受控模式)
|
|
1604
|
+
* @en The selected row by default (uncontrolled mode)
|
|
1605
|
+
*/
|
|
1606
|
+
defaultSelectedRowKeys?: BaseType[];
|
|
1607
|
+
/**
|
|
1608
|
+
* @zh 是否显示全选选择器
|
|
1609
|
+
* @en Whether to show the select all selector
|
|
1610
|
+
*/
|
|
1611
|
+
showCheckedAll?: boolean;
|
|
1612
|
+
/**
|
|
1613
|
+
* @zh 列标题
|
|
1614
|
+
* @en Column title
|
|
1615
|
+
*/
|
|
1616
|
+
title?: string;
|
|
1617
|
+
/**
|
|
1618
|
+
* @zh 列宽度
|
|
1619
|
+
* @en Column width
|
|
1620
|
+
*/
|
|
1621
|
+
width?: number;
|
|
1622
|
+
/**
|
|
1623
|
+
* @zh 是否固定
|
|
1624
|
+
* @en Is it fixed
|
|
1625
|
+
*/
|
|
1626
|
+
fixed?: boolean;
|
|
1627
|
+
/**
|
|
1628
|
+
* @zh 是否开启严格选择模式
|
|
1629
|
+
* @en Whether to enable strict selection mode
|
|
1630
|
+
* @defaultValue true
|
|
1631
|
+
* @version 2.29.0
|
|
1632
|
+
*/
|
|
1633
|
+
checkStrictly?: boolean;
|
|
1634
|
+
/**
|
|
1635
|
+
* @zh 是否仅展示当前页的 keys(切换分页时清空 keys)
|
|
1636
|
+
* @en Whether to display only the keys of the current page (clear keys when switching paging)
|
|
1637
|
+
* @version 2.32.0
|
|
1638
|
+
*/
|
|
1639
|
+
onlyCurrent?: boolean;
|
|
1640
|
+
}
|
|
1641
|
+
|
|
1642
|
+
interface TableExpandable {
|
|
1643
|
+
/**
|
|
1644
|
+
* @zh 显示的展开行(受控模式)
|
|
1645
|
+
* @en Displayed Expanded Row (Controlled Mode)
|
|
1646
|
+
*/
|
|
1647
|
+
expandedRowKeys?: BaseType[];
|
|
1648
|
+
/**
|
|
1649
|
+
* @zh 默认显示的展开行(非受控模式)
|
|
1650
|
+
* @en Expand row displayed by default (Uncontrolled mode)
|
|
1651
|
+
*/
|
|
1652
|
+
defaultExpandedRowKeys?: BaseType[];
|
|
1653
|
+
/**
|
|
1654
|
+
* @zh 是否默认展开所有的行
|
|
1655
|
+
* @en Whether to expand all rows by default
|
|
1656
|
+
*/
|
|
1657
|
+
defaultExpandAllRows?: boolean;
|
|
1658
|
+
/**
|
|
1659
|
+
* @zh 自定义展开行内容
|
|
1660
|
+
* @en Customize expanded row content
|
|
1661
|
+
*/
|
|
1662
|
+
expandedRowRender?: (record: TableData) => VNodeChild;
|
|
1663
|
+
/**
|
|
1664
|
+
* @zh 展开图标
|
|
1665
|
+
* @en Expand icon
|
|
1666
|
+
*/
|
|
1667
|
+
icon?: (expanded: boolean, record: TableData) => VNodeChild;
|
|
1668
|
+
/**
|
|
1669
|
+
* @zh 列标题
|
|
1670
|
+
* @en Column title
|
|
1671
|
+
*/
|
|
1672
|
+
title?: string;
|
|
1673
|
+
/**
|
|
1674
|
+
* @zh 列宽度
|
|
1675
|
+
* @en Column width
|
|
1676
|
+
*/
|
|
1677
|
+
width?: number;
|
|
1678
|
+
/**
|
|
1679
|
+
* @zh 是否固定
|
|
1680
|
+
* @en Is it fixed
|
|
1681
|
+
*/
|
|
1682
|
+
fixed?: boolean;
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
interface TableDraggable {
|
|
1686
|
+
/**
|
|
1687
|
+
* @zh 拖拽类型
|
|
1688
|
+
* @en drag type
|
|
1689
|
+
*/
|
|
1690
|
+
type?: 'row' | 'handle';
|
|
1691
|
+
/**
|
|
1692
|
+
* @zh 列标题
|
|
1693
|
+
* @en Column title
|
|
1694
|
+
*/
|
|
1695
|
+
title?: string;
|
|
1696
|
+
/**
|
|
1697
|
+
* @zh 列宽度
|
|
1698
|
+
* @en Column width
|
|
1699
|
+
*/
|
|
1700
|
+
width?: number;
|
|
1701
|
+
/**
|
|
1702
|
+
* @zh 是否固定
|
|
1703
|
+
* @en Is it fixed
|
|
1704
|
+
*/
|
|
1705
|
+
fixed?: boolean;
|
|
1706
|
+
}
|
|
1707
|
+
|
|
1708
|
+
type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
|
|
1709
|
+
|
|
1710
|
+
interface TableOperationColumn {
|
|
1711
|
+
name: OperationName | string;
|
|
1712
|
+
title?: string | RenderFunction;
|
|
1713
|
+
width?: number;
|
|
1714
|
+
fixed?: boolean;
|
|
1715
|
+
render?: (record: TableData) => VNodeChild;
|
|
1716
|
+
isLastLeftFixed?: boolean;
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1719
|
+
interface TableComponents {
|
|
1720
|
+
operations: (operations: {
|
|
1721
|
+
dragHandle?: TableOperationColumn;
|
|
1722
|
+
expand?: TableOperationColumn;
|
|
1723
|
+
selection?: TableOperationColumn;
|
|
1724
|
+
}) => TableOperationColumn[];
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
interface TableChangeExtra {
|
|
1728
|
+
/**
|
|
1729
|
+
* @zh 触发类型
|
|
1730
|
+
* @en Trigger type
|
|
1731
|
+
*/
|
|
1732
|
+
type: 'pagination' | 'sorter' | 'filter' | 'drag';
|
|
1733
|
+
/**
|
|
1734
|
+
* @zh 页码
|
|
1735
|
+
* @en page number
|
|
1736
|
+
*/
|
|
1737
|
+
page?: number;
|
|
1738
|
+
/**
|
|
1739
|
+
* @zh 每页数据数
|
|
1740
|
+
* @en number per page
|
|
1741
|
+
*/
|
|
1742
|
+
pageSize?: number;
|
|
1743
|
+
/**
|
|
1744
|
+
* @zh 排序信息
|
|
1745
|
+
* @en Sort information
|
|
1746
|
+
*/
|
|
1747
|
+
sorter?: Sorter;
|
|
1748
|
+
/** 按优先级排列的全部排序条件;sorter 保留首个条件以兼容已有消费方。 */
|
|
1749
|
+
sorters?: Sorter[];
|
|
1750
|
+
/**
|
|
1751
|
+
* @zh 筛选信息
|
|
1752
|
+
* @en Filter information
|
|
1753
|
+
*/
|
|
1754
|
+
filters?: Filters;
|
|
1755
|
+
/**
|
|
1756
|
+
* @zh 拖拽信息
|
|
1757
|
+
* @en Drag and drop information
|
|
1758
|
+
*/
|
|
1759
|
+
dragTarget?: TableData;
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
interface TableInternalProps {
|
|
1763
|
+
columns: TableColumnData[];
|
|
1764
|
+
data: TableData[];
|
|
1765
|
+
bordered?: boolean | TableBorder;
|
|
1766
|
+
rowSelection?: TableRowSelection;
|
|
1767
|
+
expandable?: TableExpandable;
|
|
1768
|
+
pagination?: boolean | Data;
|
|
1769
|
+
pagePosition?: string;
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1772
|
+
type Sorter = {
|
|
1773
|
+
field: string;
|
|
1774
|
+
direction: 'ascend' | 'descend';
|
|
1775
|
+
};
|
|
1776
|
+
|
|
1777
|
+
type Filters = Record<string, string[]>;
|
|
1778
|
+
|
|
1779
|
+
declare const TD_TYPES: readonly ["normal", "operation", "checkbox", "radio", "expand"];
|
|
1780
|
+
|
|
1781
|
+
type TdTypes = (typeof TD_TYPES)[number];
|
|
1782
|
+
```
|
|
1783
|
+
|
|
1784
|
+
|
|
1785
|
+
## Th API
|
|
1786
|
+
|
|
1787
|
+
公开声明:`dist/components/table/table-th.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
1788
|
+
|
|
1789
|
+
### Props
|
|
1790
|
+
|
|
1791
|
+
| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
|
|
1792
|
+
| --- | --- | --- | --- | --- |
|
|
1793
|
+
| tabindex | 见场景用法与类型 | undefined | string | number | 否 | 未声明 |
|
|
1794
|
+
| onClick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1795
|
+
| onDblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1796
|
+
| onContextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1797
|
+
| onMouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1798
|
+
| onMouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
1799
|
+
| onDragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1800
|
+
| onDragend | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1801
|
+
| onDragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1802
|
+
| onDragover | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1803
|
+
| onDrop | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
1804
|
+
| onKeydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void | 否 | 未声明 |
|
|
1805
|
+
| onFocus | 见场景用法与类型 | undefined | (event: FocusEvent) => void | 否 | 未声明 |
|
|
1806
|
+
| onPointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1807
|
+
| onPointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1808
|
+
| onPointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1809
|
+
| onPointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
1810
|
+
| column | 见场景用法与类型 | undefined | TableColumnData | 否 | {} |
|
|
1811
|
+
| operations | 见场景用法与类型 | undefined | TableOperationColumn[] | 否 | [] |
|
|
1812
|
+
| dataColumns | 见场景用法与类型 | undefined | TableColumnData[] | 否 | [] |
|
|
1813
|
+
| resizable | 见场景用法与类型 | undefined | false | true | 否 | false(Vue Boolean 转换) |
|
|
1814
|
+
|
|
1815
|
+
### Events
|
|
1816
|
+
|
|
1817
|
+
| 事件 | 用途 | 监听器签名(即事件参数) |
|
|
1818
|
+
| --- | --- | --- |
|
|
1819
|
+
| click | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1820
|
+
| focus | 见场景用法与类型 | undefined | (event: FocusEvent) => void |
|
|
1821
|
+
| keydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void |
|
|
1822
|
+
| dblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1823
|
+
| contextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1824
|
+
| mouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1825
|
+
| mouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
1826
|
+
| dragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1827
|
+
| dragend | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1828
|
+
| dragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1829
|
+
| dragover | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1830
|
+
| drop | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
1831
|
+
| pointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1832
|
+
| pointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1833
|
+
| pointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1834
|
+
| pointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
1835
|
+
|
|
1836
|
+
### Slots
|
|
1837
|
+
|
|
1838
|
+
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
1839
|
+
|
|
1840
|
+
### 实例方法
|
|
1841
|
+
|
|
1842
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
1843
|
+
|
|
1844
|
+
### 关联类型定义
|
|
1845
|
+
|
|
1846
|
+
以下摘自本组件族声明,供查阅嵌套配置;运行时和值类型均以根入口可导出项为准。
|
|
1847
|
+
|
|
1848
|
+
```typescript-reference
|
|
1849
|
+
declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
|
|
1850
|
+
|
|
1851
|
+
type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
|
|
1852
|
+
|
|
1853
|
+
interface TableData {
|
|
1854
|
+
/**
|
|
1855
|
+
* @zh 数据行的key
|
|
1856
|
+
* @en The key of the data row
|
|
1857
|
+
*/
|
|
1858
|
+
key?: string | number;
|
|
1859
|
+
/**
|
|
1860
|
+
* @zh 扩展行内容
|
|
1861
|
+
* @en Expand row content
|
|
1862
|
+
*/
|
|
1863
|
+
expand?: string | RenderFunction;
|
|
1864
|
+
/**
|
|
1865
|
+
* @zh 子数据
|
|
1866
|
+
* @en Sub data
|
|
1867
|
+
*/
|
|
1868
|
+
children?: TableData[];
|
|
1869
|
+
/**
|
|
1870
|
+
* @zh 是否禁用行选择器
|
|
1871
|
+
* @en Whether to disable the row selector
|
|
1872
|
+
*/
|
|
1873
|
+
disabled?: boolean;
|
|
1874
|
+
/**
|
|
1875
|
+
* @zh 是否是叶子节点
|
|
1876
|
+
* @en Whether it is a leaf node
|
|
1877
|
+
* @version 2.13.0
|
|
1878
|
+
*/
|
|
1879
|
+
isLeaf?: boolean;
|
|
1880
|
+
[name: string]: any;
|
|
1881
|
+
}
|
|
1882
|
+
|
|
1883
|
+
interface TableDataWithRaw {
|
|
1884
|
+
raw: TableData;
|
|
1885
|
+
key: string | number;
|
|
1886
|
+
disabled?: boolean;
|
|
1887
|
+
expand?: string | RenderFunction;
|
|
1888
|
+
children?: TableDataWithRaw[];
|
|
1889
|
+
isLeaf?: boolean;
|
|
1890
|
+
hasSubtree?: boolean;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
interface TableSortable {
|
|
1894
|
+
/**
|
|
1895
|
+
* @zh 支持的排序方向
|
|
1896
|
+
* @en Supported sort direction
|
|
1897
|
+
*/
|
|
1898
|
+
sortDirections: ('ascend' | 'descend')[];
|
|
1899
|
+
/**
|
|
1900
|
+
* @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。
|
|
1901
|
+
* @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.
|
|
1902
|
+
*/
|
|
1903
|
+
sorter?: ((a: TableData, b: TableData, extra: {
|
|
1904
|
+
dataIndex: string;
|
|
1905
|
+
direction: 'ascend' | 'descend';
|
|
1906
|
+
}) => number) | boolean;
|
|
1907
|
+
/**
|
|
1908
|
+
* @zh 排序方向
|
|
1909
|
+
* @en Sort direction
|
|
1910
|
+
*/
|
|
1911
|
+
sortOrder?: 'ascend' | 'descend' | '';
|
|
1912
|
+
/**
|
|
1913
|
+
* @zh 默认排序方向(非受控模式)
|
|
1914
|
+
* @en Default sort direction (uncontrolled mode)
|
|
1915
|
+
*/
|
|
1916
|
+
defaultSortOrder?: 'ascend' | 'descend' | '';
|
|
1917
|
+
/**
|
|
1918
|
+
* @zh 多列排序优先级,数字越大越先比较;只在声明优先级的列之间保留多列排序。
|
|
1919
|
+
* @en Multi-column sort priority. Higher values are compared first.
|
|
1920
|
+
*/
|
|
1921
|
+
sortPriority?: number;
|
|
1922
|
+
}
|
|
1923
|
+
|
|
1924
|
+
interface TableFilterData {
|
|
1925
|
+
/**
|
|
1926
|
+
* @zh 筛选数据选项的内容
|
|
1927
|
+
* @en Filter the content of the data option
|
|
1928
|
+
*/
|
|
1929
|
+
text: string | RenderFunction;
|
|
1930
|
+
/**
|
|
1931
|
+
* @zh 筛选数据选项的值
|
|
1932
|
+
* @en Filter the value of the data option
|
|
1933
|
+
*/
|
|
1934
|
+
value: string;
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
interface TableFilterable {
|
|
1938
|
+
/**
|
|
1939
|
+
* @zh 筛选数据
|
|
1940
|
+
* @en Filter data
|
|
1941
|
+
*/
|
|
1942
|
+
filters?: TableFilterData[];
|
|
1943
|
+
/**
|
|
1944
|
+
* @zh 筛选函数
|
|
1945
|
+
* @en Filter function
|
|
1946
|
+
*/
|
|
1947
|
+
filter: (filteredValue: string[], record: TableData) => boolean;
|
|
1948
|
+
/**
|
|
1949
|
+
* @zh 是否支持多选
|
|
1950
|
+
* @en Whether to support multiple selection
|
|
1951
|
+
*/
|
|
1952
|
+
multiple?: boolean;
|
|
1953
|
+
/**
|
|
1954
|
+
* @zh 筛选项
|
|
1955
|
+
* @en Filter value
|
|
1956
|
+
*/
|
|
1957
|
+
filteredValue?: string[];
|
|
1958
|
+
/**
|
|
1959
|
+
* @zh 默认筛选项
|
|
1960
|
+
* @en Default filter value
|
|
1961
|
+
*/
|
|
1962
|
+
defaultFilteredValue?: string[];
|
|
1963
|
+
/**
|
|
1964
|
+
* @zh 筛选框的内容
|
|
1965
|
+
* @en The content of filter box
|
|
1966
|
+
*/
|
|
1967
|
+
renderContent?: (data: {
|
|
1968
|
+
filterValue: string[];
|
|
1969
|
+
setFilterValue: (filterValue: string[]) => void;
|
|
1970
|
+
handleFilterConfirm: (event: Event) => void;
|
|
1971
|
+
handleFilterReset: (event: Event) => void;
|
|
1972
|
+
}) => VNodeChild;
|
|
1973
|
+
/**
|
|
1974
|
+
* @zh 筛选按钮的图标
|
|
1975
|
+
* @en Filter icon for button
|
|
1976
|
+
*/
|
|
1977
|
+
icon?: RenderFunction;
|
|
1978
|
+
/**
|
|
1979
|
+
* @zh 筛选框的弹出框配置
|
|
1980
|
+
* @en Pop-up box configuration of filter box
|
|
1981
|
+
*/
|
|
1982
|
+
triggerProps?: TriggerProps;
|
|
1983
|
+
/**
|
|
1984
|
+
* @zh 筛选图标是否左对齐
|
|
1985
|
+
* @en Whether the filter icon is aligned to the left
|
|
1986
|
+
* @version 2.13.0
|
|
1987
|
+
*/
|
|
1988
|
+
alignLeft?: boolean;
|
|
1989
|
+
slotName?: string;
|
|
1990
|
+
}
|
|
1991
|
+
|
|
1992
|
+
interface TableColumnData {
|
|
1993
|
+
/**
|
|
1994
|
+
* @zh 列信息的标识,对应 `TableData` 中的数据
|
|
1995
|
+
* @en The identifier of the column information, corresponding to the data in `TableData`
|
|
1996
|
+
*/
|
|
1997
|
+
dataIndex?: string;
|
|
1998
|
+
/**
|
|
1999
|
+
* @zh 列标题
|
|
2000
|
+
* @en Column header
|
|
2001
|
+
*/
|
|
2002
|
+
title?: string | RenderFunction;
|
|
2003
|
+
/**
|
|
2004
|
+
* @zh 列宽度
|
|
2005
|
+
* @en Column width
|
|
2006
|
+
*/
|
|
2007
|
+
width?: number;
|
|
2008
|
+
/**
|
|
2009
|
+
* @zh 最小列宽
|
|
2010
|
+
* @en Minimum column width
|
|
2011
|
+
*/
|
|
2012
|
+
minWidth?: number;
|
|
2013
|
+
/**
|
|
2014
|
+
* @zh 对齐方向
|
|
2015
|
+
* @en Alignment direction
|
|
2016
|
+
*/
|
|
2017
|
+
align?: 'left' | 'center' | 'right';
|
|
2018
|
+
/**
|
|
2019
|
+
* @zh 固定位置
|
|
2020
|
+
* @en Fixed position
|
|
2021
|
+
*/
|
|
2022
|
+
fixed?: 'left' | 'right';
|
|
2023
|
+
/**
|
|
2024
|
+
* @zh 是否显示省略号
|
|
2025
|
+
* @en Whether to show ellipsis
|
|
2026
|
+
*/
|
|
2027
|
+
ellipsis?: boolean;
|
|
2028
|
+
/**
|
|
2029
|
+
* @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性
|
|
2030
|
+
* @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties
|
|
2031
|
+
* @version 2.26.0
|
|
2032
|
+
*/
|
|
2033
|
+
tooltip?: boolean | Record<string, any>;
|
|
2034
|
+
/**
|
|
2035
|
+
* @zh 排序相关选项
|
|
2036
|
+
* @en Sorting related options
|
|
2037
|
+
*/
|
|
2038
|
+
sortable?: TableSortable;
|
|
2039
|
+
/**
|
|
2040
|
+
* @zh 过滤相关选项
|
|
2041
|
+
* @en Filter related options
|
|
2042
|
+
*/
|
|
2043
|
+
filterable?: TableFilterable;
|
|
2044
|
+
/**
|
|
2045
|
+
* @zh 表头子数据,用于表头分组
|
|
2046
|
+
* @en Header sub-data, used for header grouping
|
|
2047
|
+
*/
|
|
2048
|
+
children?: TableColumnData[];
|
|
2049
|
+
/**
|
|
2050
|
+
* @zh 自定义单元格类名
|
|
2051
|
+
* @en Custom cell class
|
|
2052
|
+
* @version 2.36.0
|
|
2053
|
+
*/
|
|
2054
|
+
cellClass?: ClassName;
|
|
2055
|
+
/**
|
|
2056
|
+
* @zh 自定义表头单元格类名
|
|
2057
|
+
* @en Custom header cell class
|
|
2058
|
+
* @version 2.36.0
|
|
2059
|
+
*/
|
|
2060
|
+
headerCellClass?: ClassName;
|
|
2061
|
+
/**
|
|
2062
|
+
* @zh 自定义内容单元格类名
|
|
2063
|
+
* @en Custom body cell class
|
|
2064
|
+
* @version 2.36.0
|
|
2065
|
+
*/
|
|
2066
|
+
bodyCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
2067
|
+
/**
|
|
2068
|
+
* @zh 自定义总结栏单元格类名
|
|
2069
|
+
* @en Custom body cell class
|
|
2070
|
+
* @version 2.36.0
|
|
2071
|
+
*/
|
|
2072
|
+
summaryCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
2073
|
+
/**
|
|
2074
|
+
* @zh 自定义单元格样式
|
|
2075
|
+
* @en Custom cell style
|
|
2076
|
+
* @version 2.11.0
|
|
2077
|
+
*/
|
|
2078
|
+
cellStyle?: CSSProperties;
|
|
2079
|
+
/**
|
|
2080
|
+
* @zh 自定义表头单元格样式
|
|
2081
|
+
* @en Custom header cell style
|
|
2082
|
+
* @version 2.29.0
|
|
2083
|
+
*/
|
|
2084
|
+
headerCellStyle?: CSSProperties;
|
|
2085
|
+
/**
|
|
2086
|
+
* @zh 自定义内容单元格样式
|
|
2087
|
+
* @en Custom body cell style
|
|
2088
|
+
* @version 2.29.0
|
|
2089
|
+
*/
|
|
2090
|
+
bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
2091
|
+
/**
|
|
2092
|
+
* @zh 自定义总结栏单元格样式
|
|
2093
|
+
* @en Custom summary cell style
|
|
2094
|
+
* @version 2.30.0
|
|
2095
|
+
*/
|
|
2096
|
+
summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
2097
|
+
/**
|
|
2098
|
+
* @zh 自定义列单元格的渲染
|
|
2099
|
+
* @en Customize the rendering of column cells
|
|
2100
|
+
*/
|
|
2101
|
+
render?: (data: {
|
|
2102
|
+
record: TableData;
|
|
2103
|
+
column: TableColumnData;
|
|
2104
|
+
rowIndex: number;
|
|
2105
|
+
}) => VNodeChild;
|
|
2106
|
+
/**
|
|
2107
|
+
* @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell
|
|
2108
|
+
* @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell
|
|
2109
|
+
* @version 2.18.0
|
|
2110
|
+
*/
|
|
2111
|
+
slotName?: string;
|
|
2112
|
+
/**
|
|
2113
|
+
* @zh 设置当前列的标题的渲染插槽的名字
|
|
2114
|
+
* @en Set the name of the render slot for the header of the current column
|
|
2115
|
+
* @version 2.23.0
|
|
2116
|
+
*/
|
|
2117
|
+
titleSlotName?: string;
|
|
2118
|
+
slots?: Slots;
|
|
2119
|
+
isLastLeftFixed?: boolean;
|
|
2120
|
+
isFirstRightFixed?: boolean;
|
|
2121
|
+
colSpan?: number;
|
|
2122
|
+
rowSpan?: number;
|
|
2123
|
+
index?: number;
|
|
2124
|
+
parent?: TableColumnData;
|
|
2125
|
+
_resizeWidth?: number;
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
interface TableBorder {
|
|
2129
|
+
/**
|
|
2130
|
+
* @zh 是否展示外边框
|
|
2131
|
+
* @en TWhether to display the outer border
|
|
2132
|
+
*/
|
|
2133
|
+
wrapper?: boolean;
|
|
2134
|
+
/**
|
|
2135
|
+
* @zh 是否展示单元格边框(表头+主体)
|
|
2136
|
+
* @en Whether to display the cell border (header + body)
|
|
2137
|
+
*/
|
|
2138
|
+
cell?: boolean;
|
|
2139
|
+
/**
|
|
2140
|
+
* @zh 是否展示表头单元格边框
|
|
2141
|
+
* @en Whether to display the header cell border
|
|
2142
|
+
*/
|
|
2143
|
+
headerCell?: boolean;
|
|
2144
|
+
/**
|
|
2145
|
+
* @zh 是否展示主体单元格边框
|
|
2146
|
+
* @en Whether to display the body cell border
|
|
2147
|
+
*/
|
|
2148
|
+
bodyCell?: boolean;
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
interface TableRowSelection {
|
|
2152
|
+
/**
|
|
2153
|
+
* @zh 行选择器的类型
|
|
2154
|
+
* @en The type of row selector
|
|
2155
|
+
*/
|
|
2156
|
+
type?: 'checkbox' | 'radio';
|
|
2157
|
+
/**
|
|
2158
|
+
* @zh 已选择的行(受控模式)
|
|
2159
|
+
* @en Selected row (controlled mode)
|
|
2160
|
+
*/
|
|
2161
|
+
selectedRowKeys?: BaseType[];
|
|
2162
|
+
/**
|
|
2163
|
+
* @zh 默认已选择的行(非受控模式)
|
|
2164
|
+
* @en The selected row by default (uncontrolled mode)
|
|
2165
|
+
*/
|
|
2166
|
+
defaultSelectedRowKeys?: BaseType[];
|
|
2167
|
+
/**
|
|
2168
|
+
* @zh 是否显示全选选择器
|
|
2169
|
+
* @en Whether to show the select all selector
|
|
2170
|
+
*/
|
|
2171
|
+
showCheckedAll?: boolean;
|
|
2172
|
+
/**
|
|
2173
|
+
* @zh 列标题
|
|
2174
|
+
* @en Column title
|
|
2175
|
+
*/
|
|
2176
|
+
title?: string;
|
|
2177
|
+
/**
|
|
2178
|
+
* @zh 列宽度
|
|
2179
|
+
* @en Column width
|
|
2180
|
+
*/
|
|
2181
|
+
width?: number;
|
|
2182
|
+
/**
|
|
2183
|
+
* @zh 是否固定
|
|
2184
|
+
* @en Is it fixed
|
|
2185
|
+
*/
|
|
2186
|
+
fixed?: boolean;
|
|
2187
|
+
/**
|
|
2188
|
+
* @zh 是否开启严格选择模式
|
|
2189
|
+
* @en Whether to enable strict selection mode
|
|
2190
|
+
* @defaultValue true
|
|
2191
|
+
* @version 2.29.0
|
|
2192
|
+
*/
|
|
2193
|
+
checkStrictly?: boolean;
|
|
2194
|
+
/**
|
|
2195
|
+
* @zh 是否仅展示当前页的 keys(切换分页时清空 keys)
|
|
2196
|
+
* @en Whether to display only the keys of the current page (clear keys when switching paging)
|
|
2197
|
+
* @version 2.32.0
|
|
2198
|
+
*/
|
|
2199
|
+
onlyCurrent?: boolean;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
interface TableExpandable {
|
|
2203
|
+
/**
|
|
2204
|
+
* @zh 显示的展开行(受控模式)
|
|
2205
|
+
* @en Displayed Expanded Row (Controlled Mode)
|
|
2206
|
+
*/
|
|
2207
|
+
expandedRowKeys?: BaseType[];
|
|
2208
|
+
/**
|
|
2209
|
+
* @zh 默认显示的展开行(非受控模式)
|
|
2210
|
+
* @en Expand row displayed by default (Uncontrolled mode)
|
|
2211
|
+
*/
|
|
2212
|
+
defaultExpandedRowKeys?: BaseType[];
|
|
2213
|
+
/**
|
|
2214
|
+
* @zh 是否默认展开所有的行
|
|
2215
|
+
* @en Whether to expand all rows by default
|
|
2216
|
+
*/
|
|
2217
|
+
defaultExpandAllRows?: boolean;
|
|
2218
|
+
/**
|
|
2219
|
+
* @zh 自定义展开行内容
|
|
2220
|
+
* @en Customize expanded row content
|
|
2221
|
+
*/
|
|
2222
|
+
expandedRowRender?: (record: TableData) => VNodeChild;
|
|
2223
|
+
/**
|
|
2224
|
+
* @zh 展开图标
|
|
2225
|
+
* @en Expand icon
|
|
2226
|
+
*/
|
|
2227
|
+
icon?: (expanded: boolean, record: TableData) => VNodeChild;
|
|
2228
|
+
/**
|
|
2229
|
+
* @zh 列标题
|
|
2230
|
+
* @en Column title
|
|
2231
|
+
*/
|
|
2232
|
+
title?: string;
|
|
2233
|
+
/**
|
|
2234
|
+
* @zh 列宽度
|
|
2235
|
+
* @en Column width
|
|
2236
|
+
*/
|
|
2237
|
+
width?: number;
|
|
2238
|
+
/**
|
|
2239
|
+
* @zh 是否固定
|
|
2240
|
+
* @en Is it fixed
|
|
2241
|
+
*/
|
|
2242
|
+
fixed?: boolean;
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
interface TableDraggable {
|
|
2246
|
+
/**
|
|
2247
|
+
* @zh 拖拽类型
|
|
2248
|
+
* @en drag type
|
|
2249
|
+
*/
|
|
2250
|
+
type?: 'row' | 'handle';
|
|
2251
|
+
/**
|
|
2252
|
+
* @zh 列标题
|
|
2253
|
+
* @en Column title
|
|
2254
|
+
*/
|
|
2255
|
+
title?: string;
|
|
2256
|
+
/**
|
|
2257
|
+
* @zh 列宽度
|
|
2258
|
+
* @en Column width
|
|
2259
|
+
*/
|
|
2260
|
+
width?: number;
|
|
2261
|
+
/**
|
|
2262
|
+
* @zh 是否固定
|
|
2263
|
+
* @en Is it fixed
|
|
2264
|
+
*/
|
|
2265
|
+
fixed?: boolean;
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2268
|
+
type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
|
|
2269
|
+
|
|
2270
|
+
interface TableOperationColumn {
|
|
2271
|
+
name: OperationName | string;
|
|
2272
|
+
title?: string | RenderFunction;
|
|
2273
|
+
width?: number;
|
|
2274
|
+
fixed?: boolean;
|
|
2275
|
+
render?: (record: TableData) => VNodeChild;
|
|
2276
|
+
isLastLeftFixed?: boolean;
|
|
2277
|
+
}
|
|
2278
|
+
|
|
2279
|
+
interface TableComponents {
|
|
2280
|
+
operations: (operations: {
|
|
2281
|
+
dragHandle?: TableOperationColumn;
|
|
2282
|
+
expand?: TableOperationColumn;
|
|
2283
|
+
selection?: TableOperationColumn;
|
|
2284
|
+
}) => TableOperationColumn[];
|
|
2285
|
+
}
|
|
2286
|
+
|
|
2287
|
+
interface TableChangeExtra {
|
|
2288
|
+
/**
|
|
2289
|
+
* @zh 触发类型
|
|
2290
|
+
* @en Trigger type
|
|
2291
|
+
*/
|
|
2292
|
+
type: 'pagination' | 'sorter' | 'filter' | 'drag';
|
|
2293
|
+
/**
|
|
2294
|
+
* @zh 页码
|
|
2295
|
+
* @en page number
|
|
2296
|
+
*/
|
|
2297
|
+
page?: number;
|
|
2298
|
+
/**
|
|
2299
|
+
* @zh 每页数据数
|
|
2300
|
+
* @en number per page
|
|
2301
|
+
*/
|
|
2302
|
+
pageSize?: number;
|
|
2303
|
+
/**
|
|
2304
|
+
* @zh 排序信息
|
|
2305
|
+
* @en Sort information
|
|
2306
|
+
*/
|
|
2307
|
+
sorter?: Sorter;
|
|
2308
|
+
/** 按优先级排列的全部排序条件;sorter 保留首个条件以兼容已有消费方。 */
|
|
2309
|
+
sorters?: Sorter[];
|
|
2310
|
+
/**
|
|
2311
|
+
* @zh 筛选信息
|
|
2312
|
+
* @en Filter information
|
|
2313
|
+
*/
|
|
2314
|
+
filters?: Filters;
|
|
2315
|
+
/**
|
|
2316
|
+
* @zh 拖拽信息
|
|
2317
|
+
* @en Drag and drop information
|
|
2318
|
+
*/
|
|
2319
|
+
dragTarget?: TableData;
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
interface TableInternalProps {
|
|
2323
|
+
columns: TableColumnData[];
|
|
2324
|
+
data: TableData[];
|
|
2325
|
+
bordered?: boolean | TableBorder;
|
|
2326
|
+
rowSelection?: TableRowSelection;
|
|
2327
|
+
expandable?: TableExpandable;
|
|
2328
|
+
pagination?: boolean | Data;
|
|
2329
|
+
pagePosition?: string;
|
|
2330
|
+
}
|
|
2331
|
+
|
|
2332
|
+
type Sorter = {
|
|
2333
|
+
field: string;
|
|
2334
|
+
direction: 'ascend' | 'descend';
|
|
2335
|
+
};
|
|
2336
|
+
|
|
2337
|
+
type Filters = Record<string, string[]>;
|
|
2338
|
+
```
|
|
2339
|
+
|
|
2340
|
+
|
|
2341
|
+
## Thead API
|
|
2342
|
+
|
|
2343
|
+
公开声明:`dist/components/table/table-thead.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
2344
|
+
|
|
2345
|
+
### Props
|
|
2346
|
+
|
|
2347
|
+
未声明自身 props;包装透传能力见本页用法。
|
|
2348
|
+
|
|
2349
|
+
### Events
|
|
2350
|
+
|
|
2351
|
+
未声明组件 emits;原生事件与包装透传按本页用法核实。
|
|
2352
|
+
|
|
2353
|
+
### Slots
|
|
2354
|
+
|
|
2355
|
+
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
2356
|
+
|
|
2357
|
+
### 实例方法
|
|
2358
|
+
|
|
2359
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
2360
|
+
|
|
2361
|
+
|
|
2362
|
+
## Tr API
|
|
2363
|
+
|
|
2364
|
+
公开声明:`dist/components/table/table-tr.d.ts`。 类型中的 undefined 表示可省略;原始 prop 默认值不等于继承配置或服务默认值。
|
|
2365
|
+
|
|
2366
|
+
### Props
|
|
2367
|
+
|
|
2368
|
+
| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
|
|
2369
|
+
| --- | --- | --- | --- | --- |
|
|
2370
|
+
| tabindex | 见场景用法与类型 | undefined | string | number | 否 | 未声明 |
|
|
2371
|
+
| onClick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
2372
|
+
| onDblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
2373
|
+
| onContextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
2374
|
+
| onMouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
2375
|
+
| onMouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void | 否 | 未声明 |
|
|
2376
|
+
| onDragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
2377
|
+
| onDragend | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
2378
|
+
| onDragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
2379
|
+
| onDragover | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
2380
|
+
| onDrop | 见场景用法与类型 | undefined | (event: DragEvent) => void | 否 | 未声明 |
|
|
2381
|
+
| onKeydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void | 否 | 未声明 |
|
|
2382
|
+
| onFocus | 见场景用法与类型 | undefined | (event: FocusEvent) => void | 否 | 未声明 |
|
|
2383
|
+
| onPointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
2384
|
+
| onPointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
2385
|
+
| onPointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
2386
|
+
| onPointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void | 否 | 未声明 |
|
|
2387
|
+
| expand | 见场景用法与类型 | undefined | false | true | 否 | false(Vue Boolean 转换) |
|
|
2388
|
+
| empty | 见场景用法与类型 | undefined | false | true | 否 | false(Vue Boolean 转换) |
|
|
2389
|
+
| checked | 见场景用法与类型 | undefined | false | true | 否 | false(Vue Boolean 转换) |
|
|
2390
|
+
| rowIndex | 见场景用法与类型 | undefined | number | 否 | 未声明 |
|
|
2391
|
+
| record | 见场景用法与类型 | undefined | TableDataWithRaw | 否 | {} |
|
|
2392
|
+
|
|
2393
|
+
### Events
|
|
2394
|
+
|
|
2395
|
+
| 事件 | 用途 | 监听器签名(即事件参数) |
|
|
2396
|
+
| --- | --- | --- |
|
|
2397
|
+
| click | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
2398
|
+
| focus | 见场景用法与类型 | undefined | (event: FocusEvent) => void |
|
|
2399
|
+
| keydown | 见场景用法与类型 | undefined | (event: KeyboardEvent) => void |
|
|
2400
|
+
| dblclick | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
2401
|
+
| contextmenu | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
2402
|
+
| mouseenter | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
2403
|
+
| mouseleave | 见场景用法与类型 | undefined | (event: MouseEvent) => void |
|
|
2404
|
+
| dragstart | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
2405
|
+
| dragend | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
2406
|
+
| dragenter | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
2407
|
+
| dragover | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
2408
|
+
| drop | 见场景用法与类型 | undefined | (event: DragEvent) => void |
|
|
2409
|
+
| pointerdown | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
2410
|
+
| pointermove | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
2411
|
+
| pointerup | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
2412
|
+
| pointercancel | 见场景用法与类型 | undefined | (event: PointerEvent) => void |
|
|
2413
|
+
|
|
2414
|
+
### Slots
|
|
2415
|
+
|
|
2416
|
+
公开类型未逐项声明插槽;本页场景说明列出实际使用的插槽,不将任意插槽视为已支持。
|
|
2417
|
+
|
|
2418
|
+
### 实例方法
|
|
2419
|
+
|
|
2420
|
+
没有检索到显式 expose 或 Options API methods 的公开方法;不把 setup 内部函数当成稳定实例 API。
|
|
2421
|
+
|
|
2422
|
+
### 关联类型定义
|
|
2423
|
+
|
|
2424
|
+
以下摘自本组件族声明,供查阅嵌套配置;运行时和值类型均以根入口可导出项为准。
|
|
2425
|
+
|
|
2426
|
+
```typescript-reference
|
|
2427
|
+
declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
|
|
2428
|
+
|
|
2429
|
+
type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
|
|
2430
|
+
|
|
2431
|
+
interface TableData {
|
|
2432
|
+
/**
|
|
2433
|
+
* @zh 数据行的key
|
|
2434
|
+
* @en The key of the data row
|
|
2435
|
+
*/
|
|
2436
|
+
key?: string | number;
|
|
2437
|
+
/**
|
|
2438
|
+
* @zh 扩展行内容
|
|
2439
|
+
* @en Expand row content
|
|
2440
|
+
*/
|
|
2441
|
+
expand?: string | RenderFunction;
|
|
2442
|
+
/**
|
|
2443
|
+
* @zh 子数据
|
|
2444
|
+
* @en Sub data
|
|
2445
|
+
*/
|
|
2446
|
+
children?: TableData[];
|
|
2447
|
+
/**
|
|
2448
|
+
* @zh 是否禁用行选择器
|
|
2449
|
+
* @en Whether to disable the row selector
|
|
2450
|
+
*/
|
|
2451
|
+
disabled?: boolean;
|
|
2452
|
+
/**
|
|
2453
|
+
* @zh 是否是叶子节点
|
|
2454
|
+
* @en Whether it is a leaf node
|
|
2455
|
+
* @version 2.13.0
|
|
2456
|
+
*/
|
|
2457
|
+
isLeaf?: boolean;
|
|
2458
|
+
[name: string]: any;
|
|
2459
|
+
}
|
|
2460
|
+
|
|
2461
|
+
interface TableDataWithRaw {
|
|
2462
|
+
raw: TableData;
|
|
2463
|
+
key: string | number;
|
|
2464
|
+
disabled?: boolean;
|
|
2465
|
+
expand?: string | RenderFunction;
|
|
2466
|
+
children?: TableDataWithRaw[];
|
|
2467
|
+
isLeaf?: boolean;
|
|
2468
|
+
hasSubtree?: boolean;
|
|
2469
|
+
}
|
|
2470
|
+
|
|
2471
|
+
interface TableSortable {
|
|
2472
|
+
/**
|
|
2473
|
+
* @zh 支持的排序方向
|
|
2474
|
+
* @en Supported sort direction
|
|
2475
|
+
*/
|
|
2476
|
+
sortDirections: ('ascend' | 'descend')[];
|
|
2477
|
+
/**
|
|
2478
|
+
* @zh 排序函数。设置为 `true` 可关闭内部排序。2.19.0 版本修改传出数据。
|
|
2479
|
+
* @en Sorting function. Set to `true` to turn off internal sorting. Version 2.19.0 modifies outgoing data.
|
|
2480
|
+
*/
|
|
2481
|
+
sorter?: ((a: TableData, b: TableData, extra: {
|
|
2482
|
+
dataIndex: string;
|
|
2483
|
+
direction: 'ascend' | 'descend';
|
|
2484
|
+
}) => number) | boolean;
|
|
2485
|
+
/**
|
|
2486
|
+
* @zh 排序方向
|
|
2487
|
+
* @en Sort direction
|
|
2488
|
+
*/
|
|
2489
|
+
sortOrder?: 'ascend' | 'descend' | '';
|
|
2490
|
+
/**
|
|
2491
|
+
* @zh 默认排序方向(非受控模式)
|
|
2492
|
+
* @en Default sort direction (uncontrolled mode)
|
|
2493
|
+
*/
|
|
2494
|
+
defaultSortOrder?: 'ascend' | 'descend' | '';
|
|
2495
|
+
/**
|
|
2496
|
+
* @zh 多列排序优先级,数字越大越先比较;只在声明优先级的列之间保留多列排序。
|
|
2497
|
+
* @en Multi-column sort priority. Higher values are compared first.
|
|
2498
|
+
*/
|
|
2499
|
+
sortPriority?: number;
|
|
2500
|
+
}
|
|
2501
|
+
|
|
2502
|
+
interface TableFilterData {
|
|
2503
|
+
/**
|
|
2504
|
+
* @zh 筛选数据选项的内容
|
|
2505
|
+
* @en Filter the content of the data option
|
|
2506
|
+
*/
|
|
2507
|
+
text: string | RenderFunction;
|
|
2508
|
+
/**
|
|
2509
|
+
* @zh 筛选数据选项的值
|
|
2510
|
+
* @en Filter the value of the data option
|
|
2511
|
+
*/
|
|
2512
|
+
value: string;
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2515
|
+
interface TableFilterable {
|
|
2516
|
+
/**
|
|
2517
|
+
* @zh 筛选数据
|
|
2518
|
+
* @en Filter data
|
|
2519
|
+
*/
|
|
2520
|
+
filters?: TableFilterData[];
|
|
2521
|
+
/**
|
|
2522
|
+
* @zh 筛选函数
|
|
2523
|
+
* @en Filter function
|
|
2524
|
+
*/
|
|
2525
|
+
filter: (filteredValue: string[], record: TableData) => boolean;
|
|
2526
|
+
/**
|
|
2527
|
+
* @zh 是否支持多选
|
|
2528
|
+
* @en Whether to support multiple selection
|
|
2529
|
+
*/
|
|
2530
|
+
multiple?: boolean;
|
|
2531
|
+
/**
|
|
2532
|
+
* @zh 筛选项
|
|
2533
|
+
* @en Filter value
|
|
2534
|
+
*/
|
|
2535
|
+
filteredValue?: string[];
|
|
2536
|
+
/**
|
|
2537
|
+
* @zh 默认筛选项
|
|
2538
|
+
* @en Default filter value
|
|
2539
|
+
*/
|
|
2540
|
+
defaultFilteredValue?: string[];
|
|
2541
|
+
/**
|
|
2542
|
+
* @zh 筛选框的内容
|
|
2543
|
+
* @en The content of filter box
|
|
2544
|
+
*/
|
|
2545
|
+
renderContent?: (data: {
|
|
2546
|
+
filterValue: string[];
|
|
2547
|
+
setFilterValue: (filterValue: string[]) => void;
|
|
2548
|
+
handleFilterConfirm: (event: Event) => void;
|
|
2549
|
+
handleFilterReset: (event: Event) => void;
|
|
2550
|
+
}) => VNodeChild;
|
|
2551
|
+
/**
|
|
2552
|
+
* @zh 筛选按钮的图标
|
|
2553
|
+
* @en Filter icon for button
|
|
2554
|
+
*/
|
|
2555
|
+
icon?: RenderFunction;
|
|
2556
|
+
/**
|
|
2557
|
+
* @zh 筛选框的弹出框配置
|
|
2558
|
+
* @en Pop-up box configuration of filter box
|
|
2559
|
+
*/
|
|
2560
|
+
triggerProps?: TriggerProps;
|
|
2561
|
+
/**
|
|
2562
|
+
* @zh 筛选图标是否左对齐
|
|
2563
|
+
* @en Whether the filter icon is aligned to the left
|
|
2564
|
+
* @version 2.13.0
|
|
2565
|
+
*/
|
|
2566
|
+
alignLeft?: boolean;
|
|
2567
|
+
slotName?: string;
|
|
2568
|
+
}
|
|
2569
|
+
|
|
2570
|
+
interface TableColumnData {
|
|
2571
|
+
/**
|
|
2572
|
+
* @zh 列信息的标识,对应 `TableData` 中的数据
|
|
2573
|
+
* @en The identifier of the column information, corresponding to the data in `TableData`
|
|
2574
|
+
*/
|
|
2575
|
+
dataIndex?: string;
|
|
2576
|
+
/**
|
|
2577
|
+
* @zh 列标题
|
|
2578
|
+
* @en Column header
|
|
2579
|
+
*/
|
|
2580
|
+
title?: string | RenderFunction;
|
|
2581
|
+
/**
|
|
2582
|
+
* @zh 列宽度
|
|
2583
|
+
* @en Column width
|
|
2584
|
+
*/
|
|
2585
|
+
width?: number;
|
|
2586
|
+
/**
|
|
2587
|
+
* @zh 最小列宽
|
|
2588
|
+
* @en Minimum column width
|
|
2589
|
+
*/
|
|
2590
|
+
minWidth?: number;
|
|
2591
|
+
/**
|
|
2592
|
+
* @zh 对齐方向
|
|
2593
|
+
* @en Alignment direction
|
|
2594
|
+
*/
|
|
2595
|
+
align?: 'left' | 'center' | 'right';
|
|
2596
|
+
/**
|
|
2597
|
+
* @zh 固定位置
|
|
2598
|
+
* @en Fixed position
|
|
2599
|
+
*/
|
|
2600
|
+
fixed?: 'left' | 'right';
|
|
2601
|
+
/**
|
|
2602
|
+
* @zh 是否显示省略号
|
|
2603
|
+
* @en Whether to show ellipsis
|
|
2604
|
+
*/
|
|
2605
|
+
ellipsis?: boolean;
|
|
2606
|
+
/**
|
|
2607
|
+
* @zh 是否在显示省略号时显示文本提示。可填入 tooltip 组件属性
|
|
2608
|
+
* @en Whether to show a text hint when an ellipsis is displayed. Can be filled in tooltip component properties
|
|
2609
|
+
* @version 2.26.0
|
|
2610
|
+
*/
|
|
2611
|
+
tooltip?: boolean | Record<string, any>;
|
|
2612
|
+
/**
|
|
2613
|
+
* @zh 排序相关选项
|
|
2614
|
+
* @en Sorting related options
|
|
2615
|
+
*/
|
|
2616
|
+
sortable?: TableSortable;
|
|
2617
|
+
/**
|
|
2618
|
+
* @zh 过滤相关选项
|
|
2619
|
+
* @en Filter related options
|
|
2620
|
+
*/
|
|
2621
|
+
filterable?: TableFilterable;
|
|
2622
|
+
/**
|
|
2623
|
+
* @zh 表头子数据,用于表头分组
|
|
2624
|
+
* @en Header sub-data, used for header grouping
|
|
2625
|
+
*/
|
|
2626
|
+
children?: TableColumnData[];
|
|
2627
|
+
/**
|
|
2628
|
+
* @zh 自定义单元格类名
|
|
2629
|
+
* @en Custom cell class
|
|
2630
|
+
* @version 2.36.0
|
|
2631
|
+
*/
|
|
2632
|
+
cellClass?: ClassName;
|
|
2633
|
+
/**
|
|
2634
|
+
* @zh 自定义表头单元格类名
|
|
2635
|
+
* @en Custom header cell class
|
|
2636
|
+
* @version 2.36.0
|
|
2637
|
+
*/
|
|
2638
|
+
headerCellClass?: ClassName;
|
|
2639
|
+
/**
|
|
2640
|
+
* @zh 自定义内容单元格类名
|
|
2641
|
+
* @en Custom body cell class
|
|
2642
|
+
* @version 2.36.0
|
|
2643
|
+
*/
|
|
2644
|
+
bodyCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
2645
|
+
/**
|
|
2646
|
+
* @zh 自定义总结栏单元格类名
|
|
2647
|
+
* @en Custom body cell class
|
|
2648
|
+
* @version 2.36.0
|
|
2649
|
+
*/
|
|
2650
|
+
summaryCellClass?: ClassName | ((record: TableData) => ClassName);
|
|
2651
|
+
/**
|
|
2652
|
+
* @zh 自定义单元格样式
|
|
2653
|
+
* @en Custom cell style
|
|
2654
|
+
* @version 2.11.0
|
|
2655
|
+
*/
|
|
2656
|
+
cellStyle?: CSSProperties;
|
|
2657
|
+
/**
|
|
2658
|
+
* @zh 自定义表头单元格样式
|
|
2659
|
+
* @en Custom header cell style
|
|
2660
|
+
* @version 2.29.0
|
|
2661
|
+
*/
|
|
2662
|
+
headerCellStyle?: CSSProperties;
|
|
2663
|
+
/**
|
|
2664
|
+
* @zh 自定义内容单元格样式
|
|
2665
|
+
* @en Custom body cell style
|
|
2666
|
+
* @version 2.29.0
|
|
2667
|
+
*/
|
|
2668
|
+
bodyCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
2669
|
+
/**
|
|
2670
|
+
* @zh 自定义总结栏单元格样式
|
|
2671
|
+
* @en Custom summary cell style
|
|
2672
|
+
* @version 2.30.0
|
|
2673
|
+
*/
|
|
2674
|
+
summaryCellStyle?: CSSProperties | ((record: TableData) => CSSProperties);
|
|
2675
|
+
/**
|
|
2676
|
+
* @zh 自定义列单元格的渲染
|
|
2677
|
+
* @en Customize the rendering of column cells
|
|
2678
|
+
*/
|
|
2679
|
+
render?: (data: {
|
|
2680
|
+
record: TableData;
|
|
2681
|
+
column: TableColumnData;
|
|
2682
|
+
rowIndex: number;
|
|
2683
|
+
}) => VNodeChild;
|
|
2684
|
+
/**
|
|
2685
|
+
* @zh 设置当前列的渲染插槽的名字。插槽参数同 #cell
|
|
2686
|
+
* @en Sets the name of the render slot for the current column. Slot parameters are the same as #cell
|
|
2687
|
+
* @version 2.18.0
|
|
2688
|
+
*/
|
|
2689
|
+
slotName?: string;
|
|
2690
|
+
/**
|
|
2691
|
+
* @zh 设置当前列的标题的渲染插槽的名字
|
|
2692
|
+
* @en Set the name of the render slot for the header of the current column
|
|
2693
|
+
* @version 2.23.0
|
|
2694
|
+
*/
|
|
2695
|
+
titleSlotName?: string;
|
|
2696
|
+
slots?: Slots;
|
|
2697
|
+
isLastLeftFixed?: boolean;
|
|
2698
|
+
isFirstRightFixed?: boolean;
|
|
2699
|
+
colSpan?: number;
|
|
2700
|
+
rowSpan?: number;
|
|
2701
|
+
index?: number;
|
|
2702
|
+
parent?: TableColumnData;
|
|
2703
|
+
_resizeWidth?: number;
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2706
|
+
interface TableBorder {
|
|
2707
|
+
/**
|
|
2708
|
+
* @zh 是否展示外边框
|
|
2709
|
+
* @en TWhether to display the outer border
|
|
2710
|
+
*/
|
|
2711
|
+
wrapper?: boolean;
|
|
2712
|
+
/**
|
|
2713
|
+
* @zh 是否展示单元格边框(表头+主体)
|
|
2714
|
+
* @en Whether to display the cell border (header + body)
|
|
2715
|
+
*/
|
|
2716
|
+
cell?: boolean;
|
|
2717
|
+
/**
|
|
2718
|
+
* @zh 是否展示表头单元格边框
|
|
2719
|
+
* @en Whether to display the header cell border
|
|
2720
|
+
*/
|
|
2721
|
+
headerCell?: boolean;
|
|
2722
|
+
/**
|
|
2723
|
+
* @zh 是否展示主体单元格边框
|
|
2724
|
+
* @en Whether to display the body cell border
|
|
2725
|
+
*/
|
|
2726
|
+
bodyCell?: boolean;
|
|
2727
|
+
}
|
|
2728
|
+
|
|
2729
|
+
interface TableRowSelection {
|
|
2730
|
+
/**
|
|
2731
|
+
* @zh 行选择器的类型
|
|
2732
|
+
* @en The type of row selector
|
|
2733
|
+
*/
|
|
2734
|
+
type?: 'checkbox' | 'radio';
|
|
2735
|
+
/**
|
|
2736
|
+
* @zh 已选择的行(受控模式)
|
|
2737
|
+
* @en Selected row (controlled mode)
|
|
2738
|
+
*/
|
|
2739
|
+
selectedRowKeys?: BaseType[];
|
|
2740
|
+
/**
|
|
2741
|
+
* @zh 默认已选择的行(非受控模式)
|
|
2742
|
+
* @en The selected row by default (uncontrolled mode)
|
|
2743
|
+
*/
|
|
2744
|
+
defaultSelectedRowKeys?: BaseType[];
|
|
2745
|
+
/**
|
|
2746
|
+
* @zh 是否显示全选选择器
|
|
2747
|
+
* @en Whether to show the select all selector
|
|
2748
|
+
*/
|
|
2749
|
+
showCheckedAll?: boolean;
|
|
2750
|
+
/**
|
|
2751
|
+
* @zh 列标题
|
|
2752
|
+
* @en Column title
|
|
2753
|
+
*/
|
|
2754
|
+
title?: string;
|
|
2755
|
+
/**
|
|
2756
|
+
* @zh 列宽度
|
|
2757
|
+
* @en Column width
|
|
2758
|
+
*/
|
|
2759
|
+
width?: number;
|
|
2760
|
+
/**
|
|
2761
|
+
* @zh 是否固定
|
|
2762
|
+
* @en Is it fixed
|
|
2763
|
+
*/
|
|
2764
|
+
fixed?: boolean;
|
|
2765
|
+
/**
|
|
2766
|
+
* @zh 是否开启严格选择模式
|
|
2767
|
+
* @en Whether to enable strict selection mode
|
|
2768
|
+
* @defaultValue true
|
|
2769
|
+
* @version 2.29.0
|
|
2770
|
+
*/
|
|
2771
|
+
checkStrictly?: boolean;
|
|
2772
|
+
/**
|
|
2773
|
+
* @zh 是否仅展示当前页的 keys(切换分页时清空 keys)
|
|
2774
|
+
* @en Whether to display only the keys of the current page (clear keys when switching paging)
|
|
2775
|
+
* @version 2.32.0
|
|
2776
|
+
*/
|
|
2777
|
+
onlyCurrent?: boolean;
|
|
2778
|
+
}
|
|
2779
|
+
|
|
2780
|
+
interface TableExpandable {
|
|
2781
|
+
/**
|
|
2782
|
+
* @zh 显示的展开行(受控模式)
|
|
2783
|
+
* @en Displayed Expanded Row (Controlled Mode)
|
|
2784
|
+
*/
|
|
2785
|
+
expandedRowKeys?: BaseType[];
|
|
2786
|
+
/**
|
|
2787
|
+
* @zh 默认显示的展开行(非受控模式)
|
|
2788
|
+
* @en Expand row displayed by default (Uncontrolled mode)
|
|
2789
|
+
*/
|
|
2790
|
+
defaultExpandedRowKeys?: BaseType[];
|
|
2791
|
+
/**
|
|
2792
|
+
* @zh 是否默认展开所有的行
|
|
2793
|
+
* @en Whether to expand all rows by default
|
|
2794
|
+
*/
|
|
2795
|
+
defaultExpandAllRows?: boolean;
|
|
2796
|
+
/**
|
|
2797
|
+
* @zh 自定义展开行内容
|
|
2798
|
+
* @en Customize expanded row content
|
|
2799
|
+
*/
|
|
2800
|
+
expandedRowRender?: (record: TableData) => VNodeChild;
|
|
2801
|
+
/**
|
|
2802
|
+
* @zh 展开图标
|
|
2803
|
+
* @en Expand icon
|
|
2804
|
+
*/
|
|
2805
|
+
icon?: (expanded: boolean, record: TableData) => VNodeChild;
|
|
2806
|
+
/**
|
|
2807
|
+
* @zh 列标题
|
|
2808
|
+
* @en Column title
|
|
2809
|
+
*/
|
|
2810
|
+
title?: string;
|
|
2811
|
+
/**
|
|
2812
|
+
* @zh 列宽度
|
|
2813
|
+
* @en Column width
|
|
2814
|
+
*/
|
|
2815
|
+
width?: number;
|
|
2816
|
+
/**
|
|
2817
|
+
* @zh 是否固定
|
|
2818
|
+
* @en Is it fixed
|
|
2819
|
+
*/
|
|
2820
|
+
fixed?: boolean;
|
|
2821
|
+
}
|
|
2822
|
+
|
|
2823
|
+
interface TableDraggable {
|
|
2824
|
+
/**
|
|
2825
|
+
* @zh 拖拽类型
|
|
2826
|
+
* @en drag type
|
|
2827
|
+
*/
|
|
2828
|
+
type?: 'row' | 'handle';
|
|
2829
|
+
/**
|
|
2830
|
+
* @zh 列标题
|
|
2831
|
+
* @en Column title
|
|
2832
|
+
*/
|
|
2833
|
+
title?: string;
|
|
2834
|
+
/**
|
|
2835
|
+
* @zh 列宽度
|
|
2836
|
+
* @en Column width
|
|
2837
|
+
*/
|
|
2838
|
+
width?: number;
|
|
2839
|
+
/**
|
|
2840
|
+
* @zh 是否固定
|
|
2841
|
+
* @en Is it fixed
|
|
2842
|
+
*/
|
|
2843
|
+
fixed?: boolean;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2846
|
+
type OperationName = 'selection-checkbox' | 'selection-radio' | 'expand' | 'drag-handle';
|
|
2847
|
+
|
|
2848
|
+
interface TableOperationColumn {
|
|
2849
|
+
name: OperationName | string;
|
|
2850
|
+
title?: string | RenderFunction;
|
|
2851
|
+
width?: number;
|
|
2852
|
+
fixed?: boolean;
|
|
2853
|
+
render?: (record: TableData) => VNodeChild;
|
|
2854
|
+
isLastLeftFixed?: boolean;
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2857
|
+
interface TableComponents {
|
|
2858
|
+
operations: (operations: {
|
|
2859
|
+
dragHandle?: TableOperationColumn;
|
|
2860
|
+
expand?: TableOperationColumn;
|
|
2861
|
+
selection?: TableOperationColumn;
|
|
2862
|
+
}) => TableOperationColumn[];
|
|
2863
|
+
}
|
|
2864
|
+
|
|
2865
|
+
interface TableChangeExtra {
|
|
2866
|
+
/**
|
|
2867
|
+
* @zh 触发类型
|
|
2868
|
+
* @en Trigger type
|
|
2869
|
+
*/
|
|
2870
|
+
type: 'pagination' | 'sorter' | 'filter' | 'drag';
|
|
2871
|
+
/**
|
|
2872
|
+
* @zh 页码
|
|
2873
|
+
* @en page number
|
|
2874
|
+
*/
|
|
2875
|
+
page?: number;
|
|
2876
|
+
/**
|
|
2877
|
+
* @zh 每页数据数
|
|
2878
|
+
* @en number per page
|
|
2879
|
+
*/
|
|
2880
|
+
pageSize?: number;
|
|
2881
|
+
/**
|
|
2882
|
+
* @zh 排序信息
|
|
2883
|
+
* @en Sort information
|
|
2884
|
+
*/
|
|
2885
|
+
sorter?: Sorter;
|
|
2886
|
+
/** 按优先级排列的全部排序条件;sorter 保留首个条件以兼容已有消费方。 */
|
|
2887
|
+
sorters?: Sorter[];
|
|
2888
|
+
/**
|
|
2889
|
+
* @zh 筛选信息
|
|
2890
|
+
* @en Filter information
|
|
2891
|
+
*/
|
|
2892
|
+
filters?: Filters;
|
|
2893
|
+
/**
|
|
2894
|
+
* @zh 拖拽信息
|
|
2895
|
+
* @en Drag and drop information
|
|
2896
|
+
*/
|
|
2897
|
+
dragTarget?: TableData;
|
|
2898
|
+
}
|
|
2899
|
+
|
|
2900
|
+
interface TableInternalProps {
|
|
2901
|
+
columns: TableColumnData[];
|
|
2902
|
+
data: TableData[];
|
|
2903
|
+
bordered?: boolean | TableBorder;
|
|
2904
|
+
rowSelection?: TableRowSelection;
|
|
2905
|
+
expandable?: TableExpandable;
|
|
2906
|
+
pagination?: boolean | Data;
|
|
2907
|
+
pagePosition?: string;
|
|
2908
|
+
}
|
|
2909
|
+
|
|
2910
|
+
type Sorter = {
|
|
2911
|
+
field: string;
|
|
2912
|
+
direction: 'ascend' | 'descend';
|
|
2913
|
+
};
|
|
2914
|
+
|
|
2915
|
+
type Filters = Record<string, string[]>;
|
|
2916
|
+
```
|
|
2917
|
+
|
|
2918
|
+
|
|
2919
|
+
返回 [Table 用法](./table.md)。
|