From c71cc781e687bca72c436ba0478f07e415ba02ee Mon Sep 17 00:00:00 2001 From: sheepluo Date: Wed, 6 Apr 2022 19:31:13 +0800 Subject: [PATCH] [Table] Some Event Params Features (#706) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(notification): 插件调用与函数式调用 * fix(table): merged cells border style * fix(table): pagination * fix(table): add default width for table-layout: auto * fix(table): support ellipsis for safari browser * fix(table): add rowKey validate * fix(table): improve ellipsis * feat(table): toggleExpandData * fix(table): rowValue could be 0 * docs(table): update documents * fix(table): dragSort rowKey * fix(table): 去掉非必要的 col width * fix(table): selectedRowKeys * feat: update common & update docs * fix(table): rowClass * docs: deprecated map-props * refactor(table): code improve * feat(table): add event params * refactor(table): drag-sort * feat(table): remove dragSort=drag-col * feat(table): 全局配置 * docs(config-provider): 添加全局配置示例 * feat(config-provider): update docs * feat(table): 无内置按钮场景下的列配置 * fix(table): rowClassName * refactor(table): 整理懒加载代码 * feat: update common * feat: update common Co-authored-by: sheepluo --- examples/checkbox/checkbox.md | 14 +- examples/config-provider/config-provider.md | 267 +- examples/config-provider/demos/global.vue | 28 + examples/table/demos/custom-col-button.vue | 115 + examples/table/demos/custom-col.vue | 29 +- examples/table/demos/drag-col-sort.vue | 92 +- examples/table/demos/drag-sort.vue | 92 +- examples/table/demos/lazy.vue | 9 +- examples/table/demos/tree.vue | 2 +- examples/table/table.md | 36 +- map-props.md | 2 +- src/_common | 2 +- src/checkbox/checkbox-group-props.ts | 3 +- src/checkbox/group.tsx | 2 + src/checkbox/props.ts | 6 +- src/checkbox/type.ts | 9 +- src/config-provider/context.ts | 7 +- src/config-provider/index.ts | 2 +- src/config-provider/type.ts | 615 +- src/config-provider/useConfig.tsx | 8 +- src/config-provider/zh_CN_config.ts | 9 + src/hooks/render-tnode.ts | 8 +- src/hooks/tnode.ts | 8 +- src/table/base-table-props.ts | 6 +- src/table/base-table.tsx | 14 +- src/table/ellipsis.tsx | 23 +- src/table/filter-controller.tsx | 7 +- src/table/hooks/tree-store.ts | 6 +- src/table/hooks/useClassName.ts | 6 +- src/table/hooks/useColumnController.tsx | 113 +- src/table/hooks/useDragSort.ts | 29 +- src/table/hooks/useFilter.tsx | 27 +- src/table/hooks/useLazyLoad.ts | 45 + src/table/hooks/useRowSelect.tsx | 12 +- src/table/interface.ts | 2 - src/table/primary-table-props.ts | 28 +- src/table/primary-table.tsx | 101 +- src/table/tbody.tsx | 27 +- src/table/tr.tsx | 125 +- src/table/type.ts | 81 +- src/table/utils.ts | 14 + src/utils/render-tnode.ts | 10 +- test/ssr/__snapshots__/ssr.test.js.snap | 538 +- .../table/__snapshots__/demo.test.js.snap | 5383 +++++++++++------ 44 files changed, 5094 insertions(+), 2868 deletions(-) create mode 100644 examples/config-provider/demos/global.vue create mode 100644 examples/table/demos/custom-col-button.vue create mode 100644 src/table/hooks/useLazyLoad.ts diff --git a/examples/checkbox/checkbox.md b/examples/checkbox/checkbox.md index 24e916cb3..795d533cc 100644 --- a/examples/checkbox/checkbox.md +++ b/examples/checkbox/checkbox.md @@ -8,13 +8,13 @@ checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N checked | Boolean | false | 是否选中。支持语法糖 `v-model` | N defaultChecked | Boolean | false | 是否选中。非受控属性 | N -default | String / Slot / Function | - | 复选框内容，同 label。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 多选框内容，同 label。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | undefined | 是否禁用组件 | N indeterminate | Boolean | false | 是否为半选 | N label | String / Slot / Function | - | 主文案。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N name | String | - | HTML 元素原生属性 | N -readonly | Boolean | false | 组件是否只读 | N -value | String / Number | - | 复选框的值。TS 类型：`string | number` | N +readonly | Boolean | false | 只读状态 | N +value | String / Number | - | 多选框的值。TS 类型：`string | number` | N onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
值变化时触发 | N ### Checkbox Events @@ -31,12 +31,12 @@ disabled | Boolean | false | 是否禁用组件 | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string | number | CheckboxOptionObj` `interface CheckboxOptionObj { label?: string | TNode; value?: string | number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N -value | Array | undefined | 选中值。支持语法糖 `v-model`。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N -defaultValue | Array | undefined | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N -onChange | Function | | TS 类型：`(value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void`
值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
| N +value | Array | [] | 选中值。支持语法糖 `v-model`。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts) | N +onChange | Function | | TS 类型：`(value: CheckboxGroupValue, context: CheckboxGroupChangeContext) => void`
值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
| N ### CheckboxGroup Events 名称 | 参数 | 描述 -- | -- | -- -change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
+change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
diff --git a/examples/config-provider/config-provider.md b/examples/config-provider/config-provider.md index f3d6143eb..c8d2aa7c4 100644 --- a/examples/config-provider/config-provider.md +++ b/examples/config-provider/config-provider.md @@ -7,7 +7,7 @@ -- | -- | -- | -- | -- alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N -animation | Object | `{ include: ['ripple','expand','fade'], exclude: [] }` | 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。TS 类型：`Record<'include'|'exclude', Array> ` `type AnimationType = 'ripple' | 'expand' | 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +animation | Object | - | 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Record<'include'|'exclude', Array>` `type AnimationType = 'ripple' | 'expand' | 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N classPrefix | String | t | CSS 类名前缀 | N @@ -30,99 +30,76 @@ tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N -### InputConfig +### TreeConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -placeholder | String | 请输入 | 占位符文本 | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### PaginationConfig +### AnchorConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -itemsPerPage | String | '{size} 条/页' | 每页条数文本，示例：`'{ total } / page'` | N -jumpTo | String | '跳至' | 页码跳转文本，示例：'jump to' | N -page | String | '页' | “页”文本，示例：'page' | N -total | String | '共 {total} 项数据' | 数据总条数文本，示例：`'total { total }'` | N +copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N +copyText | String | - | 语言配置，“复制链接” 描述文本 | N -### CalendarConfig +### AlertConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -cellMonth | String | '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' | 语言配置，月份描述文本 | N -controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -fillWithZero | Boolean | true | 当日期数字小于 10 时，是否使用 '0' 填充 | N -firstDayOfWeek | Number | 1 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N -hideWeekend | String | '隐藏周末' | 语言配置，“隐藏周末”描述文本 | N -monthRadio | String | '月' | 语言配置，模式切换时的“月”描述文本 | N -monthSelection | String | '{month} 月' | 语言配置，"月"选择描述文本 | N -showWeekend | String | '显示周末末' | 语言配置，“显示周末”描述文本 | N -thisMonth | String | '本月' | 语言配置，“本月”描述文本 | N -today | String | '今天' | 语言配置，“今天”描述文本 | N -week | String | 一,二,三,四,五,六,日 | 语言配置，星期描述文本，示例：'周一,周二,周三,周四,周五,周六,周日' | N -yearRadio | String | '年' | 语言配置，模式切换时的“年”描述文本 | N -yearSelection | String | '{year} 年' | 语言配置，“年”选择描述文本 | N +collapseText | String | - | 语言配置，“收起”描述文本 | N +expandText | String | - | 语言配置，“展开更多”描述文本 | N -### CascaderConfig +### ListConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | '暂无数据' | 空数据文本，示例：'empty data' | N -loadingText | String | '加载中' | “加载中”描述文本 | N -placeholder | String | '请选择' | 选择器占位文本，示例：'select time' | N +loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N +loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N -### ColorPickerConfig +### CascaderConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -clearConfirmText | String | '确定清空最近使用的颜色吗？' | 清空颜色确认文案，示例：'确定清空最近使用的颜色吗？' | N -recentColorTitle | String | '最近使用颜色' | 最近使用颜色区域标题文本，示例：'最近使用颜色' | N -swatchColorTitle | String | '系统预设颜色' | 系统预设颜色区域标题文本，示例：'系统预设颜色' | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位描述文本 | N -### TransferConfig +### CalendarConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | '暂无数据' | 空数据描述文本 | N -placeholder | String | '请输入关键词搜索' | 占位符描述文本 | N -title | String | '{checked} / {total} 项' | 穿梭框标题描述文本 | N +cellMonth | String | - | 语言配置，月份描述文本，示例：'一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' | N +controllerConfig | Object | - | 日历右上角控制器按钮配置。TS 类型：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +fillWithZero | Boolean | true | 当日期数字小于 10 时，是否使用 '0' 填充 | N +firstDayOfWeek | Number | 1 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N +hideWeekend | String | - | 语言配置，“隐藏周末”描述文本 | N +monthRadio | String | - | 语言配置，模式切换时的“月”描述文本 | N +monthSelection | String | - | 语言配置，"月"选择描述文本。示例：`'{month} 月'` | N +showWeekend | String | - | 语言配置，“显示周末”描述文本 | N +thisMonth | String | - | 语言配置，“本月”描述文本 | N +today | String | - | 语言配置，“今天”描述文本 | N +week | String | - | 语言配置，星期描述文本，示例：`'周一,周二,周三,周四,周五,周六,周日'` | N +yearRadio | String | - | 语言配置，模式切换时的“年”描述文本 | N +yearSelection | String | - | 语言配置，“年”选择描述文本，示例：`'{year} 年'` | N -### TimePickerConfig +### UploadConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -anteMeridiem | String | '上午' | 语言配置，“上午”描述文本 | N -confirm | String | '确定' | 语言配置，“确定”描述文本 | N -now | String | '此刻' | 语言配置，“此刻”描述文本 | N -placeholder | String | '请选择时间' | 语言配置，占位符描述文本 | N -postMeridiem | String | '下午' | 语言配置，“下午”描述文本 | N +cancelUploadText | String | - | 语言配置，“取消上传” 描述文本 | N +dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N +file | Object | - | 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N +progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N +sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N +triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -### DatePickerConfig +### InputConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -confirm | String | '确定' | “确定” 描述文本 | N -dayAriaLabel | String | '日' | “日” 描述文本 | N -direction | String | 'ltr' | 日期方向，'ltr' 表示从左往右 | N -firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N -format | String | 'YYYY-MM-DD' | 日期格式化规则 | N -monthAriaLabel | String | '月' | “月” 描述文本 | N -months | Array | - | 星期文本描述，默认值：['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']。TS 类型：`string[]` | N -nextDecade | String | '下个十年' | “下个十年” 描述文本 | N -nextMonth | String | '下个月' | “下个月” 描述文本 | N -nextYear | String | '下一年' | “下一年” 描述文本 | N -now | String | '此刻' | “now” 描述文本 | N -placeholder | Object | - | 占位符文本提示，默认值：`{ date: '请选择日期', month: '请选择月份', year: '请选择年份' }`。TS 类型：`{ date?: string; month?: string; year?: string }` | N -preDecade | String | '上个十年' | “上个十年” 描述文本 | N -preMonth | String | '上个月' | “上个月” 描述文本 | N -presets | Object | - | 【暂不支持，讨论确认中】预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue | (() => DateConfigValue) }` `type DateConfigValue = string | Date | Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -preYear | String | '上一年' | “上一年” 描述文本 | N -rangeSeparator | String | ' 至 ' | 范围分隔符描述文本，示例：' ~ ' | N -selectDate | String | '选择日期' | “选择日期” 描述文本 | N -selectTime | String | '选择时间' | “选择时间” 描述文本 | N -weekAbbreviation | String | '周' | “周” 描述文本 | N -weekdays | Object | - | 星期文本描述，默认值：['日', '一', '二', '三', '四', '五', '六']。TS 类型：`string[]` | N -yearAriaLabel | String | '年' | “年” 描述文本 | N +placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N ### DialogConfig @@ -136,129 +113,161 @@ confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -cancel | String | '取消' | “取消”描述文本。TS 类型：`string | ButtonProps` | N -confirm | String | '确认' | “确认”描述文本。TS 类型：`string | ButtonProps` | N +cancel | String | - | 语言配置，“取消”描述文本。TS 类型：`string | ButtonProps` | N +confirm | String | - | 语言配置，“确认”描述文本。TS 类型：`string | ButtonProps` | N -### PopconfirmConfig +### FormConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -cancel | String / Object | '取消' | “取消”描述文本。TS 类型：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -confirm | String / Object | '确定' | “确定”描述文本。TS 类型：`string | ButtonProps` | N -confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N +errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N -### TableConfig +### DatePickerConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String / Slot / Function | '暂无数据' | 语言配置，'暂无数据' 描述文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -loadingMoreText | String | '点击加载更多' | 语言配置，'点击加载更多' 描述文本 | N -loadingText | String | '正在加载中，请稍后' | 语言配置，'正在加载中，请稍后' 描述文本 | N -sortAscendingOperationText | String | '点击升序' | 语言配置，'点击升序' 描述文本 | N -sortCancelOperationText | String | '点击取消排序' | 语言配置，'点击取消排序' 描述文本 | N -sortDescendingOperationText | String | '点击降序' | 语言配置，'点击降序' 描述文本 | N -sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +confirm | String | - | 语言配置，“确定” 描述文本 | N +dayAriaLabel | String | - | 语言配置，“日” 描述文本 | N +direction | String | 'ltr' | 日期方向，'ltr' 表示从左往右 | N +firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N +format | String | 'YYYY-MM-DD' | 日期格式化规则 | N +monthAriaLabel | String | - | 语言配置，“月” 描述文本 | N +months | Array | - | 星期文本描述，默认值：['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']。TS 类型：`string[]` | N +nextDecade | String | - | 语言配置，“下个十年” 描述文本 | N +nextMonth | String | - | 语言配置，“下个月” 描述文本 | N +nextYear | String | - | 语言配置，“下一年” 描述文本 | N +now | String | - | 语言配置，“此刻” 描述文本 | N +placeholder | Object | - | 占位符文本提示，默认值：`{ date: '请选择日期', month: '请选择月份', year: '请选择年份' }`。TS 类型：`{ date?: string; month?: string; year?: string }` | N +preDecade | String | - | 语言配置，“上个十年” 描述文本 | N +preMonth | String | - | 语言配置，“上个月” 描述文本 | N +presets | Object | - | 【暂不支持，讨论确认中】预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`ConfigPresetDate` `interface ConfigPresetDate { [name: string]: DateConfigValue | (() => DateConfigValue) }` `type DateConfigValue = string | Date | Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +preYear | String | - | 语言配置，“上一年” 描述文本 | N +rangeSeparator | String | - | 语言配置，“ 至 ” 范围分隔符描述文本，示例：' ~ ' | N +selectDate | String | - | 语言配置，“选择日期” 描述文本 | N +selectTime | String | - | 语言配置，“选择时间” 描述文本 | N +weekAbbreviation | String | - | 语言配置，“周” 描述文本 | N +weekdays | Object | - | 星期文本描述，默认值：['日', '一', '二', '三', '四', '五', '六']。TS 类型：`string[]` | N +yearAriaLabel | String | - | 语言配置，“年” 描述文本 | N -### SelectConfig +### ColorPickerConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -empty | String | '暂无数据' | “暂无数据”描述文本 | N -loadingText | String | '加载中' | “加载中”描述文本 | N -placeholder | String | '请选择' | 占位符描述文本 | N +clearConfirmText | String | - | 语言配置，“确定清空最近使用的颜色吗？”清空颜色确认文案 | N +recentColorTitle | String | - | 语言配置，“最近使用颜色” 区域标题文本 | N +swatchColorTitle | String | - | 语言配置，"系统预设颜色" 区域标题文本 | N -### TreeConfig +### PaginationConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | '暂无数据' | “暂无数据”描述文本 | N -folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N +jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N +page | String | - | 语言配置，“页”描述文本 | N +total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N -### TreeSelectConfig +### SelectConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | '暂无数据' | “暂无数据”描述文本 | N -loadingText | String | '加载中' | “加载中”描述文本 | N -placeholder | String | '请选择' | 占位符描述文本 | N +clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### TreeSelectConfig +### PopconfirmConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -loadingMoreText | String | '点击加载更多' | 语言配置，'点击加载更多' 描述文本 | N -loadingText | String | '正在加载中，请稍后' | 语言配置，'正在加载中，请稍后' 描述文本 | N +cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类型：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string | ButtonProps` | N +confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N -### UploadConfig +### StepsConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -cancelUploadText | String | '取消上传' | 语言配置，“取消上传” 描述文本 | N -dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N -file | Object | - | 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N -progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N -sizeLimitMessage | String | '文件大小不能超过 {sizeLimit}' | 语言配置，文件大小超出限制时提醒文本 | N -triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### UploadConfigProgress +### TableConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -failText | String | '上传失败' | 语言配置，“上传失败”文本描述 | N -successText | String | '上传成功' | 语言配置，“上传成功”文本描述 | N -uploadingText | String | '上传中' | 语言配置，“上传中”文本描述 | N -waitingText | String | '待上传' | 语言配置，“待上传”文本描述 | N +cancelText | String | - | 语言配置，“取消” 描述文本 | N +clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N +columnConfigButtonText | String | - | 语言配置，列配置功能中，“列配置” 按钮描述文本 | N +columnConfigDescriptionText | String | - | 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述 | N +columnConfigTitleText | String | - | 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 | N +confirmText | String | - | 语言配置，“确认” 描述文本 | N +empty | String / Slot / Function | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loadingMoreText | String | - | 语言配置，“点击加载更多” 描述文本 | N +loadingText | String | - | 语言配置，“正在加载中，请稍后” 描述文本 | N +resetText | String | - | 语言配置，“重置” 描述文本 | N +searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N +selectAllText | String | - | 语言配置，'全选' 描述文本 | N +sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N +sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N +sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N +sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，组件会内置默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### UploadConfigDragger +### TagConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -clickAndDragText | String | '点击上方“选择文件”或将文件拖到此区域' | 语言配置，'点击上方“选择文件”或将文件拖到此区域' 描述文本 | N -dragDropText | String | '释放图标' | 语言配置，'释放图标' 描述文本 | N -draggingText | String | '拖拽到此区域' | 语言配置，'拖拽到此区域' 描述文本 | N +closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### UploadConfigFileList +### TimePickerConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -fileNameText | String | '文件名' | 语言配置，'文件名' 描述文本 | N -fileOperationDateText | String | '上传日期' | 语言配置，'上传日期' 描述文本 | N -fileOperationText | String | '操作' | 语言配置，'操作' 描述文本 | N -fileSizeText | String | '文件尺寸' | 语言配置，'文件尺寸' 描述文本 | N -fileStatusText | String | '状态' | 语言配置，'状态' 描述文本 | N +anteMeridiem | String | - | 语言配置，“上午”描述文本 | N +confirm | String | - | 语言配置，“确定”描述文本 | N +now | String | - | 语言配置，“此刻”描述文本 | N +placeholder | String | - | 语言配置，"请选择时间"占位符描述文本 | N +postMeridiem | String | - | 语言配置，“下午”描述文本 | N -### FormConfig +### TransferConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N +empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N +placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N +title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N -### TagConfig +### TreeSelectConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### StepsConfig +### UploadConfigDragger 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N +dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N +draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N -### AlertConfig +### UploadConfigFileList 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -collapseText | String | 收起 | 收起提示文本 | N -expandText | String | 展开更多 | 展开提示文本 | N +fileNameText | String | - | 语言配置，“文件名” 描述文本 | N +fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N +fileOperationText | String | - | 语言配置，“操作” 描述文本 | N +fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N +fileStatusText | String | - | 语言配置，“状态” 描述文本 | N -### AnchorConfig +### UploadConfigProgress 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -copySuccessText | String | 链接复制成功 | 复制成功文字 | N -copyText | String | 复制链接 | 复制提示文字 | N +failText | String | - | 语言配置，“上传失败”文本描述 | N +successText | String | - | 语言配置，“上传成功”文本描述 | N +uploadingText | String | - | 语言配置，“上传中”文本描述 | N +waitingText | String | - | 语言配置，“待上传”文本描述 | N diff --git a/examples/config-provider/demos/global.vue b/examples/config-provider/demos/global.vue new file mode 100644 index 000000000..8bb3e7daf --- /dev/null +++ b/examples/config-provider/demos/global.vue @@ -0,0 +1,28 @@ + + + diff --git a/examples/table/demos/custom-col-button.vue b/examples/table/demos/custom-col-button.vue new file mode 100644 index 000000000..2c1e581ad --- /dev/null +++ b/examples/table/demos/custom-col-button.vue @@ -0,0 +1,115 @@ + + diff --git a/examples/table/demos/custom-col.vue b/examples/table/demos/custom-col.vue index 42fdcd34c..050e638b1 100644 --- a/examples/table/demos/custom-col.vue +++ b/examples/table/demos/custom-col.vue @@ -1,25 +1,35 @@ - diff --git a/examples/table/demos/drag-sort.vue b/examples/table/demos/drag-sort.vue index cba6ab940..a5a42fefe 100644 --- a/examples/table/demos/drag-sort.vue +++ b/examples/table/demos/drag-sort.vue @@ -3,7 +3,7 @@
- + diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue index 0726f3092..9deef301d 100644 --- a/examples/table/demos/tree.vue +++ b/examples/table/demos/tree.vue @@ -2,7 +2,7 @@
重置数据 - 展开/收起可见行 + 展开/收起可见行

diff --git a/examples/table/table.md b/examples/table/table.md index 7f9419d6b..5a50d7f8b 100644 --- a/examples/table/table.md +++ b/examples/table/table.md @@ -6,6 +6,7 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- bordered | Boolean | false | 是否显示表格边框 | N +bottomContent | String / Slot / Function | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页 | N @@ -31,7 +32,7 @@ size | String | medium | 表格尺寸。可选项：small/medium/large。TS 类 stripe | Boolean | false | 是否显示斑马纹 | N tableContentWidth | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N tableLayout | String | fixed | 表格布局方式。可选项：auto/fixed | N -topContent | String / Slot / Function | - | 表格顶部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +topContent | String / Slot / Function | - | 表格顶部内容，可以用于自定义列设置、顶部查询条件等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onPageChange | Function | | TS 类型：`(pageInfo: PageInfo, newDataSource: Array) => void`
分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | N @@ -85,12 +86,13 @@ width | String / Number | - | 列宽，可以作为最小宽度使用。当列 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- asyncLoading | String / Slot / Function | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -columnController | Object | - | 自定义显示列控制器，值为空不会显示。
`columnController.fields` 表示只允许用户对数组里面的列进行显示或隐藏的控制，默认为全部字段。
`columnController.displayType` 是指字段呈现方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐，默认为 `auto-width`。
支持透传 CheckboxGroup 和 Dialog 组件等全部属性。TS 类型：`TableColumnController` `interface TableColumnController { fields?: string[]; displayType: 'fixed-width' | 'auto-width'; checkboxProps?: CheckboxGroupProps; dialogProps?: DialogProps }` `import { CheckboxGroupProps } from '@Checkbox'`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N -columnControllerContent | String / Slot / Function | - | 【讨论中】自定义显示列控制器的内容呈现，可以填充任意内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +columnController | Object | - | 自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档。TS 类型：`TableColumnController` | N +columnControllerVisible | Boolean | undefined | 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制。支持语法糖 `.sync` | N +defaultColumnControllerVisible | Boolean | undefined | 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制。非受控属性 | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N displayColumns | Array | - | 列配置功能中，当前显示的列。支持语法糖 `.sync`。TS 类型：`CheckboxGroupValue` | N defaultDisplayColumns | Array | - | 列配置功能中，当前显示的列。非受控属性。TS 类型：`CheckboxGroupValue` | N -dragSort | String | drag-col | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`drag-col` 表示通过专门的 拖拽列 进行拖拽排序。可选项：row/drag-col | N +dragSort | String | col | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用。可选项：row/col/drag-col | N expandedRow | String / Slot / Function | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] | BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N expandedRowKeys | Array | [] | 展开行。支持语法糖 `.sync`。TS 类型：`Array` | N defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array` | N @@ -106,14 +108,15 @@ defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属 sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。支持语法糖 `.sync`。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N sortIcon | Slot / Function | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序 | N +sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序。请更为使用 `dragSort="row"` | N `Omit, 'columns'>` | - | - | 继承 `Omit, 'columns'>` 中的全部 API | N onAsyncLoadingClick | Function | | TS 类型：`(context: { status: 'loading' | 'load-more' }) => void`
异步加载区域被点击时触发 | N onCellClick | Function | | TS 类型：`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
| N -onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
【开发中】列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck' }`

`import { CheckboxGroupValue } from '@Checkbox'`
| N +onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; e?: Event }`
| N +onColumnControllerVisibleChange | Function | | TS 类型：`(visible: boolean, context: { trigger: 'cancel' | 'confirm' }) => void`
列配置弹窗显示或隐藏变化时触发 | N onDataChange | Function | | TS 类型：`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N -onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
列配置选中列发生变化时触发 | N +onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent }`

`import { SortableEvent } from 'sortablejs'`
| N onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array }`
| N onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型 | N @@ -127,9 +130,10 @@ onSortChange | Function | | TS 类型：`(sort: TableSort, options: SortOptions async-loading-click | `(context: { status: 'loading' | 'load-more' })` | 异步加载区域被点击时触发 cell-click | `(context: PrimaryTableCellEventContext)` | 单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
change | `(data: TableChangeData, context: TableChangeContext)` | 分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
-column-change | `(context: PrimaryTableColumnChange)` | 【开发中】列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck' }`

`import { CheckboxGroupValue } from '@Checkbox'`
+column-change | `(context: PrimaryTableColumnChange)` | 确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; e?: Event }`
+column-controller-visible-change | `(visible: boolean, context: { trigger: 'cancel' | 'confirm' })` | 列配置弹窗显示或隐藏变化时触发 data-change | `(data: Array, context: TableDataChangeContext)` | 本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
-display-columns-change | `(value: CheckboxGroupValue)` | 列配置选中列发生变化时触发 +display-columns-change | `(value: CheckboxGroupValue)` | 确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
drag-sort | `(context: DragSortContext)` | 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent }`

`import { SortableEvent } from 'sortablejs'`
expand-change | `(expandedRowKeys: Array, options: ExpandOptions)` | 展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array }`
filter-change | `(filterValue: FilterValue, context: { col?: PrimaryTableCol })` | 过滤参数发生变化时触发，泛型 T 指表格数据类型 @@ -199,6 +203,18 @@ type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选 -- | -- | -- | -- | -- bufferSize | Number | 20 | 表示表格除可视区域外，额外渲染的行数，避免表格快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N isFixedRowHeight | Boolean | false | 表示表格每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N -rowHeight | Number | - | 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。
`scroll.type` 为 `lazy` 时，`rowHeight` 用于给未渲染的行节点指定一个初始高度，该属性默认会设置为表格第一行的行高（滚动加载行数量 = 滚动距离 / rowHeight）。
`scroll.type` 为 `virtual` 时，`rowHeight` 用于估算每行的大致高度，从而决定应该渲染哪些行，请尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 | N +rowHeight | Number | - | 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 | N threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 | N type | String | - | 必需。表格滚动加载类型，有两种：懒加载和虚拟滚动。
值为 `lazy` ，表示表格滚动时会进行懒加载，非可视区域内的表格内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；
值为`virtual`时，表示表格会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，表格仅渲染该可视区域内的表格内容，当表格需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y + +### TableColumnController + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +buttonProps | Object | - | 自定义列配置按钮，包括 Button 组件的全部属性。比如：按钮颜色和文本。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +checkboxProps | Object | - | 透传复选框组件全部特性。TS 类型：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +dialogProps | Object | - | 透传弹框组件全部特性，如：防止滚动穿透。TS 类型：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N +displayType | String | auto-width | 指列配置弹框中，各列的字段平铺方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐。可选项：fixed-width/auto-width | N +fields | Array | - | 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段。TS 类型：`string[]` | N +hideTriggerButton | Boolean | false | 是否隐藏表格组件内置的“列配置”按钮 | N +placement | String | top-right | 列配置按钮基于表格的放置位置：左上角、右上角、左下角、右下角等。可选项：top-left/top-right/bottom-left/bottom-right | N diff --git a/map-props.md b/map-props.md index 026090998..4ea6de073 100644 --- a/map-props.md +++ b/map-props.md @@ -1,4 +1,4 @@ -## 高阶组件 map-props 使用说明 +## 【已废弃】高阶组件 map-props 使用说明 属性值应该是受控的，如果用户提供了某个属性，那组件状态应该永远与该属性值对应。 diff --git a/src/_common b/src/_common index 6c7d8b4d7..273179e94 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 6c7d8b4d79cf3c2b181de70554dc42d970d85966 +Subproject commit 273179e94f630c39a966f348c7a173bba2e5474c diff --git a/src/checkbox/checkbox-group-props.ts b/src/checkbox/checkbox-group-props.ts index 7bc46a4f2..1a22a8ca8 100644 --- a/src/checkbox/checkbox-group-props.ts +++ b/src/checkbox/checkbox-group-props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 15:52:27 * */ import { TdCheckboxGroupProps } from '../checkbox/type'; @@ -36,6 +35,6 @@ export default { type: Array as PropType, default: (): TdCheckboxGroupProps['defaultValue'] => [], }, - /** 值变化时触发 */ + /** 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中 */ onChange: Function as PropType, }; diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx index 454de0d54..33acff1f5 100644 --- a/src/checkbox/group.tsx +++ b/src/checkbox/group.tsx @@ -164,6 +164,7 @@ export default Vue.extend({ this.emitChange(val, { e: data.e, current: data.option.value, + option: data.option, type: data.checked ? 'check' : 'uncheck', }); } else { @@ -186,6 +187,7 @@ export default Vue.extend({ e: context.e, type: checked ? 'check' : 'uncheck', current: undefined, + option: undefined, }); }, }, diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts index 6d0e56e72..d93bd0257 100644 --- a/src/checkbox/props.ts +++ b/src/checkbox/props.ts @@ -14,7 +14,7 @@ export default { checked: Boolean, /** 是否选中，非受控属性 */ defaultChecked: Boolean, - /** 复选框内容，同 label */ + /** 多选框内容，同 label */ default: { type: [String, Function] as PropType, }, @@ -34,9 +34,9 @@ export default { type: String, default: '', }, - /** 组件是否只读 */ + /** 只读状态 */ readonly: Boolean, - /** 复选框的值 */ + /** 多选框的值 */ value: { type: [String, Number] as PropType, }, diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index c1ac31d52..05674577c 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -23,7 +23,7 @@ export interface TdCheckboxProps { */ defaultChecked?: boolean; /** - * 复选框内容，同 label + * 多选框内容，同 label */ default?: string | TNode; /** @@ -45,12 +45,12 @@ export interface TdCheckboxProps { */ name?: string; /** - * 组件是否只读 + * 只读状态 * @default false */ readonly?: boolean; /** - * 复选框的值 + * 多选框的值 */ value?: string | number; /** @@ -109,6 +109,7 @@ export type CheckboxGroupValue = Array; export interface CheckboxGroupChangeContext { e: Event; - current: CheckboxOption | TdCheckboxProps; + current: string | number; + option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck'; } diff --git a/src/config-provider/context.ts b/src/config-provider/context.ts index 21fdfa263..21d6958ca 100644 --- a/src/config-provider/context.ts +++ b/src/config-provider/context.ts @@ -1,6 +1,7 @@ import merge from 'lodash/merge'; import defaultConfig from '../_common/js/global-config/default-config'; import defaultZhCN from '../_common/js/global-config/locale/zh_CN'; +import { GlobalConfigProvider } from './type'; export enum EAnimationType { ripple = 'ripple', @@ -8,7 +9,9 @@ export enum EAnimationType { fade = 'fade', } -export const defaultGlobalConfig = merge(defaultConfig, defaultZhCN); +export const defaultGlobalConfig: GlobalConfigProvider = merge(defaultConfig, defaultZhCN); export type Locale = typeof defaultZhCN; -export type GlobalConfig = typeof defaultGlobalConfig; + +// 导出全局配置（包括语言配置）全部类型 +export * from './type'; diff --git a/src/config-provider/index.ts b/src/config-provider/index.ts index 8745fb321..9c0b892dd 100644 --- a/src/config-provider/index.ts +++ b/src/config-provider/index.ts @@ -4,7 +4,7 @@ import _ConnfigProvider from './config-provider'; export * from './type'; export * from './useConfig'; -export type { GlobalConfig, Locale } from './context'; +export type { Locale } from './context'; export const ConnfigProvider = withInstall(_ConnfigProvider); export default ConnfigProvider; diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index b716ab262..2ee5d9857 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -19,8 +19,7 @@ export interface GlobalConfigProvider { */ anchor?: AnchorConfig; /** - * 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画 - * @default `{ include: ['ripple','expand','fade'], exclude: [] }` + * 动画效果控制，`ripple`指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }` */ animation?: Record<'include' | 'exclude', Array>; /** @@ -110,41 +109,79 @@ export interface GlobalConfigProvider { upload?: UploadConfig; } -export interface InputConfig { +export interface TreeConfig { /** - * 占位符文本 - * @default 请输入 + * 语言配置，“暂无数据”描述文本 + * @default '' */ - placeholder?: string; + empty?: string; + /** + * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件 + */ + folderIcon?: TNode; } -export interface PaginationConfig { +export interface AnchorConfig { /** - * 每页条数文本，示例：`'{ total } / page'` - * @default '{size} 条/页' + * 语言配置，“链接复制成功”描述文本 + * @default '' */ - itemsPerPage?: string; + copySuccessText?: string; /** - * 页码跳转文本，示例：'jump to' - * @default '跳至' + * 语言配置，“复制链接” 描述文本 + * @default '' */ - jumpTo?: string; + copyText?: string; +} + +export interface AlertConfig { /** - * “页”文本，示例：'page' - * @default '页' + * 语言配置，“收起”描述文本 + * @default '' */ - page?: string; + collapseText?: string; /** - * 数据总条数文本，示例：`'total { total }'` - * @default '共 {total} 项数据' + * 语言配置，“展开更多”描述文本 + * @default '' */ - total?: string; + expandText?: string; +} + +export interface ListConfig { + /** + * 语言配置，'点击加载更多' 描述文本 + * @default '' + */ + loadingMoreText?: string; + /** + * 语言配置，'正在加载中，请稍后' 描述文本 + * @default '' + */ + loadingText?: string; +} + +export interface CascaderConfig { + /** + * 语言配置，“暂无数据”描述文本 + * @default '' + */ + empty?: string; + /** + * 语言配置，“加载中”描述文本 + * @default '' + */ + loadingText?: string; + /** + * 语言配置，“请选择”占位描述文本 + * @default '' + */ + placeholder?: string; } export interface CalendarConfig { /** - * 语言配置，月份描述文本 - * @default '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' + * 语言配置，月份描述文本，示例：'一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月' + * @default '' */ cellMonth?: string; /** @@ -163,142 +200,137 @@ export interface CalendarConfig { firstDayOfWeek?: number; /** * 语言配置，“隐藏周末”描述文本 - * @default '隐藏周末' + * @default '' */ hideWeekend?: string; /** * 语言配置，模式切换时的“月”描述文本 - * @default '月' + * @default '' */ monthRadio?: string; /** - * 语言配置，"月"选择描述文本 - * @default '{month} 月' + * 语言配置，"月"选择描述文本。示例：`'{month} 月'` + * @default '' */ monthSelection?: string; /** * 语言配置，“显示周末”描述文本 - * @default '显示周末末' + * @default '' */ showWeekend?: string; /** * 语言配置，“本月”描述文本 - * @default '本月' + * @default '' */ thisMonth?: string; /** * 语言配置，“今天”描述文本 - * @default '今天' + * @default '' */ today?: string; /** - * 语言配置，星期描述文本，示例：'周一,周二,周三,周四,周五,周六,周日' - * @default 一,二,三,四,五,六,日 + * 语言配置，星期描述文本，示例：`'周一,周二,周三,周四,周五,周六,周日'` + * @default '' */ week?: string; /** * 语言配置，模式切换时的“年”描述文本 - * @default '年' + * @default '' */ yearRadio?: string; /** - * 语言配置，“年”选择描述文本 - * @default '{year} 年' + * 语言配置，“年”选择描述文本，示例：`'{year} 年'` + * @default '' */ yearSelection?: string; } -export interface CascaderConfig { +export interface UploadConfig { /** - * 空数据文本，示例：'empty data' - * @default '暂无数据' + * 语言配置，“取消上传” 描述文本 + * @default '' */ - empty?: string; + cancelUploadText?: string; /** - * “加载中”描述文本 - * @default '加载中' + * 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' } */ - loadingText?: string; + dragger?: UploadConfigDragger; /** - * 选择器占位文本，示例：'select time' - * @default '请选择' + * 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' } */ - placeholder?: string; -} - -export interface ColorPickerConfig { + file?: UploadConfigFileList; /** - * 清空颜色确认文案，示例：'确定清空最近使用的颜色吗？' - * @default '确定清空最近使用的颜色吗？' + * 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' } */ - clearConfirmText?: string; + progress?: UploadConfigProgress; /** - * 最近使用颜色区域标题文本，示例：'最近使用颜色' - * @default '最近使用颜色' + * 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` + * @default '' */ - recentColorTitle?: string; + sizeLimitMessage?: string; /** - * 系统预设颜色区域标题文本，示例：'系统预设颜色' - * @default '系统预设颜色' + * 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' } */ - swatchColorTitle?: string; + triggerUploadText?: UploadTriggerUploadText; } -export interface TransferConfig { +export interface InputConfig { /** - * 空数据描述文本 - * @default '暂无数据' + * 语言配置，“请输入”占位符描述文本 + * @default '' */ - empty?: string; + placeholder?: string; +} + +export interface DialogConfig { /** - * 占位符描述文本 - * @default '请输入关键词搜索' + * 取消按钮风格 */ - placeholder?: string; + cancel?: string | ButtonProps; /** - * 穿梭框标题描述文本 - * @default '{checked} / {total} 项' + * 确认按钮风格 */ - title?: string; -} - -export interface TimePickerConfig { + confirm?: string | ButtonProps; /** - * 语言配置，“上午”描述文本 - * @default '上午' + * 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' } */ - anteMeridiem?: string; + confirmBtnTheme?: { default: string; info: string; warning: string; danger: string; success: string }; +} + +export interface DrawerConfig { /** - * 语言配置，“确定”描述文本 - * @default '确定' + * 语言配置，“取消”描述文本 + * @default '' */ - confirm?: string; + cancel?: string | ButtonProps; /** - * 语言配置，“此刻”描述文本 - * @default '此刻' + * 语言配置，“确认”描述文本 + * @default '' */ - now?: string; + confirm?: string | ButtonProps; +} + +export interface FormConfig { /** - * 语言配置，占位符描述文本 - * @default '请选择时间' + * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` */ - placeholder?: string; + errorMessage?: FormErrorMessage; /** - * 语言配置，“下午”描述文本 - * @default '下午' + * 是否显示必填符号（*），默认显示 + * @default true */ - postMeridiem?: string; + requiredMark?: boolean; } export interface DatePickerConfig { /** - * “确定” 描述文本 - * @default '确定' + * 语言配置，“确定” 描述文本 + * @default '' */ confirm?: string; /** - * “日” 描述文本 - * @default '日' + * 语言配置，“日” 描述文本 + * @default '' */ dayAriaLabel?: string; /** @@ -317,8 +349,8 @@ export interface DatePickerConfig { */ format?: string; /** - * “月” 描述文本 - * @default '月' + * 语言配置，“月” 描述文本 + * @default '' */ monthAriaLabel?: string; /** @@ -326,23 +358,23 @@ export interface DatePickerConfig { */ months?: string[]; /** - * “下个十年” 描述文本 - * @default '下个十年' + * 语言配置，“下个十年” 描述文本 + * @default '' */ nextDecade?: string; /** - * “下个月” 描述文本 - * @default '下个月' + * 语言配置，“下个月” 描述文本 + * @default '' */ nextMonth?: string; /** - * “下一年” 描述文本 - * @default '下一年' + * 语言配置，“下一年” 描述文本 + * @default '' */ nextYear?: string; /** - * “now” 描述文本 - * @default '此刻' + * 语言配置，“此刻” 描述文本 + * @default '' */ now?: string; /** @@ -350,13 +382,13 @@ export interface DatePickerConfig { */ placeholder?: { date?: string; month?: string; year?: string }; /** - * “上个十年” 描述文本 - * @default '上个十年' + * 语言配置，“上个十年” 描述文本 + * @default '' */ preDecade?: string; /** - * “上个月” 描述文本 - * @default '上个月' + * 语言配置，“上个月” 描述文本 + * @default '' */ preMonth?: string; /** @@ -364,28 +396,28 @@ export interface DatePickerConfig { */ presets?: ConfigPresetDate; /** - * “上一年” 描述文本 - * @default '上一年' + * 语言配置，“上一年” 描述文本 + * @default '' */ preYear?: string; /** - * 范围分隔符描述文本，示例：' ~ ' - * @default ' 至 ' + * 语言配置，“ 至 ” 范围分隔符描述文本，示例：' ~ ' + * @default '' */ rangeSeparator?: string; /** - * “选择日期” 描述文本 - * @default '选择日期' + * 语言配置，“选择日期” 描述文本 + * @default '' */ selectDate?: string; /** - * “选择时间” 描述文本 - * @default '选择时间' + * 语言配置，“选择时间” 描述文本 + * @default '' */ selectTime?: string; /** - * “周” 描述文本 - * @default '周' + * 语言配置，“周” 描述文本 + * @default '' */ weekAbbreviation?: string; /** @@ -393,49 +425,82 @@ export interface DatePickerConfig { */ weekdays?: string[]; /** - * “年” 描述文本 - * @default '年' + * 语言配置，“年” 描述文本 + * @default '' */ yearAriaLabel?: string; } -export interface DialogConfig { +export interface ColorPickerConfig { /** - * 取消按钮风格 + * 语言配置，“确定清空最近使用的颜色吗？”清空颜色确认文案 + * @default '' */ - cancel?: string | ButtonProps; + clearConfirmText?: string; /** - * 确认按钮风格 + * 语言配置，“最近使用颜色” 区域标题文本 + * @default '' */ - confirm?: string | ButtonProps; + recentColorTitle?: string; /** - * 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' } + * 语言配置，"系统预设颜色" 区域标题文本 + * @default '' */ - confirmBtnTheme?: { default: string; info: string; warning: string; danger: string; success: string }; + swatchColorTitle?: string; } -export interface DrawerConfig { +export interface PaginationConfig { /** - * “取消”描述文本 - * @default '取消' + * 语言配置，每页条数文本，示例：`'{size} 条/页'` + * @default '' */ - cancel?: string | ButtonProps; + itemsPerPage?: string; /** - * “确认”描述文本 - * @default '确认' + * 语言配置，页码跳转文本，示例：'跳至' + * @default '' */ - confirm?: string | ButtonProps; + jumpTo?: string; + /** + * 语言配置，“页”描述文本 + * @default '' + */ + page?: string; + /** + * 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` + * @default '' + */ + total?: string; +} + +export interface SelectConfig { + /** + * 清除图标，【注意】使用渲染函数输出图标组件 + */ + clearIcon?: TNode; + /** + * 语言配置，“暂无数据”描述文本 + * @default '' + */ + empty?: string; + /** + * 语言配置，“加载中”描述文本 + * @default '' + */ + loadingText?: string; + /** + * 语言配置，“请选择”占位符描述文本 + * @default '' + */ + placeholder?: string; } export interface PopconfirmConfig { /** - * “取消”描述文本 - * @default '取消' + * 语言配置，“取消”描述文本 */ cancel?: string | ButtonProps; /** - * “确定”描述文本 - * @default '确定' + * 语言配置，“确定”描述文本 */ confirm?: string | ButtonProps; /** @@ -444,10 +509,46 @@ export interface PopconfirmConfig { confirmBtnTheme?: { default: string; warning: string; danger: string }; } +export interface StepsConfig { + /** + * 错误步骤图标，【注意】使用渲染函数输出图标组件 + */ + errorIcon?: TNode; +} + export interface TableConfig { /** - * 语言配置，'暂无数据' 描述文本 - * @default '暂无数据' + * 语言配置，“取消” 描述文本 + * @default '' + */ + cancelText?: string; + /** + * 语言配置，过滤功能中，“清空筛选” 描述文本 + * @default '' + */ + clearFilterResultButtonText?: string; + /** + * 语言配置，列配置功能中，“列配置” 按钮描述文本 + * @default '' + */ + columnConfigButtonText?: string; + /** + * 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述 + * @default '' + */ + columnConfigDescriptionText?: string; + /** + * 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 + * @default '' + */ + columnConfigTitleText?: string; + /** + * 语言配置，“确认” 描述文本 + * @default '' + */ + confirmText?: string; + /** + * 语言配置，“暂无数据” 描述文本 */ empty?: string | TNode; /** @@ -459,28 +560,43 @@ export interface TableConfig { */ filterIcon?: TNode; /** - * 语言配置，'点击加载更多' 描述文本 - * @default '点击加载更多' + * 语言配置，“点击加载更多” 描述文本 + * @default '' */ loadingMoreText?: string; /** - * 语言配置，'正在加载中，请稍后' 描述文本 - * @default '正在加载中，请稍后' + * 语言配置，“正在加载中，请稍后” 描述文本 + * @default '' */ loadingText?: string; + /** + * 语言配置，“重置” 描述文本 + * @default '' + */ + resetText?: string; + /** + * 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' + * @default '' + */ + searchResultText?: string; + /** + * 语言配置，'全选' 描述文本 + * @default '' + */ + selectAllText?: string; /** * 语言配置，'点击升序' 描述文本 - * @default '点击升序' + * @default '' */ sortAscendingOperationText?: string; /** * 语言配置，'点击取消排序' 描述文本 - * @default '点击取消排序' + * @default '' */ sortCancelOperationText?: string; /** * 语言配置，'点击降序' 描述文本 - * @default '点击降序' + * @default '' */ sortDescendingOperationText?: string; /** @@ -489,229 +605,148 @@ export interface TableConfig { sortIcon?: TNode; } -export interface SelectConfig { - /** - * 清除图标，【注意】使用渲染函数输出图标组件 - */ - clearIcon?: TNode; - /** - * “暂无数据”描述文本 - * @default '暂无数据' - */ - empty?: string; - /** - * “加载中”描述文本 - * @default '加载中' - */ - loadingText?: string; +export interface TagConfig { /** - * 占位符描述文本 - * @default '请选择' + * 关闭图标，【注意】使用渲染函数输出图标组件 */ - placeholder?: string; + closeIcon?: TNode; } -export interface TreeConfig { - /** - * “暂无数据”描述文本 - * @default '暂无数据' - */ - empty?: string; +export interface TimePickerConfig { /** - * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件 + * 语言配置，“上午”描述文本 + * @default '' */ - folderIcon?: TNode; -} - -export interface TreeSelectConfig { + anteMeridiem?: string; /** - * “暂无数据”描述文本 - * @default '暂无数据' + * 语言配置，“确定”描述文本 + * @default '' */ - empty?: string; + confirm?: string; /** - * “加载中”描述文本 - * @default '加载中' + * 语言配置，“此刻”描述文本 + * @default '' */ - loadingText?: string; + now?: string; /** - * 占位符描述文本 - * @default '请选择' + * 语言配置，"请选择时间"占位符描述文本 + * @default '' */ placeholder?: string; -} - -export interface ListConfig { - /** - * 语言配置，'点击加载更多' 描述文本 - * @default '点击加载更多' - */ - loadingMoreText?: string; /** - * 语言配置，'正在加载中，请稍后' 描述文本 - * @default '正在加载中，请稍后' + * 语言配置，“下午”描述文本 + * @default '' */ - loadingText?: string; + postMeridiem?: string; } -export interface UploadConfig { - /** - * 语言配置，“取消上传” 描述文本 - * @default '取消上传' - */ - cancelUploadText?: string; - /** - * 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' } - */ - dragger?: UploadConfigDragger; - /** - * 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' } - */ - file?: UploadConfigFileList; +export interface TransferConfig { /** - * 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' } + * 语言配置，“暂无数据”空数据描述文本 + * @default '' */ - progress?: UploadConfigProgress; + empty?: string; /** - * 语言配置，文件大小超出限制时提醒文本 - * @default '文件大小不能超过 {sizeLimit}' + * 语言配置，“请输入关键词搜索”占位符描述文本 + * @default '' */ - sizeLimitMessage?: string; + placeholder?: string; /** - * 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' } + * 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” + * @default '' */ - triggerUploadText?: UploadTriggerUploadText; + title?: string; } -export interface UploadConfigProgress { - /** - * 语言配置，“上传失败”文本描述 - * @default '上传失败' - */ - failText?: string; +export interface TreeSelectConfig { /** - * 语言配置，“上传成功”文本描述 - * @default '上传成功' + * 语言配置，“暂无数据”描述文本 + * @default '' */ - successText?: string; + empty?: string; /** - * 语言配置，“上传中”文本描述 - * @default '上传中' + * 语言配置，“加载中”描述文本 + * @default '' */ - uploadingText?: string; + loadingText?: string; /** - * 语言配置，“待上传”文本描述 - * @default '待上传' + * 语言配置，“请选择”占位符描述文本 + * @default '' */ - waitingText?: string; + placeholder?: string; } export interface UploadConfigDragger { /** - * 语言配置，'点击上方“选择文件”或将文件拖到此区域' 描述文本 - * @default '点击上方“选择文件”或将文件拖到此区域' + * 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 + * @default '' */ clickAndDragText?: string; /** - * 语言配置，'释放图标' 描述文本 - * @default '释放图标' + * 语言配置，“释放图标” 描述文本 + * @default '' */ dragDropText?: string; /** * 语言配置，'拖拽到此区域' 描述文本 - * @default '拖拽到此区域' + * @default '' */ draggingText?: string; } export interface UploadConfigFileList { /** - * 语言配置，'文件名' 描述文本 - * @default '文件名' + * 语言配置，“文件名” 描述文本 + * @default '' */ fileNameText?: string; /** - * 语言配置，'上传日期' 描述文本 - * @default '上传日期' + * 语言配置，“上传日期” 描述文本 + * @default '' */ fileOperationDateText?: string; /** - * 语言配置，'操作' 描述文本 - * @default '操作' + * 语言配置，“操作” 描述文本 + * @default '' */ fileOperationText?: string; /** - * 语言配置，'文件尺寸' 描述文本 - * @default '文件尺寸' + * 语言配置，“文件尺寸” 描述文本 + * @default '' */ fileSizeText?: string; /** - * 语言配置，'状态' 描述文本 - * @default '状态' + * 语言配置，“状态” 描述文本 + * @default '' */ fileStatusText?: string; } -export interface FormConfig { - /** - * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` - */ - errorMessage?: FormErrorMessage; - /** - * 是否显示必填符号（*），默认显示 - * @default true - */ - requiredMark?: boolean; -} - -export interface TagConfig { - /** - * 关闭图标，【注意】使用渲染函数输出图标组件 - */ - closeIcon?: TNode; -} - -export interface StepsConfig { - /** - * 错误步骤图标，【注意】使用渲染函数输出图标组件 - */ - errorIcon?: TNode; -} - -export interface AlertConfig { +export interface UploadConfigProgress { /** - * 收起提示文本 - * @default 收起 + * 语言配置，“上传失败”文本描述 + * @default '' */ - collapseText?: string; + failText?: string; /** - * 展开提示文本 - * @default 展开更多 + * 语言配置，“上传成功”文本描述 + * @default '' */ - expandText?: string; -} - -export interface AnchorConfig { + successText?: string; /** - * 复制成功文字 - * @default 链接复制成功 + * 语言配置，“上传中”文本描述 + * @default '' */ - copySuccessText?: string; + uploadingText?: string; /** - * 复制提示文字 - * @default 复制链接 + * 语言配置，“待上传”文本描述 + * @default '' */ - copyText?: string; + waitingText?: string; } export type AnimationType = 'ripple' | 'expand' | 'fade'; -export interface ConfigPresetDate { - [name: string]: DateConfigValue | (() => DateConfigValue); -} - -export type DateConfigValue = string | Date | Array; - export interface UploadTriggerUploadText { image?: string; normal?: string; @@ -720,3 +755,9 @@ export interface UploadTriggerUploadText { continueUpload: string; delete?: string; } + +export interface ConfigPresetDate { + [name: string]: DateConfigValue | (() => DateConfigValue); +} + +export type DateConfigValue = string | Date | Array; diff --git a/src/config-provider/useConfig.tsx b/src/config-provider/useConfig.tsx index c8a87ce24..3abc7a3b6 100644 --- a/src/config-provider/useConfig.tsx +++ b/src/config-provider/useConfig.tsx @@ -1,10 +1,10 @@ import { computed, inject, h } from '@vue/composition-api'; import cloneDeep from 'lodash/cloneDeep'; import _mergeWith from 'lodash/mergeWith'; -import { defaultGlobalConfig, GlobalConfig } from './context'; +import { defaultGlobalConfig, GlobalConfigProvider } from './context'; // deal with https://github.com/lodash/lodash/issues/1313 -export const merge = (defaultGlobalConfig: GlobalConfig, injectConfig: GlobalConfig) => _mergeWith(defaultGlobalConfig, injectConfig, (objValue, srcValue) => { +export const merge = (defaultGlobalConfig: GlobalConfigProvider, injectConfig: GlobalConfigProvider) => _mergeWith(defaultGlobalConfig, injectConfig, (objValue, srcValue) => { if (Array.isArray(objValue)) { return srcValue; } @@ -16,9 +16,9 @@ export const merge = (defaultGlobalConfig: GlobalConfig, injectConfig: GlobalCon * @returns {t, global} * useConfig('pagination') */ -export function useConfig(componentName?: T) { +export function useConfig(componentName?: T) { const mergedGlobalConfig = computed(() => { - const globalConfig = inject('globalConfig', Object.create(null)); + const globalConfig = inject('globalConfig', Object.create(null)); const mergedGlobalConfig = merge(cloneDeep(defaultGlobalConfig), globalConfig); return mergedGlobalConfig; }); diff --git a/src/config-provider/zh_CN_config.ts b/src/config-provider/zh_CN_config.ts index fcf6f800c..292b3ed38 100644 --- a/src/config-provider/zh_CN_config.ts +++ b/src/config-provider/zh_CN_config.ts @@ -80,6 +80,15 @@ const GLOBAL_CONFIG_ZH: GlobalConfigProvider = { sortAscendingOperationText: '点击升序', sortCancelOperationText: '点击取消排序', sortDescendingOperationText: '点击降序', + clearFilterResultButtonText: '清空筛选', + columnConfigButtonText: '列配置', + columnConfigTitleText: '表格列配置', + columnConfigDescriptionText: '请选择需要在表格中显示的数据列', + confirmText: '确认', + cancelText: '取消', + resetText: '重置', + selectAllText: '全选', + searchResultText: '搜索“{result}”，找到 {count} 条结果', }, select: { empty: '暂无数据', diff --git a/src/hooks/render-tnode.ts b/src/hooks/render-tnode.ts index 652bab8f8..4edae861d 100644 --- a/src/hooks/render-tnode.ts +++ b/src/hooks/render-tnode.ts @@ -69,11 +69,11 @@ export const renderTNodeJSX = (instance: ComponentPublicInstance, name: string, } // 是否静默日志 - const isSilent = Boolean(isObject(options) && 'silent' in options && options.silent); + // const isSilent = Boolean(isObject(options) && 'silent' in options && options.silent); // 同名插槽和属性同时存在，则提醒用户只需要选择一种方式即可 - if (instance.$slots[name] && propsNode && propsNode !== true && !isSilent) { - console.warn(`Both $slots.${name} and $props.${name} exist, $props.${name} is preferred`); - } + // if (instance.$slots[name] && propsNode && propsNode !== true && !isSilent) { + // console.warn(`Both $slots.${name} and $props.${name} exist, $props.${name} is preferred`); + // } // propsNode 为 false 不渲染 if (propsNode === false) return; diff --git a/src/hooks/tnode.ts b/src/hooks/tnode.ts index 63d544f39..8ddd48c45 100644 --- a/src/hooks/tnode.ts +++ b/src/hooks/tnode.ts @@ -8,7 +8,7 @@ import kebabCase from 'lodash/kebabCase'; import { getDefaultNode, getParams, OptionsType, JSXRenderContext, } from './render-tnode'; -import log from '../_common/js/log'; +// import log from '../_common/js/log'; // 兼容处理插槽名称，同时支持驼峰命名和中划线命名，示例：value-display 和 valueDisplay function handleSlots(slots: SetupContext['slots'], name: string, params: Record) { @@ -48,9 +48,9 @@ export const useTNodeJSX = () => { } // 同名插槽和属性同时存在，则提醒用户只需要选择一种方式即可 - if (slots[name] && propsNode && propsNode !== true) { - log.warn('', `Both slots.${name} and props.${name} exist, props.${name} is preferred`); - } + // if (slots[name] && propsNode && propsNode !== true) { + // log.warn('', `Both slots.${name} and props.${name} exist, props.${name} is preferred`); + // } // propsNode 为 false 不渲染 if (propsNode === false) return; if (propsNode === true) { diff --git a/src/table/base-table-props.ts b/src/table/base-table-props.ts index 85e6f2f24..8cc41539e 100644 --- a/src/table/base-table-props.ts +++ b/src/table/base-table-props.ts @@ -10,6 +10,10 @@ import { PropType } from 'vue'; export default { /** 是否显示表格边框 */ bordered: Boolean, + /** 表格底部内容，可以用于自定义列设置等 */ + bottomContent: { + type: [String, Function] as PropType, + }, /** 列配置，泛型 T 指表格数据类型 */ columns: { type: Array as PropType, @@ -120,7 +124,7 @@ export default { return ['auto', 'fixed'].includes(val); }, }, - /** 表格顶部内容，可以用于自定义列设置等 */ + /** 表格顶部内容，可以用于自定义列设置、顶部查询条件等 */ topContent: { type: [String, Function] as PropType, }, diff --git a/src/table/base-table.tsx b/src/table/base-table.tsx index 621fa036e..d6f5c54c2 100644 --- a/src/table/base-table.tsx +++ b/src/table/base-table.tsx @@ -38,11 +38,6 @@ export default defineComponent({ props: { ...props, - /** - * 渲染展开行，非公开属性，请勿在业务中使用 - */ - isColDraggable: Boolean, - isRowDraggable: Boolean, renderExpandedRow: Function as PropType, }, @@ -264,6 +259,8 @@ export default defineComponent({ rowHeight: this.rowHeight, trs: this.trs, bufferSize: this.bufferSize, + scroll: this.scroll, + tableContentElm: this.tableContentRef, handleRowMounted: this.handleRowMounted, renderExpandedRow: this.renderExpandedRow, ...pick(this.$props, extendTableProps), @@ -320,6 +317,9 @@ export default defineComponent({ ); const topContent = this.renderTNode('topContent'); + const bottomContent = this.renderTNode('bottomContent'); + const pagination = this.renderPagination(h); + const bottom = !!bottomContent &&
{bottomContent}
; return (
{!!topContent &&
{topContent}
} @@ -342,7 +342,9 @@ export default defineComponent({ >
)} - {this.renderPagination(h)} + {bottom} + {pagination} + {/* {this.bordered ? [pagination, bottom] : [bottom, pagination]} */}
); }, diff --git a/src/table/ellipsis.tsx b/src/table/ellipsis.tsx index 8cb4b89b1..30f774c3c 100644 --- a/src/table/ellipsis.tsx +++ b/src/table/ellipsis.tsx @@ -2,6 +2,7 @@ import { defineComponent, PropType, ref, computed, } from '@vue/composition-api'; +import debounce from 'lodash/debounce'; import { TNode } from '../common'; import { renderContent } from '../utils/render-tnode'; import { isNodeOverflow } from '../utils/dom'; @@ -49,7 +50,6 @@ export default defineComponent({ const { classPrefix } = useConfig(); const root = ref(); const isOverflow = ref(false); - const visible = ref(false); const ellipsisClasses = computed(() => [ `${classPrefix.value}-table__ellipsis`, @@ -59,28 +59,30 @@ export default defineComponent({ // 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示 const onTriggerMouseenter = () => { if (!root.value) return; - visible.value = true; isOverflow.value = isNodeOverflow(root.value); }; const onTriggerMouseleave = () => { - visible.value = false; + isOverflow.value = isNodeOverflow(root.value); }; + // 使用 debounce 有两个原因：1. 避免 safari/firefox 等浏览器不显示省略浮层；2. 避免省略列快速滚动时，出现一堆的省略浮层 + const onMouseAround = debounce((e: MouseEvent) => { + e.type === 'mouseleave' ? onTriggerMouseleave() : onTriggerMouseenter(); + }, 80); + return { root, isOverflow, ellipsisClasses, - visible, - onTriggerMouseenter, - onTriggerMouseleave, + onMouseAround, }; }, render() { const cellNode = renderContent(this, 'default', 'content'); const ellipsisContent = ( -
+
{cellNode}
); @@ -88,7 +90,6 @@ export default defineComponent({ if (this.isOverflow) { const rProps = { content: this.popupContent || (() => cellNode), - visible: this.visible, destroyOnClose: true, zIndex: this.zIndex, attach: this.attach || (() => this.root), @@ -99,10 +100,6 @@ export default defineComponent({ } else { content = ellipsisContent; } - return ( -
- {content} -
- ); + return content; }, }); diff --git a/src/table/filter-controller.tsx b/src/table/filter-controller.tsx index 0aac2a315..3e04fd476 100644 --- a/src/table/filter-controller.tsx +++ b/src/table/filter-controller.tsx @@ -47,7 +47,7 @@ export default defineComponent({ }, // eslint-disable-next-line - setup(props: TableFilterControllerProps) { + setup(props: TableFilterControllerProps, { emit }) { const triggerElementRef = ref(null); const renderTNode = useTNodeDefault(); const { t, global } = useConfig('table'); @@ -55,6 +55,7 @@ export default defineComponent({ const onFilterPopupVisibleChange = (visible: boolean) => { filterPopupVisible.value = visible; + emit('visible-change', visible); }; return { @@ -133,7 +134,7 @@ export default defineComponent({ this.filterPopupVisible = false; }} > - 重置 + {this.global.resetText} - 确认 + {this.global.confirmText}
); diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts index 5b527cb0e..e4418e554 100644 --- a/src/table/hooks/tree-store.ts +++ b/src/table/hooks/tree-store.ts @@ -46,10 +46,14 @@ class TableTreeStore { } toggleExpandData(p: { rowIndex: number; row: T }, dataSource: T[], keys: KeysType) { + if (!p) { + log.error('EnhancedTable', 'the node you want to toggleExpand doest not exist in `data`'); + return dataSource; + } const rowValue = get(p.row, keys.rowKey); if (rowValue === undefined) { log.error('EnhancedTable', '`rowKey` could be wrong, can not get rowValue from `data` by `rowKey`.'); - return; + return []; } const r = this.treeDataMap.get(rowValue) || { row: p.row, diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts index ee0df3b5f..dbeb03a70 100644 --- a/src/table/hooks/useClassName.ts +++ b/src/table/hooks/useClassName.ts @@ -5,9 +5,11 @@ export default function useClassName() { const classNames = { tableBaseClass: { table: `${classPrefix.value}-table`, + overflowVisible: `${classPrefix.value}-table--overflow-visible`, body: `${classPrefix.value}-table__body`, content: `${classPrefix.value}-table__content`, topContent: `${classPrefix.value}-table__top-content`, + bottomContent: `${classPrefix.value}-table__bottom-content`, tdLastRow: `${classPrefix.value}-table__td-last-row`, tdFirstCol: `${classPrefix.value}-table__td-first-col`, thCellInner: `${classPrefix.value}-table__th-cell-inner`, @@ -144,8 +146,8 @@ export default function useClassName() { // 拖拽功能类名 tableDraggableClasses: { - bodyRow: `${classPrefix.value}-table__row--draggable`, - bodyCol: `${classPrefix.value}-table__col-draggable`, + rowDraggable: `${classPrefix.value}-table--row-draggable`, + colDraggable: `${classPrefix.value}-table--col-draggable`, handle: `${classPrefix.value}-table__handle-draggable`, ghost: `${classPrefix.value}-table__col--draggable-ghost`, }, diff --git a/src/table/hooks/useColumnController.tsx b/src/table/hooks/useColumnController.tsx index 5b7a4a92b..5ae7b4ad9 100644 --- a/src/table/hooks/useColumnController.tsx +++ b/src/table/hooks/useColumnController.tsx @@ -7,13 +7,23 @@ import { import { SettingIcon } from 'tdesign-icons-vue'; import intersection from 'lodash/intersection'; import { CreateElement } from 'vue'; -import Checkbox, { CheckboxGroup, CheckboxGroupValue, CheckboxOptionObj } from '../../checkbox'; +import Checkbox, { + CheckboxGroup, + CheckboxGroupValue, + CheckboxOptionObj, + CheckboxGroupChangeContext, +} from '../../checkbox'; import { DialogPlugin } from '../../dialog/plugin'; import { useTNodeDefault } from '../../hooks/tnode'; import { renderTitle } from './useTableHeader'; -import { PrimaryTableCol, TdPrimaryTableProps } from '../type'; +import { + PrimaryTableCol, TdPrimaryTableProps, PrimaryTableColumnChange, TableRowData, +} from '../type'; import { useConfig } from '../../config-provider/useConfig'; + import useDefaultValue from '../../hooks/useDefaultValue'; +import { getCurrentRowByKey } from '../utils'; +import { DialogInstance } from '../../dialog'; export function getColumnKeys(columns: PrimaryTableCol[], keys: string[] = []) { for (let i = 0, len = columns.length; i < len; i++) { @@ -29,9 +39,11 @@ export function getColumnKeys(columns: PrimaryTableCol[], keys: string[] = []) { export default function useColumnController(props: TdPrimaryTableProps, context: SetupContext) { const renderTNode = useTNodeDefault(); - const { classPrefix } = useConfig(); - const { columns, columnController, displayColumns } = toRefs(props); - + const { classPrefix, global } = useConfig('table'); + const { + columns, columnController, displayColumns, columnControllerVisible, + } = toRefs(props); + const dialogInstance = ref(null); const enabledColKeys = computed(() => { const arr = (columnController.value?.fields || [...new Set(getColumnKeys(columns.value))] || []).filter((v) => v); return new Set(arr); @@ -40,7 +52,6 @@ export default function useColumnController(props: TdPrimaryTableProps, context: const keys = [...new Set(getColumnKeys(columns.value))]; // 确认后的列配置 - // const displayColumnKeys = ref(keys); const [tDisplayColumns, setTDisplayColumns] = useDefaultValue( displayColumns, props.defaultDisplayColumns || keys, @@ -77,33 +88,40 @@ export default function useColumnController(props: TdPrimaryTableProps, context: return arr; } - const handleCheckChange = (val: CheckboxGroupValue) => { + const handleCheckChange = (val: CheckboxGroupValue, ctx: CheckboxGroupChangeContext) => { columnCheckboxKeys.value = val; - const params = { columns: val }; + const params = { + columns: val, + type: ctx.type, + currentColumn: getCurrentRowByKey(columns.value, String(ctx.current)), + e: ctx.e, + }; props.onColumnChange?.(params); // Vue3 ignore next line context.emit('column-change', params); }; - const handleClickAllShowColumns = (checked: boolean) => { + const handleClickAllShowColumns = (checked: boolean, ctx: { e: Event }) => { if (checked) { const newData = columns.value?.map((t) => t.colKey) || []; columnCheckboxKeys.value = newData; - props.onColumnChange?.({ type: 'check', columns: newData }); + const params: PrimaryTableColumnChange = { type: 'check', columns: newData, e: ctx.e }; + props.onColumnChange?.(params); // Vue3 ignore next line - context.emit('column-change', { type: 'check', columns: newData }); + context.emit('column-change', params); } else { const disabledColKeys = checkboxOptions.value.filter((t) => t.disabled).map((t) => t.value); columnCheckboxKeys.value = disabledColKeys; - props.onColumnChange?.({ type: 'uncheck', columns: disabledColKeys }); + const params: PrimaryTableColumnChange = { type: 'uncheck', columns: disabledColKeys, e: ctx.e }; + props.onColumnChange?.(params); // Vue3 ignore next line - context.emit('column-change', { type: 'uncheck', columns: disabledColKeys }); + context.emit('column-change', params); } }; const handleToggleColumnController = () => { - const dialogInstance = DialogPlugin.confirm({ - header: '表格列配置', + dialogInstance.value = DialogPlugin.confirm({ + header: global.value.columnConfigTitleText, // eslint-disable-next-line body: (h: CreateElement) => { const widthMode = columnController.value?.displayType === 'fixed-width' ? 'fixed' : 'auto'; @@ -111,13 +129,15 @@ export default function useColumnController(props: TdPrimaryTableProps, context: const isCheckedAll = checkedLength === enabledColKeys.value.size; const isIndeterminate = checkedLength > 0 && checkedLength < enabledColKeys.value.size; const prefix = classPrefix.value; + const classes = [`${prefix}-table__column-controller`, `${prefix}-table__column-controller--${widthMode}`]; const defaultNode = ( -
+
-

请选择需要在表格中显示的数据列

+ {/* 请选择需要在表格中显示的数据列 */} +

{global.value.columnConfigDescriptionText}

- 全选 + {global.value.selectAllText}
@@ -133,28 +153,67 @@ export default function useColumnController(props: TdPrimaryTableProps, context: ); return renderTNode('columnControllerContent', defaultNode); }, - confirmBtn: '确认', - cancelBtn: '取消', + confirmBtn: global.value.confirmText, + cancelBtn: global.value.cancelText, width: 612, onConfirm: () => { setTDisplayColumns([...columnCheckboxKeys.value]); - dialogInstance.hide(); + // 此处逻辑不要随意改动，涉及到 内置列配置按钮 和 不包含列配置按钮等场景 + if (columnControllerVisible.value === undefined) { + dialogInstance.value.hide(); + } else { + props.onColumnControllerVisibleChange?.(false, { trigger: 'cancel' }); + context.emit('update:columnControllerVisible', false); + } }, onClose: () => { - dialogInstance.hide(); + // 此处逻辑不要随意改动，涉及到 内置列配置按钮 和 不包含列配置按钮等场景 + if (columnControllerVisible.value === undefined) { + dialogInstance.value.hide(); + } else { + props.onColumnControllerVisibleChange?.(false, { trigger: 'confirm' }); + context.emit('update:columnControllerVisible', false); + } }, ...(columnController.value?.dialogProps || {}), }); }; + // columnControllerVisible 一般应用于不包含列配置按钮的场景，有外部直接控制弹框的显示或隐藏 + watch( + [columnControllerVisible], + ([visible]) => { + if (visible === undefined) return; + if (dialogInstance.value) { + visible ? dialogInstance.value.show() : dialogInstance.value.hide(); + } else { + visible && handleToggleColumnController(); + } + }, + { immediate: true }, + ); + // eslint-disable-next-line const renderColumnController = (h: CreateElement) => { + const isColumnController = !!(columnController.value && Object.keys(columnController.value).length); + const placement = isColumnController ? columnController.value.placement || 'top-right' : ''; + if (isColumnController && columnController.value.hideTriggerButton) return null; + const classes = [ + `${classPrefix.value}-table__column-controller-trigger`, + { [`${classPrefix.value}-align-${placement}`]: !!placement }, + ]; return ( -
- - - 列配置 - +
+ , + }} + props={props.columnController?.buttonProps} + >
); }; diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 57c4189a6..51b6a11a2 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -9,17 +9,27 @@ import { TdPrimaryTableProps } from '../type'; import { TargetDom } from '../interface'; import { setSortableConfig } from '../utils'; import useClassName from './useClassName'; +import log from '../../_common/js/log'; export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) { const { sortOnRowDraggable, dragSort, columns, data, } = toRefs(props); + const primaryTableRef = ref(null); // 判断是否有拖拽列 const dragCol = computed(() => columns.value.find((item) => item.colKey === 'drag')); // 行拖拽判断条件 const isRowDraggable = computed(() => sortOnRowDraggable.value || dragSort.value === 'row'); // 列拖拽判断条件 - const isColDraggable = computed(() => dragSort.value === 'drag-col' && !!dragCol.value); + const isColDraggable = computed(() => ['drag-col', 'col'].includes(dragSort.value) && !!dragCol.value); + + if (dragSort.value === 'drag-col') { + log.warn('Table', "dragSort='drag-col' is going to be deprecated, use dragSort='col' instead."); + } + + if (props.sortOnRowDraggable) { + log.warn('Table', "`sortOnRowDraggable` is going to be deprecated, use dragSort='row' instead."); + } const { tableDraggableClasses } = useClassName(); // 拖拽实例 @@ -68,25 +78,32 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo context.emit('drag-sort', params); }, }; - // 注册拖拽事件 - const rowOptions = { - ...baseOptions, - }; const colOptions = { handle: `.${handle}`, ...baseOptions, }; if (isRowDraggable.value) { - dragInstance.value = setSortableConfig(dragContainer, rowOptions); + dragInstance.value = setSortableConfig(dragContainer, { ...baseOptions }); } else { dragInstance.value = setSortableConfig(dragContainer, colOptions); } startList.value = dragInstance.value.toArray(); }; + + function setDragSortPrimaryTableRef(primaryTableElement: any) { + primaryTableRef.value = primaryTableElement; + } + + // 注册拖拽事件 + watch([primaryTableRef], ([val]: [any]) => { + registerDragEvent(val?.$el); + }); + return { isRowDraggable, isColDraggable, registerDragEvent, + setDragSortPrimaryTableRef, }; } diff --git a/src/table/hooks/useFilter.tsx b/src/table/hooks/useFilter.tsx index 2c7e14206..519f8255e 100644 --- a/src/table/hooks/useFilter.tsx +++ b/src/table/hooks/useFilter.tsx @@ -10,6 +10,7 @@ import { import useDefaultValue from '../../hooks/useDefaultValue'; import { useTNodeDefault } from '../../hooks/tnode'; import TableFilterController from '../filter-controller'; +import { useConfig } from '../../config-provider'; // 筛选条件不为空，才需要显示筛选结果行 function filterEmptyData(data: FilterValue) { @@ -28,9 +29,11 @@ function filterEmptyData(data: FilterValue) { export default function useFilter(props: TdPrimaryTableProps, context: SetupContext) { const primaryTableRef = ref(null); + const { t, global } = useConfig('table'); const renderTNode = useTNodeDefault(); const { filterValue } = toRefs(props); const { tableFilterClasses, isFocusClass } = useClassName(); + const isTableOverflowHidden = ref(); // unControl and control const [tFilterValue, setTFilterValue] = useDefaultValue( @@ -58,10 +61,14 @@ export default function useFilter(props: TdPrimaryTableProps, context: SetupCont if (hasEmptyCondition.value) return null; const defaultNode = (
- 搜索 “{getFilterResultContent()}”， - 找到 {props.pagination?.total || props.data?.length} 条结果 + {/* 搜索 “{getFilterResultContent()}”， + 找到 {props.pagination?.total || props.data?.length} 条结果 */} + {t(global.value.searchResultText, { + result: getFilterResultContent(), + count: props.pagination?.total || props.data?.length, + })} - 清空筛选 + {global.value.clearFilterResultButtonText}
); @@ -150,15 +157,27 @@ export default function useFilter(props: TdPrimaryTableProps, context: SetupCont reset: onReset, confirm: onConfirm, 'inner-filter-change': onInnerFilterChange, + 'visible-change': onPopupVisibleChange, }} > ); } + function setFilterPrimaryTableRef(primaryTableElement: any) { + primaryTableRef.value = primaryTableElement; + } + + function onPopupVisibleChange(visible: boolean) { + if (visible && !isTableOverflowHidden.value) { + isTableOverflowHidden.value = !visible; + } + } + return { - primaryTableRef, hasEmptyCondition, + isTableOverflowHidden, renderFilterIcon, renderFirstFilterRow, + setFilterPrimaryTableRef, }; } diff --git a/src/table/hooks/useLazyLoad.ts b/src/table/hooks/useLazyLoad.ts new file mode 100644 index 000000000..a481dd6c2 --- /dev/null +++ b/src/table/hooks/useLazyLoad.ts @@ -0,0 +1,45 @@ +import { + ref, onMounted, computed, nextTick, Ref, UnwrapRef, +} from '@vue/composition-api'; +import observe from '../../_common/js/utils/observe'; + +export type UseLazyLoadParams = UnwrapRef<{ + type: 'lazy' | 'virtual'; + rowIndex: number; + rowHeight?: number; + bufferSize?: number; +}>; + +export default function useLazyLoad( + containerRef: Ref, + childRef: Ref, + params: UseLazyLoadParams, +) { + const tRowHeight = computed(() => Math.max(params.rowHeight || 48, 48)); + const isInit = ref(params.rowIndex === 0); + const hasLazyLoadHolder = computed(() => params?.type === 'lazy' && !isInit.value); + + const requestAnimationFrame = window.requestAnimationFrame || ((cb) => setTimeout(cb, 16.6)); + + const init = () => { + if (!isInit.value) { + requestAnimationFrame(() => { + isInit.value = true; + }); + } + }; + + onMounted(() => { + if (params?.type !== 'lazy') return; + nextTick(() => { + const bufferSize = Math.max(10, params.bufferSize || 10); + const height = tRowHeight.value * bufferSize; + observe(childRef.value, containerRef.value, init, height); + }); + }); + + return { + hasLazyLoadHolder, + tRowHeight, + }; +} diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx index 21825de13..e02408274 100644 --- a/src/table/hooks/useRowSelect.tsx +++ b/src/table/hooks/useRowSelect.tsx @@ -23,11 +23,9 @@ import { ClassName } from '../../common'; import log from '../../_common/js/log'; export default function useRowSelect(props: TdPrimaryTableProps) { - const { - selectedRowKeys, columns, data, rowClassName, - } = toRefs(props); + const { selectedRowKeys, columns, data } = toRefs(props); const { tableSelectedClasses } = useClassName(); - const tRowClassNames = ref(); + const selectedRowClassNames = ref(); const [tSelectedRowKeys, setTSelectedRowKeys] = useDefaultValue( selectedRowKeys, props.defaultSelectedRowKeys || [], @@ -44,7 +42,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) { )); watch( - [data, columns, rowClassName, tSelectedRowKeys], + [data, columns, tSelectedRowKeys], () => { const disabledRowFunc = (p: RowClassNameParams): ClassName => selectColumn.value.disabled(p) ? tableSelectedClasses.disabled : ''; const disabledRowClass = selectColumn.value?.disabled ? disabledRowFunc : undefined; @@ -54,7 +52,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) { return selected.has(rowId) ? tableSelectedClasses.selected : ''; }; const selectedRowClass = selected.size ? selectedRowClassFunc : undefined; - tRowClassNames.value = [rowClassName.value, disabledRowClass, selectedRowClass]; + selectedRowClassNames.value = [disabledRowClass, selectedRowClass].filter((v) => v); }, { immediate: true }, ); @@ -148,7 +146,7 @@ export default function useRowSelect(props: TdPrimaryTableProps) { } return { - tRowClassNames, + selectedRowClassNames, formatToRowSelectColumn, }; } diff --git a/src/table/interface.ts b/src/table/interface.ts index 93ae043b6..22b2c89ac 100644 --- a/src/table/interface.ts +++ b/src/table/interface.ts @@ -11,8 +11,6 @@ export interface BaseTableProps extends TdBaseTableProps { /** * 渲染展开行，非公开属性，请勿在业务中使用 */ - isColDraggable: Boolean; - isRowDraggable: Boolean; renderExpandedRow: (h: CreateElement, params: TableExpandedRowParams) => JSX.Element; } diff --git a/src/table/primary-table-props.ts b/src/table/primary-table-props.ts index 9e14f5fa1..fd9720c75 100644 --- a/src/table/primary-table-props.ts +++ b/src/table/primary-table-props.ts @@ -12,13 +12,19 @@ export default { asyncLoading: { type: [String, Function] as PropType, }, - /** 自定义显示列控制器，值为空不会显示。
`columnController.fields` 表示只允许用户对数组里面的列进行显示或隐藏的控制，默认为全部字段。
`columnController.displayType` 是指字段呈现方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐，默认为 `auto-width`。
支持透传 CheckboxGroup 和 Dialog 组件等全部属性 */ + /** 自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档 */ columnController: { type: Object as PropType, }, - /** 【讨论中】自定义显示列控制器的内容呈现，可以填充任意内容 */ - columnControllerContent: { - type: [String, Function] as PropType, + /** 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制 */ + columnControllerVisible: { + type: Boolean, + default: undefined, + }, + /** 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制，非受控属性 */ + defaultColumnControllerVisible: { + type: Boolean, + default: undefined, }, /** 列配置，泛型 T 指表格数据类型 */ columns: { @@ -34,13 +40,13 @@ export default { defaultDisplayColumns: { type: Array as PropType, }, - /** 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`drag-col` 表示通过专门的 拖拽列 进行拖拽排序 */ + /** 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用 */ dragSort: { type: String as PropType, - default: 'drag-col' as TdPrimaryTableProps['dragSort'], + default: 'col' as TdPrimaryTableProps['dragSort'], validator(val: TdPrimaryTableProps['dragSort']): boolean { if (!val) return true; - return ['row', 'drag-col'].includes(val); + return ['row', 'col', 'drag-col'].includes(val); }, }, /** 展开行内容，泛型 T 指表格数据类型 */ @@ -105,7 +111,7 @@ export default { sortIcon: { type: Function as PropType, }, - /** 已废弃。允许表格行拖拽时排序 */ + /** 已废弃。允许表格行拖拽时排序。请更为使用 `dragSort="row"` */ sortOnRowDraggable: Boolean, /** 异步加载区域被点击时触发 */ onAsyncLoadingClick: Function as PropType, @@ -113,11 +119,13 @@ export default { onCellClick: Function as PropType, /** 分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据 */ onChange: Function as PropType, - /** 【开发中】列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列 */ + /** 确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列 */ onColumnChange: Function as PropType, + /** 列配置弹窗显示或隐藏变化时触发 */ + onColumnControllerVisibleChange: Function as PropType, /** 本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源 */ onDataChange: Function as PropType, - /** 列配置选中列发生变化时触发 */ + /** 确认列配置时触发 */ onDisplayColumnsChange: Function as PropType, /** 拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据 */ onDragSort: Function as PropType, diff --git a/src/table/primary-table.tsx b/src/table/primary-table.tsx index 730bb46f5..35bff45a5 100644 --- a/src/table/primary-table.tsx +++ b/src/table/primary-table.tsx @@ -1,6 +1,7 @@ import { - computed, defineComponent, toRefs, h, onMounted, + computed, defineComponent, toRefs, h, onMounted, ref, } from '@vue/composition-api'; +import get from 'lodash/get'; import baseTableProps from './base-table-props'; import primaryTableProps from './primary-table-props'; import BaseTable, { BASE_TABLE_ALL_EVENTS, TableListeners } from './base-table'; @@ -15,6 +16,7 @@ import useFilter from './hooks/useFilter'; import useDragSort from './hooks/useDragSort'; import useAsyncLoading from './hooks/useAsyncLoading'; import { PageInfo } from '../pagination'; +import useClassName from './hooks/useClassName'; export { BASE_TABLE_ALL_EVENTS } from './base-table'; @@ -29,6 +31,8 @@ export default defineComponent({ setup(props: TdPrimaryTableProps, context) { const renderTNode = useTNodeJSX(); const { columns } = toRefs(props); + const primaryTableRef = ref(null); + const { tableDraggableClasses, tableBaseClass } = useClassName(); // 自定义列配置功能 const { tDisplayColumns, renderColumnController } = useColumnController(props, context); // 展开/收起行功能 @@ -38,24 +42,49 @@ export default defineComponent({ // 排序功能 const { renderSortIcon } = useSorter(props, context); // 行选中功能 - const { formatToRowSelectColumn, tRowClassNames } = useRowSelect(props); + const { formatToRowSelectColumn, selectedRowClassNames } = useRowSelect(props); // 过滤功能 const { - hasEmptyCondition, primaryTableRef, renderFilterIcon, renderFirstFilterRow, + hasEmptyCondition, + isTableOverflowHidden, + renderFilterIcon, + renderFirstFilterRow, + setFilterPrimaryTableRef, } = useFilter(props, context); // 拖拽排序功能 - const { isColDraggable, isRowDraggable, registerDragEvent } = useDragSort(props, context); + const { isColDraggable, isRowDraggable, setDragSortPrimaryTableRef } = useDragSort(props, context); - onMounted(() => { - if (primaryTableRef?.value?.$el) { - // 注册拖拽事件 - registerDragEvent(primaryTableRef?.value?.$el); - } - }); const { renderTitleWidthIcon } = useTableHeader(props); const { renderAsyncLoading } = useAsyncLoading(props, context); + const primaryTableClasses = computed(() => ({ + [tableDraggableClasses.colDraggable]: isColDraggable.value, + [tableDraggableClasses.rowDraggable]: isRowDraggable.value, + [tableBaseClass.overflowVisible]: isTableOverflowHidden.value === false, + })); + + // 如果想给 TR 添加类名，请在这里补充，不要透传更多额外 Props 到 BaseTable + const tRowClassNames = computed(() => { + const tClassNames = [props.rowClassName, selectedRowClassNames.value]; + return tClassNames.filter((v) => v); + }); + + // 如果想给 TR 添加属性，请在这里补充，不要透传更多额外 Props 到 BaseTable + const tRowAttributes = computed(() => { + const tAttributes = [props.rowAttributes]; + if (isColDraggable.value || isRowDraggable.value) { + tAttributes.push(({ row }) => ({ 'data-id': get(row, props.rowKey || 'id') })); + } + return tAttributes.filter((v) => v); + }); + + // 多个 Hook 共用 primaryTableRef + onMounted(() => { + setFilterPrimaryTableRef(primaryTableRef.value); + setDragSortPrimaryTableRef(primaryTableRef.value); + }); + // 1. 影响列数量的因素有：自定义列配置、展开/收起行、多级表头；2. 影响表头内容的因素有：排序图标、筛选图标 const getColumns = (columns: PrimaryTableCol[]) => { const arr: PrimaryTableCol[] = []; @@ -112,6 +141,8 @@ export default defineComponent({ tRowClassNames, hasEmptyCondition, primaryTableRef, + tRowAttributes, + primaryTableClasses, renderTNode, renderColumnController, renderExpandedRow, @@ -119,9 +150,6 @@ export default defineComponent({ renderFirstFilterRow, renderAsyncLoading, onInnerPageChange, - isColDraggable, - isRowDraggable, - registerDragEvent, }; }, methods: { @@ -136,18 +164,23 @@ export default defineComponent({ return listener; }, - formatNode(api: string, renderInnerNode: Function, condition: boolean) { + formatNode(api: string, renderInnerNode: Function, condition: boolean, extra?: { reverse?: boolean }) { if (!condition) return this[api]; const innerNode = renderInnerNode(h); const propsNode = this.renderTNode(api); if (innerNode && !propsNode) return () => innerNode; if (propsNode && !innerNode) return () => propsNode; if (innerNode && propsNode) { - return () => ( -
- {propsNode} - {innerNode} -
+ return () => extra?.reverse ? ( +
+ {innerNode} + {propsNode} +
+ ) : ( +
+ {propsNode} + {innerNode} +
); } return null; @@ -155,20 +188,30 @@ export default defineComponent({ }, render() { - const topContent = this.formatNode('topContent', this.renderColumnController, !!this.columnController); + const isColumnController = !!(this.columnController && Object.keys(this.columnController).length); + const placement = isColumnController ? this.columnController.placement || 'top-right' : ''; + const isBottomController = isColumnController && placement?.indexOf('bottom') !== -1; + const topContent = this.formatNode( + 'topContent', + this.renderColumnController, + isColumnController && !isBottomController, + ); + const bottomContent = this.formatNode('bottomContent', this.renderColumnController, isBottomController, { + reverse: true, + }); const firstFullRow = this.formatNode('firstFullRow', this.renderFirstFilterRow, !this.hasEmptyCondition); const lastFullRow = this.formatNode('lastFullRow', this.renderAsyncLoading, !!this.asyncLoading); const props = { ...this.$props, rowClassName: this.tRowClassNames, + rowAttributes: this.tRowAttributes, columns: this.tColumns, - renderExpandedRow: this.showExpandedRow ? this.renderExpandedRow : undefined, topContent, + bottomContent, firstFullRow, lastFullRow, - isColDraggable: this.isColDraggable, - isRowDraggable: this.isRowDraggable, + renderExpandedRow: this.showExpandedRow ? this.renderExpandedRow : undefined, }; // 事件，Vue3 do not need this.getListener @@ -180,7 +223,15 @@ export default defineComponent({ on['row-click'] = this.onInnerExpandRowClick; } // replace `scopedSlots={this.$scopedSlots}` of `v-slots={this.$slots}` in Vue3 - - return ; + return ( + + ); }, }); diff --git a/src/table/tbody.tsx b/src/table/tbody.tsx index f48aede61..4579fe935 100644 --- a/src/table/tbody.tsx +++ b/src/table/tbody.tsx @@ -30,6 +30,7 @@ export interface TableBodyProps extends BaseTableProps { rowHeight: number; trs: Map; bufferSize: number; + tableContentElm: HTMLDivElement; handleRowMounted: () => void; } @@ -44,6 +45,7 @@ export const extendTableProps = [ 'firstFullRow', 'lastFullRow', 'rowspanAndColspan', + 'scroll', 'onCellClick', 'onPageChange', 'onRowClick', @@ -56,8 +58,6 @@ export const extendTableProps = [ 'onScroll', 'onScrollX', 'onScrollY', - 'isColDraggable', - 'isRowDraggable', ]; export default defineComponent({ @@ -78,12 +78,12 @@ export default defineComponent({ rowHeight: Number, trs: Map as PropType, bufferSize: Number, + // eslint-disable-next-line + tableContentElm: {}, handleRowMounted: Function as PropType, renderExpandedRow: Function as PropType, firstFullRow: [String, Function] as PropType, lastFullRow: [String, Function] as PropType, - isColDraggable: Boolean, - isRowDraggable: Boolean, ...pick(baseTableProps, extendTableProps), }, @@ -91,15 +91,9 @@ export default defineComponent({ setup(props: TableBodyProps, { emit }: SetupContext) { const renderTNode = useTNodeJSX(); const { t, global } = useConfig('table'); - const { tableFullRowClasses, tableBaseClass, tableDraggableClasses } = useClassName(); + const { tableFullRowClasses, tableBaseClass } = useClassName(); - const tbodyClasses = computed(() => [ - tableBaseClass.body, - { - [tableDraggableClasses.bodyCol]: props.isColDraggable, - [tableDraggableClasses.bodyRow]: props.isRowDraggable, - }, - ]); + const tbodyClasses = computed(() => [tableBaseClass.body]); const isFixedLeftColumn = computed( () => props.isWidthOverflow && !!props.columns.find((col) => col.fixed === 'left'), @@ -214,8 +208,7 @@ export default defineComponent({ trs: this.trs, bufferSize: this.bufferSize, tableElm: this.tableElm, - isColDraggable: this.$props.isColDraggable, - isRowDraggable: this.$props.isRowDraggable, + tableContentElm: this.tableContentElm, }; if (this.onCellClick) { trProps.onCellClick = this.onCellClick; @@ -266,11 +259,7 @@ export default defineComponent({ '-webkit-transform': translate, }; return ( - + {isEmpty ? renderEmpty(h, this.columns) : list} ); diff --git a/src/table/tr.tsx b/src/table/tr.tsx index 08b6c8d19..f35c1215a 100644 --- a/src/table/tr.tsx +++ b/src/table/tr.tsx @@ -3,13 +3,12 @@ import { PropType, SetupContext, h, - computed, ref, - Ref, - onMounted, + reactive, + computed, onBeforeUnmount, - inject, - nextTick, + onMounted, + toRefs, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; import upperFirst from 'lodash/upperFirst'; @@ -25,6 +24,7 @@ import { BaseTableCellParams, TableRowData, RowspanColspan, TdPrimaryTableProps, PrimaryTableCellParams, } from './type'; import baseTableProps from './base-table-props'; +import useLazyLoad from './hooks/useLazyLoad'; export interface RenderTdExtra { rowAndColFixedPosition: RowAndColFixedPosition; @@ -37,26 +37,9 @@ export interface RenderEllipsisCellParams { cellNode: any; } -export type TrPropsKeys = - | 'rowKey' - | 'rowClassName' - | 'columns' - | 'fixedRows' - | 'footData' - | 'rowAttributes' - | 'rowspanAndColspan' - | 'onCellClick' - | 'onRowClick' - | 'onRowDblclick' - | 'onRowMouseover' - | 'onRowMousedown' - | 'onRowMouseenter' - | 'onRowMouseleave' - | 'onRowMouseup'; - export type TrCommonProps = Pick; -export const TABLE_PROPS: TrPropsKeys[] = [ +export const TABLE_PROPS = [ 'rowKey', 'rowClassName', 'columns', @@ -64,6 +47,7 @@ export const TABLE_PROPS: TrPropsKeys[] = [ 'footData', 'rowAttributes', 'rowspanAndColspan', + 'scroll', 'onCellClick', 'onRowClick', 'onRowDblclick', @@ -72,7 +56,9 @@ export const TABLE_PROPS: TrPropsKeys[] = [ 'onRowMouseenter', 'onRowMouseleave', 'onRowMouseup', -]; +] as const; + +export type TrPropsKeys = typeof TABLE_PROPS[number]; export interface TrProps extends TrCommonProps { row: TableRowData; @@ -88,8 +74,7 @@ export interface TrProps extends TrCommonProps { rowHeight: number; trs: Map; bufferSize: number; - isColDraggable: Boolean; - isRowDraggable: Boolean; + tableContentElm: HTMLDivElement; } export const ROW_LISTENERS = ['click', 'dblclick', 'mouseover', 'mousedown', 'mouseenter', 'mouseleave', 'mouseup']; @@ -130,12 +115,15 @@ export default defineComponent({ trs: Map as PropType, bufferSize: Number, isVirtual: Boolean, + // eslint-disabled-next-line tableElm: {}, - isColDraggable: Boolean, - isRowDraggable: Boolean, + // eslint-disabled-next-line + tableContentElm: {}, }, setup(props: TrProps, context: SetupContext) { + const { tableContentElm } = toRefs(props); + const trRef = ref(null); const { tdEllipsisClass, tableBaseClass, @@ -144,6 +132,7 @@ export default defineComponent({ tdAlignClasses, tableDraggableClasses, } = useClassName(); + const trStyles = computed(() => getRowFixedStyles( get(props.row, props.rowKey || 'id'), props.rowIndex, @@ -164,6 +153,12 @@ export default defineComponent({ return [trStyles.value?.classes, customClasses]; }); + const { hasLazyLoadHolder, tRowHeight } = useLazyLoad( + tableContentElm, + trRef, + reactive({ ...props.scroll, rowIndex: props.rowIndex }), + ); + const getTrListeners = (row: TableRowData, rowIndex: number) => { const trListeners: { [eventName: string]: (e: MouseEvent) => void } = {}; // add events to row @@ -178,69 +173,16 @@ export default defineComponent({ return trListeners; }; - const observe = (element: HTMLElement, root: HTMLElement, callback: Function, marginBottom: number) => { - if (!window || !window.IntersectionObserver) { - callback(); - return; - } - try { - const io = new window.IntersectionObserver( - (entries) => { - const entry = entries[0]; - if (entry.isIntersecting) { - callback(); - io.unobserve(element); - } - }, - { - rootMargin: `0px 0px ${marginBottom}px 0px`, - root, - }, - ); - io.observe(element); - return io; - } catch (e) { - console.error(e); - callback(); - } - }; - const tr = ref(null); - const isInit = ref(props.rowIndex === 0); - const requestAnimationFrame = window.requestAnimationFrame || ((cb) => setTimeout(cb, 16.6)); - const init = () => { - !isInit.value - && requestAnimationFrame(() => { - isInit.value = true; - }); - }; - onMounted(() => { const { - rowIndex, rowHeight, bufferSize, trs, row: rowData, scrollType, isVirtual, + trs, row: rowData, scrollType, isVirtual, } = props; if (scrollType === 'virtual') { if (isVirtual) { const { $index } = rowData; - trs.set($index, tr.value); + trs.set($index, trRef.value); context.emit('onRowMounted'); } - } else if (scrollType === 'lazy') { - const tableContentRef: Ref = inject('tableContentRef'); - const rowHeightRef: Ref = inject('rowHeightRef'); - nextTick(() => { - if (rowHeight === undefined) { - if (rowIndex === 0) { - // 获取第一行高度 - const { offsetHeight } = tr.value; - rowHeightRef.value = offsetHeight; - } else { - const height = rowHeightRef.value; - observe(tr.value, tableContentRef.value, init, height * bufferSize); - } - } else { - observe(tr.value, tableContentRef.value, init, rowHeight * bufferSize); - } - }); } }); @@ -253,6 +195,7 @@ export default defineComponent({ }); return { + trRef, tableColFixedClasses, tableDraggableClasses, tSlots: context.slots, @@ -262,9 +205,9 @@ export default defineComponent({ trStyles, classes, trAttributes, + tRowHeight, + hasLazyLoadHolder, getTrListeners, - tr, - isInit, }; }, @@ -325,10 +268,8 @@ export default defineComponent({ render(h) { const { - row, rowIndex, dataLength, rowAndColFixedPosition, scrollType, isInit, + row, rowIndex, dataLength, rowAndColFixedPosition, } = this; - const hasHolder = scrollType === 'lazy' && !isInit; - const rowHeightRef: Ref = inject('rowHeightRef'); const columVNodeList = this.columns?.map((col, colIndex) => { const cellSpans: RowspanColspan = {}; const params = { @@ -353,19 +294,15 @@ export default defineComponent({ }); }); const attrs = this.trAttributes || {}; - // 拖拽设置data-id属性，用于排序 - if (this.isColDraggable || this.isRowDraggable) { - attrs['data-id'] = get(row, this.rowKey); - } return ( - {hasHolder ? [] : columVNodeList} + {this.hasLazyLoadHolder ? [] : columVNodeList} ); }, diff --git a/src/table/type.ts b/src/table/type.ts index 843fca588..15ab14236 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -8,13 +8,14 @@ import { AffixProps } from '../affix'; import { LoadingProps } from '../loading'; import { PaginationProps, PageInfo } from '../pagination'; import { PopupProps } from '../popup'; -import { CheckboxGroupProps } from '../checkbox'; -import { DialogProps } from '../dialog'; import { CheckboxGroupValue } from '../checkbox'; import { SortableEvent } from 'sortablejs'; import { CheckboxProps } from '../checkbox'; import { RadioProps } from '../radio'; import { InputProps } from '../input'; +import { ButtonProps } from '../button'; +import { CheckboxGroupProps } from '../checkbox'; +import { DialogProps } from '../dialog'; import { TNode, OptionData, SizeEnum, ClassName, HTMLElementAttributes } from '../common'; export interface TdBaseTableProps { @@ -23,6 +24,10 @@ export interface TdBaseTableProps { * @default false */ bordered?: boolean; + /** + * 表格底部内容，可以用于自定义列设置等 + */ + bottomContent?: string | TNode; /** * 列配置，泛型 T 指表格数据类型 * @default [] @@ -137,7 +142,7 @@ export interface TdBaseTableProps { */ tableLayout?: 'auto' | 'fixed'; /** - * 表格顶部内容，可以用于自定义列设置等 + * 表格顶部内容，可以用于自定义列设置、顶部查询条件等 */ topContent?: string | TNode; /** @@ -259,13 +264,17 @@ export interface TdPrimaryTableProps */ asyncLoading?: 'loading' | 'load-more' | TNode; /** - * 自定义显示列控制器，值为空不会显示。
`columnController.fields` 表示只允许用户对数组里面的列进行显示或隐藏的控制，默认为全部字段。
`columnController.displayType` 是指字段呈现方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐，默认为 `auto-width`。
支持透传 CheckboxGroup 和 Dialog 组件等全部属性 + * 自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档 */ columnController?: TableColumnController; /** - * 【讨论中】自定义显示列控制器的内容呈现，可以填充任意内容 + * 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制 + */ + columnControllerVisible?: boolean; + /** + * 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制，非受控属性 */ - columnControllerContent?: string | TNode; + defaultColumnControllerVisible?: boolean; /** * 列配置，泛型 T 指表格数据类型 * @default [] @@ -280,10 +289,10 @@ export interface TdPrimaryTableProps */ defaultDisplayColumns?: CheckboxGroupValue; /** - * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`drag-col` 表示通过专门的 拖拽列 进行拖拽排序 - * @default drag-col + * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`col` 表示通过专门的 拖拽列 进行拖拽排序。`drag-col` 已废弃，请勿使用 + * @default col */ - dragSort?: 'row' | 'drag-col'; + dragSort?: 'row' | 'col' | 'drag-col'; /** * 展开行内容，泛型 T 指表格数据类型 */ @@ -349,7 +358,7 @@ export interface TdPrimaryTableProps */ sortIcon?: TNode; /** - * 允许表格行拖拽时排序 + * 允许表格行拖拽时排序。请更为使用 `dragSort="row"` * @default false * @deprecated */ @@ -367,15 +376,19 @@ export interface TdPrimaryTableProps */ onChange?: (data: TableChangeData, context: TableChangeContext) => void; /** - * 【开发中】列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列 + * 确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列 */ onColumnChange?: (context: PrimaryTableColumnChange) => void; + /** + * 列配置弹窗显示或隐藏变化时触发 + */ + onColumnControllerVisibleChange?: (visible: boolean, context: { trigger: 'cancel' | 'confirm' }) => void; /** * 本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源 */ onDataChange?: (data: Array, context: TableDataChangeContext) => void; /** - * 列配置选中列发生变化时触发 + * 确认列配置时触发 */ onDisplayColumnsChange?: (value: CheckboxGroupValue) => void; /** @@ -558,7 +571,7 @@ export interface TableScroll { */ isFixedRowHeight?: boolean; /** - * 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。
`scroll.type` 为 `lazy` 时，`rowHeight` 用于给未渲染的行节点指定一个初始高度，该属性默认会设置为表格第一行的行高（滚动加载行数量 = 滚动距离 / rowHeight）。
`scroll.type` 为 `virtual` 时，`rowHeight` 用于估算每行的大致高度，从而决定应该渲染哪些行，请尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 + * 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 */ rowHeight?: number; /** @@ -572,6 +585,40 @@ export interface TableScroll { type: 'lazy' | 'virtual'; } +export interface TableColumnController { + /** + * 自定义列配置按钮，包括 Button 组件的全部属性。比如：按钮颜色和文本 + */ + buttonProps?: ButtonProps; + /** + * 透传复选框组件全部特性 + */ + checkboxProps?: CheckboxGroupProps; + /** + * 透传弹框组件全部特性，如：防止滚动穿透 + */ + dialogProps?: DialogProps; + /** + * 指列配置弹框中，各列的字段平铺方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐 + * @default auto-width + */ + displayType?: 'fixed-width' | 'auto-width'; + /** + * 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段 + */ + fields?: string[]; + /** + * 是否隐藏表格组件内置的“列配置”按钮 + * @default false + */ + hideTriggerButton?: boolean; + /** + * 列配置按钮基于表格的放置位置：左上角、右上角、左下角、右下角等 + * @default top-right + */ + placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; +} + export type TableRowAttributes = | HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) @@ -628,13 +675,6 @@ export type RenderType = 'cell' | 'title'; export type DataType = TableRowData; -export interface TableColumnController { - fields?: string[]; - displayType: 'fixed-width' | 'auto-width'; - checkboxProps?: CheckboxGroupProps; - dialogProps?: DialogProps; -} - export interface TableExpandedRowParams { row: T; index: number; @@ -682,6 +722,7 @@ export interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; + e?: Event; } export interface TableDataChangeContext { diff --git a/src/table/utils.ts b/src/table/utils.ts index 50766ead4..206b39453 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -63,6 +63,8 @@ export function formatRowClassNames( // 根据行唯一标识设置行类名 const rowId = get(row, rowKey || 'id'); tClass[rowId] && (tClass = tClass[rowId]); + } else if (tClass instanceof Array) { + tClass = formatRowClassNames(tClass, params, rowKey); } customClasses = customClasses.concat(tClass); } @@ -144,3 +146,15 @@ export function setSortableConfig(target: TargetDom, options: SortableOptions) { } return new Sortable(target as any, { ...options }); } + +// 多级表头，列配置场景，获取 currentRow +export function getCurrentRowByKey(columns: T[], key: string): T { + if (!columns || !key) return; + const col = columns?.find((t) => t.colKey === key); + if (col) return col; + for (let i = 0, len = columns.length; i < len; i++) { + if (columns[i]?.children?.length) { + return getCurrentRowByKey(columns[i]?.children, key); + } + } +} diff --git a/src/utils/render-tnode.ts b/src/utils/render-tnode.ts index 894e6b898..b0af256c1 100644 --- a/src/utils/render-tnode.ts +++ b/src/utils/render-tnode.ts @@ -4,7 +4,7 @@ import { PropType, CreateElement, VNode, VNodeChildren, RenderContext, } from 'vue/types/umd'; import { ScopedSlotReturnValue } from 'vue/types/vnode'; -import isObject from 'lodash/isObject'; +// import isObject from 'lodash/isObject'; import { TNode } from '../common'; // 组件render属性的ts类型 @@ -87,11 +87,11 @@ interface JSXRenderContext { */ export const renderTNodeJSX = (vm: VmType, name: string, options?: ScopedSlotReturnValue | JSXRenderContext) => { // 是否静默日志 - const isSilent = Boolean(isObject(options) && 'silent' in options && options.silent); + // const isSilent = Boolean(isObject(options) && 'silent' in options && options.silent); - if (vm.$scopedSlots[name] && vm[name] && vm[name] !== true && !isSilent) { - console.warn(`Both $scopedSlots.${name} and $props.${name} exist, $props.${name} is preferred`); - } + // if (vm.$scopedSlots[name] && vm[name] && vm[name] !== true && !isSilent) { + // console.warn(`Both $scopedSlots.${name} and $props.${name} exist, $props.${name} is preferred`); + // } const params = typeof options === 'object' && 'params' in options ? options.params : null; const defaultNode = typeof options === 'object' && 'defaultNode' in options ? options.defaultNode : options; const propsNode = vm[name]; diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 231c3ec19..378c30a08 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -2829,6 +2829,14 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/dialog.vue c
`; +exports[`ssr snapshot test renders ./examples/config-provider/demos/global.vue correctly 1`] = ` +
+
使用t-config-provider包裹业务功能的最外层组件，点击下方图标查看示例代码

+
英文语言包引入路径：import enConfig from 'tdesign-vue/locale/en_US';

+
中文语言包引入路径：import enConfig from 'tdesign-vue/locale/zh_CN';
+
+`; + exports[`ssr snapshot test renders ./examples/config-provider/demos/others.vue correctly 1`] = `
@@ -11474,9 +11482,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`]
-
-
详情信息
-
+
详情信息
@@ -11489,9 +11495,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`] 0 否 -
-
读取 5 个数据的嵌套信息值
-
+
读取 5 个数据的嵌套信息值
@@ -11501,9 +11505,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`] [] 否 -
-
读取 6 个数据的嵌套信息值
-
+
读取 6 个数据的嵌套信息值
@@ -11513,9 +11515,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`] {} 否 -
-
读取 7 个数据的嵌套信息值
-
+
读取 7 个数据的嵌套信息值
@@ -11525,9 +11525,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`] - 是 -
-
读取 8 个数据的嵌套信息值
-
+
读取 8 个数据的嵌套信息值
@@ -11537,9 +11535,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/base.vue correctly 1`] 0 否 -
-
读取 9 个数据的嵌套信息值
-
+
读取 9 个数据的嵌套信息值
@@ -11634,9 +11630,138 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-cell.vue correc exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correctly 1`] = `
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
序号
+ 		+
平台
+ 		+
类型
+ 		+
默认值
+ 		+
是否必传
+ 		+
+
详情信息
+
+
0共有String-是 +
读取 0 个数据的嵌套信息值
+
1私有Number0否 +
读取 1 个数据的嵌套信息值
+
2共有Array[]否 +
读取 2 个数据的嵌套信息值
+
3私有Object{}否 +
读取 3 个数据的嵌套信息值
+
4共有String-是 +
读取 4 个数据的嵌套信息值
+
+
+
+
+
共 100 项数据
+
+
5 + +
+
+
+ +
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • + +
    • +
  • 20
    • +
+
+ +
+
+
+
+
+`; + +exports[`ssr snapshot test renders ./examples/table/demos/custom-col-button.vue correctly 1`] = ` +
+
+
+
+


+
-
@@ -11670,9 +11795,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct
-
-
详情信息
-
+
详情信息
@@ -11685,9 +11808,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct - 是 -
-
读取 0 个数据的嵌套信息值
-
+
读取 0 个数据的嵌套信息值
@@ -11697,9 +11818,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct 0 否 -
-
读取 1 个数据的嵌套信息值
-
+
读取 1 个数据的嵌套信息值
@@ -11709,9 +11828,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct [] 否 -
-
读取 2 个数据的嵌套信息值
-
+
读取 2 个数据的嵌套信息值
@@ -11721,9 +11838,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct {} 否 -
-
读取 3 个数据的嵌套信息值
-
+
读取 3 个数据的嵌套信息值
@@ -11733,15 +11848,40 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correct - 是 -
-
读取 4 个数据的嵌套信息值
-
+
读取 4 个数据的嵌套信息值
+
+
+
共 100 项数据
+
+
5 + +
+
+
+ +
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • + +
    • +
  • 20
    • +
+
+ +
+
+
`; @@ -11778,9 +11918,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-footer.vue corr
-
-
详情信息
-
+
详情信息
@@ -11793,9 +11931,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-footer.vue corr - 是 -
-
读取 0 个数据的嵌套信息值
-
+
读取 0 个数据的嵌套信息值
@@ -11805,9 +11941,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-footer.vue corr 0 否 -
-
读取 1 个数据的嵌套信息值
-
+
读取 1 个数据的嵌套信息值
@@ -11817,9 +11951,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-footer.vue corr [] 否 -
-
读取 2 个数据的嵌套信息值
-
+
读取 2 个数据的嵌套信息值
@@ -11984,7 +12116,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/data-sort.vue correctl exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue correctly 1`] = `
-
+
@@ -12013,7 +12145,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr - +
@@ -12078,7 +12210,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-col-sort.vue corr exports[`ssr snapshot test renders ./examples/table/demos/drag-sort.vue correctly 1`] = `
-
+
@@ -12103,7 +12235,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/drag-sort.vue correctl - + @@ -12656,9 +12786,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre @@ -12670,9 +12798,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre @@ -12684,9 +12810,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre @@ -12698,9 +12822,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre @@ -12712,9 +12834,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre @@ -12760,9 +12880,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12789,9 +12905,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12801,9 +12915,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12813,9 +12925,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12825,9 +12935,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12837,9 +12945,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12849,9 +12955,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12861,9 +12965,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12873,9 +12975,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12885,9 +12985,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12897,9 +12995,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12909,9 +13005,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12921,9 +13015,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12933,9 +13025,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12945,9 +13035,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12957,9 +13045,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12969,9 +13055,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12981,9 +13065,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -12993,9 +13075,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -13005,9 +13085,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre @@ -13315,44 +13393,32 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly @@ -13384,44 +13450,32 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly @@ -13453,44 +13507,32 @@ exports[`ssr snapshot test renders ./examples/table/demos/loading.vue correctly @@ -13588,7 +13630,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre
-
@@ -13662,9 +13704,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre
@@ -13695,9 +13735,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre @@ -13854,9 +13892,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13869,9 +13905,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13881,9 +13915,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13893,9 +13925,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13905,9 +13935,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13917,9 +13945,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct @@ -13985,9 +14011,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination-ajax.vue co @@ -14428,16 +14452,12 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] @@ -14473,18 +14489,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] @@ -14495,18 +14507,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] @@ -14517,18 +14525,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] @@ -14539,18 +14543,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`] diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap index be025473c..59620ede3 100644 --- a/test/unit/table/__snapshots__/demo.test.js.snap +++ b/test/unit/table/__snapshots__/demo.test.js.snap @@ -533,12 +533,10 @@ exports[`Table Table baseVue demo works fine 1`] = `
-
-
- 详情信息 -
+
+ 详情信息
@@ -579,12 +577,10 @@ exports[`Table Table baseVue demo works fine 1`] = `
@@ -620,12 +616,10 @@ exports[`Table Table baseVue demo works fine 1`] = ` @@ -661,12 +655,10 @@ exports[`Table Table baseVue demo works fine 1`] = ` @@ -702,12 +694,10 @@ exports[`Table Table baseVue demo works fine 1`] = ` @@ -743,12 +733,10 @@ exports[`Table Table baseVue demo works fine 1`] = ` @@ -1047,46 +1035,23 @@ exports[`Table Table customColVue demo works fine 1`] = `
+
+ +
+
-
-
- -
-
@@ -1162,12 +1127,10 @@ exports[`Table Table customColVue demo works fine 1`] = `
-
-
- 详情信息 -
+
+ 详情信息
@@ -1207,12 +1170,10 @@ exports[`Table Table customColVue demo works fine 1`] = `
@@ -1247,12 +1208,10 @@ exports[`Table Table customColVue demo works fine 1`] = ` @@ -1287,12 +1246,10 @@ exports[`Table Table customColVue demo works fine 1`] = ` @@ -1327,12 +1284,10 @@ exports[`Table Table customColVue demo works fine 1`] = ` @@ -1367,12 +1322,10 @@ exports[`Table Table customColVue demo works fine 1`] = ` @@ -1380,125 +1333,257 @@ exports[`Table Table customColVue demo works fine 1`] = `
JQTest1 @@ -12639,9 +12771,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-column.vue corre
-
-
详情信息
-
+
详情信息
是 删除 -
-
读取 0 个数据的嵌套信息值
-
+
读取 0 个数据的嵌套信息值
否 删除 -
-
读取 1 个数据的嵌套信息值
-
+
读取 1 个数据的嵌套信息值
否 删除 -
-
读取 2 个数据的嵌套信息值
-
+
读取 2 个数据的嵌套信息值
否 删除 -
-
读取 3 个数据的嵌套信息值
-
+
读取 3 个数据的嵌套信息值
是 删除 -
-
读取 4 个数据的嵌套信息值
-
+
读取 4 个数据的嵌套信息值
-
-
详情信息
-
+
详情信息
 @@ -12777,9 +12895,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/fixed-header.vue corre - 是 -
-
读取 0 个数据的嵌套信息值
-
+
读取 0 个数据的嵌套信息值
 数据源
0 否 -
-
读取 1 个数据的嵌套信息值
-
+
读取 1 个数据的嵌套信息值
 数据源
[] 否 -
-
读取 2 个数据的嵌套信息值
-
+
读取 2 个数据的嵌套信息值
 数据源
{} 否 -
-
读取 3 个数据的嵌套信息值
-
+
读取 3 个数据的嵌套信息值
 数据源
- 是 -
-
读取 4 个数据的嵌套信息值
-
+
读取 4 个数据的嵌套信息值
 数据源
0 否 -
-
读取 5 个数据的嵌套信息值
-
+
读取 5 个数据的嵌套信息值
 数据源
[] 否 -
-
读取 6 个数据的嵌套信息值
-
+
读取 6 个数据的嵌套信息值
 数据源
{} 否 -
-
读取 7 个数据的嵌套信息值
-
+
读取 7 个数据的嵌套信息值
 数据源
- 是 -
-
读取 8 个数据的嵌套信息值
-
+
读取 8 个数据的嵌套信息值
 数据源
0 否 -
-
读取 9 个数据的嵌套信息值
-
+
读取 9 个数据的嵌套信息值
 数据源
[] 否 -
-
读取 10 个数据的嵌套信息值
-
+
读取 10 个数据的嵌套信息值
 数据源
{} 否 -
-
读取 11 个数据的嵌套信息值
-
+
读取 11 个数据的嵌套信息值
 数据源
- 是 -
-
读取 12 个数据的嵌套信息值
-
+
读取 12 个数据的嵌套信息值
 数据源
0 否 -
-
读取 13 个数据的嵌套信息值
-
+
读取 13 个数据的嵌套信息值
 数据源
[] 否 -
-
读取 14 个数据的嵌套信息值
-
+
读取 14 个数据的嵌套信息值
 数据源
{} 否 -
-
读取 15 个数据的嵌套信息值
-
+
读取 15 个数据的嵌套信息值
 数据源
- 是 -
-
读取 16 个数据的嵌套信息值
-
+
读取 16 个数据的嵌套信息值
 数据源
0 否 -
-
读取 17 个数据的嵌套信息值
-
+
读取 17 个数据的嵌套信息值
 数据源
[] 否 -
-
读取 18 个数据的嵌套信息值
-
+
读取 18 个数据的嵌套信息值
 数据源
{} 否 -
-
读取 19 个数据的嵌套信息值
-
+
读取 19 个数据的嵌套信息值
 数据源
-
-
类型
-
+
类型
-
-
平台
-
+
平台
-
-
属性
-
+
属性
-
-
默认值
-
+
默认值
-
-
是否必传
-
+
是否必传
-
-
说明
-
+
说明
-
-
类型
-
+
类型
-
-
平台
-
+
平台
-
-
属性
-
+
属性
-
-
默认值
-
+
默认值
-
-
是否必传
-
+
是否必传
-
-
说明
-
+
说明
-
-
类型
-
+
类型
-
-
平台
-
+
平台
-
-
属性
-
+
属性
-
-
默认值
-
+
默认值
-
-
是否必传
-
+
是否必传
-
-
说明
-
+
说明
-
-
说明
-
+
说明
-
-
描述
-
+
描述
-
-
详情信息
-
+
详情信息
0 否 -
-
读取 5 个数据的嵌套信息值
-
+
读取 5 个数据的嵌套信息值
[] 否 -
-
读取 6 个数据的嵌套信息值
-
+
读取 6 个数据的嵌套信息值
{} 否 -
-
读取 7 个数据的嵌套信息值
-
+
读取 7 个数据的嵌套信息值
- 是 -
-
读取 8 个数据的嵌套信息值
-
+
读取 8 个数据的嵌套信息值
0 否 -
-
读取 9 个数据的嵌套信息值
-
+
读取 9 个数据的嵌套信息值
-
-
邮箱
-
+
邮箱
-
-
编号
-
+
编号
-
-
名称
-
+
名称
 @@ -14454,15 +14474,11 @@ exports[`ssr snapshot test renders ./examples/table/demos/tree.vue correctly 1`]
-
-
0
-
+
0
 -
-
-
我是 0_1 号（第 1 页）
-
+
+
我是 0_1 号（第 1 页）
 共有
-
-
1
-
+
1
 -
-
-
- - - 我是 1_1 号（第 1 页）
-
+
+
+ + + 我是 1_1 号（第 1 页）
 私有
-
-
2
-
+
2
 -
-
-
- - - 我是 2_1 号（第 1 页）
-
+
+
+ + + 我是 2_1 号（第 1 页）
 共有
-
-
3
-
+
3
 -
-
-
- - - 我是 3_1 号（第 1 页）
-
+
+
+ + + 我是 3_1 号（第 1 页）
 私有
-
-
4
-
+
4
 -
-
-
- - - 我是 4_1 号（第 1 页）
-
+
+
+ + + 我是 4_1 号（第 1 页）
 共有 -
-
- 读取 5 个数据的嵌套信息值 -
+
+ 读取 5 个数据的嵌套信息值
-
-
- 读取 6 个数据的嵌套信息值 -
+
+ 读取 6 个数据的嵌套信息值
-
-
- 读取 7 个数据的嵌套信息值 -
+
+ 读取 7 个数据的嵌套信息值
-
-
- 读取 8 个数据的嵌套信息值 -
+
+ 读取 8 个数据的嵌套信息值
-
-
- 读取 9 个数据的嵌套信息值 -
+
+ 读取 9 个数据的嵌套信息值
-
-
- 读取 0 个数据的嵌套信息值 -
+
+ 读取 0 个数据的嵌套信息值
-
-
- 读取 1 个数据的嵌套信息值 -
+
+ 读取 1 个数据的嵌套信息值
-
-
- 读取 2 个数据的嵌套信息值 -
+
+ 读取 2 个数据的嵌套信息值
-
-
- 读取 3 个数据的嵌套信息值 -
+
+ 读取 3 个数据的嵌套信息值
-
-
- 读取 4 个数据的嵌套信息值 -
+
+ 读取 4 个数据的嵌套信息值
-
-
-`; - -exports[`Table Table customFooterVue demo works fine 1`] = ` -
-
- - - - - - - - - - - - - - - - - - - - +
-
- -
-
- 序号 -
- 		-
- 平台 -
- 		-
- 类型 -
- 		-
- 默认值 -
- 		-
- 是否必传 -
- 		-
-
-
- 详情信息 -
-
-
-
- 0 - + +0 + + + 5 + + + + + + +
+ + + +
+
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
  • + 5 +
    • +
  • + + + +
    • +
  • + 20 +
    • +
+
+ + + +
+ + + + +`; + +exports[`Table Table customFooterVue demo works fine 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + @@ -1520,12 +1605,10 @@ exports[`Table Table customFooterVue demo works fine 1`] = ` @@ -1560,12 +1643,10 @@ exports[`Table Table customFooterVue demo works fine 1`] = ` @@ -1600,12 +1681,10 @@ exports[`Table Table customFooterVue demo works fine 1`] = ` @@ -2122,7 +2201,7 @@ exports[`Table Table dragSortVue demo works fine 1`] = ` class="item" >
-
-
- 详情信息 -
+
+ 详情信息
@@ -4318,12 +4395,10 @@ exports[`Table Table fixedColumnVue demo works fine 1`] = ` @@ -4372,12 +4447,10 @@ exports[`Table Table fixedColumnVue demo works fine 1`] = ` @@ -4426,12 +4499,10 @@ exports[`Table Table fixedColumnVue demo works fine 1`] = ` @@ -4480,12 +4551,10 @@ exports[`Table Table fixedColumnVue demo works fine 1`] = ` @@ -4534,12 +4603,10 @@ exports[`Table Table fixedColumnVue demo works fine 1`] = ` @@ -5899,12 +5966,10 @@ exports[`Table Table fixedHeaderVue demo works fine 1`] = `
-
-
- 详情信息 -
+
+ 详情信息
@@ -5949,12 +6014,10 @@ exports[`Table Table fixedHeaderVue demo works fine 1`] = `
+
+ 序号 +
+ 		+
+ 平台 +
+ 		+
+ 类型 +
+ 		+
+ 默认值 +
+ 		+
+ 是否必传 +
+ 		+
+
+ 详情信息 +
+
+
+ 0 + 共有 -
-
- 读取 0 个数据的嵌套信息值 -
+
+ 读取 0 个数据的嵌套信息值
-
-
- 读取 1 个数据的嵌套信息值 -
+
+ 读取 1 个数据的嵌套信息值
-
-
- 读取 2 个数据的嵌套信息值 -
+
+ 读取 2 个数据的嵌套信息值
-
-
- 读取 0 个数据的嵌套信息值 -
+
+ 读取 0 个数据的嵌套信息值
-
-
- 读取 1 个数据的嵌套信息值 -
+
+ 读取 1 个数据的嵌套信息值
-
-
- 读取 2 个数据的嵌套信息值 -
+
+ 读取 2 个数据的嵌套信息值
-
-
- 读取 3 个数据的嵌套信息值 -
+
+ 读取 3 个数据的嵌套信息值
-
-
- 读取 4 个数据的嵌套信息值 -
+
+ 读取 4 个数据的嵌套信息值
-
-
- 读取 0 个数据的嵌套信息值 -
+
+ 读取 0 个数据的嵌套信息值
-
-
- 读取 1 个数据的嵌套信息值 -
+
+ 读取 1 个数据的嵌套信息值
-
-
- 读取 2 个数据的嵌套信息值 -
+
+ 读取 2 个数据的嵌套信息值
-
-
- 读取 3 个数据的嵌套信息值 -
+
+ 读取 3 个数据的嵌套信息值
-
-
- 读取 4 个数据的嵌套信息值 -
+
+ 读取 4 个数据的嵌套信息值
-
-
- 读取 5 个数据的嵌套信息值 -
+
+ 读取 5 个数据的嵌套信息值
-
-
- 读取 6 个数据的嵌套信息值 -
+
+ 读取 6 个数据的嵌套信息值
-
-
- 读取 7 个数据的嵌套信息值 -
+
+ 读取 7 个数据的嵌套信息值
-
-
- 读取 8 个数据的嵌套信息值 -
+
+ 读取 8 个数据的嵌套信息值
-
-
- 读取 9 个数据的嵌套信息值 -
+
+ 读取 9 个数据的嵌套信息值
-
-
- 读取 10 个数据的嵌套信息值 -
+
+ 读取 10 个数据的嵌套信息值
-
-
- 读取 11 个数据的嵌套信息值 -
+
+ 读取 11 个数据的嵌套信息值
-
-
- 读取 12 个数据的嵌套信息值 -
+
+ 读取 12 个数据的嵌套信息值
-
-
- 读取 13 个数据的嵌套信息值 -
+
+ 读取 13 个数据的嵌套信息值
-
-
- 读取 14 个数据的嵌套信息值 -
+
+ 读取 14 个数据的嵌套信息值
-
-
- 读取 15 个数据的嵌套信息值 -
+
+ 读取 15 个数据的嵌套信息值
-
-
- 读取 16 个数据的嵌套信息值 -
+
+ 读取 16 个数据的嵌套信息值
-
-
- 读取 17 个数据的嵌套信息值 -
+
+ 读取 17 个数据的嵌套信息值
-
-
- 读取 18 个数据的嵌套信息值 -
+
+ 读取 18 个数据的嵌套信息值
-
-
- 读取 19 个数据的嵌套信息值 -
+
+ 读取 19 个数据的嵌套信息值
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -11920,12 +13943,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 类型 -
+
+ 类型
@@ -11936,12 +13957,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 平台 -
+
+ 平台
@@ -11952,12 +13971,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 属性 -
+
+ 属性
@@ -11968,12 +13985,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 默认值 -
+
+ 默认值
@@ -11984,12 +13999,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 是否必传 -
+
+ 是否必传
@@ -12000,12 +14013,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 说明 -
+
+ 说明
@@ -12088,12 +14099,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 类型 -
+
+ 类型
@@ -12104,12 +14113,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 平台 -
+
+ 平台
@@ -12120,12 +14127,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 属性 -
+
+ 属性
@@ -12136,12 +14141,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 默认值 -
+
+ 默认值
@@ -12152,12 +14155,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 是否必传 -
+
+ 是否必传
@@ -12168,12 +14169,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 说明 -
+
+ 说明
@@ -12245,12 +14244,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 类型 -
+
+ 类型
@@ -12261,12 +14258,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 平台 -
+
+ 平台
@@ -12277,12 +14272,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 属性 -
+
+ 属性
@@ -12293,12 +14286,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 默认值 -
+
+ 默认值
@@ -12309,12 +14300,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 是否必传 -
+
+ 是否必传
@@ -12325,12 +14314,10 @@ exports[`Table Table loadingVue demo works fine 1`] = `
-
-
- 说明 -
+
+ 说明
@@ -12729,7 +14716,7 @@ exports[`Table Table multiHeaderVue demo works fine 1`] = ` class="t-table__top-content" >
@@ -13867,12 +15844,10 @@ exports[`Table Table paginationVue demo works fine 1`] = ` @@ -13907,12 +15882,10 @@ exports[`Table Table paginationVue demo works fine 1`] = ` @@ -13947,12 +15920,10 @@ exports[`Table Table paginationVue demo works fine 1`] = ` @@ -13987,12 +15958,10 @@ exports[`Table Table paginationVue demo works fine 1`] = ` @@ -16353,12 +18322,10 @@ exports[`Table Table treeVue demo works fine 1`] = `
-
-
- 编号 -
+
+ 编号
@@ -16369,12 +18336,10 @@ exports[`Table Table treeVue demo works fine 1`] = `
-
-
- 名称 -
+
+ 名称
@@ -16419,27 +18384,23 @@ exports[`Table Table treeVue demo works fine 1`] = `
@@ -16508,45 +18469,41 @@ exports[`Table Table treeVue demo works fine 1`] = ` @@ -16615,45 +18572,41 @@ exports[`Table Table treeVue demo works fine 1`] = ` @@ -16722,45 +18675,41 @@ exports[`Table Table treeVue demo works fine 1`] = ` @@ -16829,45 +18778,41 @@ exports[`Table Table treeVue demo works fine 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- 读取 5 个数据的嵌套信息值 -
+
+ 读取 5 个数据的嵌套信息值
-
-
- 读取 6 个数据的嵌套信息值 -
+
+ 读取 6 个数据的嵌套信息值
-
-
- 读取 7 个数据的嵌套信息值 -
+
+ 读取 7 个数据的嵌套信息值
-
-
- 读取 8 个数据的嵌套信息值 -
+
+ 读取 8 个数据的嵌套信息值
-
-
- 读取 9 个数据的嵌套信息值 -
+
+ 读取 9 个数据的嵌套信息值
-
-
- 0 -
+
+ 0
-
+
-
- 我是 0_1 号（第 1 页） -
+ 我是 0_1 号（第 1 页）
-
-
- 1 -
+
+ 1
-
+
-
- - - - - 我是 1_1 号（第 1 页） -
+ + + + 我是 1_1 号（第 1 页）
-
-
- 2 -
+
+ 2
-
+
-
- - - - - 我是 2_1 号（第 1 页） -
+ + + + 我是 2_1 号（第 1 页）
-
-
- 3 -
+
+ 3
-
+
-
- - - - - 我是 3_1 号（第 1 页） -
+ + + + 我是 3_1 号（第 1 页）
-
-
- 4 -
+
+ 4
-
+
-
- - - - - 我是 4_1 号（第 1 页） -
+ + + + 我是 4_1 号（第 1 页）