Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Table with Composition API and Some New Features #468

Merged

Conversation

chaishi
Copy link
Collaborator

@chaishi chaishi commented Mar 20, 2022

PR 重点在于重构 BaseTable/PrimaryTable/EnhancedTable 组件,使用 Composition API 的方式开发,顺带修复以下问题,特别是 table-layout: auto 存在的各种问题。

效果预览地址:https://preview-pr468-tdesign-vue-next.surge.sh/

⚠️ Breaking Change

  • BaseTable HTML 结构变更,写过 CSS 样式覆盖的同学需注意更新样式。由之前的两个 table 分别渲染 thead 和 tbody,更为一个 table
  • 行拖拽排序功能,使用方法有调整,从 sortOnRowDraggable 更为 dragSort='col'
  • 表头更为使用 th 标签,之前为 td,不符合语义
  • 事件 row-db-click 更为row-dblclickonRowDbClick 更为rowDblclick
  • 事件 row-hover 更为 row-mouseover, onRowHover 更为 onRowMouseover(本没有 rowHover 事件)
  • CSS 类名 t-table__row-first-full-row 更为 t-table__first-full-rowt-table__row-last-full-row 更为 t-table__last-full-row

🐛 Affix 组件 BUG FIX

  • 修复 onFixedChange 触发时机,在固定状态发生变化时才会触发该事件(改动之前为:滚动一直触发)

🐛 Table 组件 BUG FIX

💄 Table 组件 FEATURE

  • 排序交互变更:排序方式支持点击直接排序issue#480
  • 优化表格最后一列 ellipsis 浮层位置底部右对齐
  • 新增超出省略功能, ellipsis 支持透传 Popup 组件全部属性
  • 新增表尾合计行,支持固定在底部,支持多行合计,支持完全自定义内容 issue#116
  • 新增loadingProps 透传加载组件全部特性
  • 新增固定行(冻结行)
  • 新增排序图标自定义,插槽(slot='filterIcon')和渲染函数(props.filterIcon) 均可
  • 新增全局配置:过滤图标、空元素、异步加载文本配置、排序按钮文本配置
  • 新增 scroll 滚动事件
  • 新增表头吸顶功能,issue#216
  • 新增综合功能:多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置
  • 过滤功能,条件为真时,高亮筛选图标
  • 新增列拖拽排序功能,通过拖拽手柄调整表格排序

@github-actions
Copy link
Contributor

github-actions bot commented Mar 20, 2022

完成

@PengYYYYY PengYYYYY mentioned this pull request Mar 21, 2022
52 tasks
@chaishi chaishi changed the title Refactor Table with Composition API Refactor Table with Composition API and Some New Feature Mar 21, 2022
@chaishi chaishi changed the title Refactor Table with Composition API and Some New Feature Refactor Table with Composition API and Some New Features Mar 21, 2022
src/config-provider/useConfig.tsx Outdated Show resolved Hide resolved
src/hooks/useVirtualScroll.ts Show resolved Hide resolved
src/table/filter-controller.tsx Show resolved Hide resolved
src/table/filter-controller.tsx Outdated Show resolved Hide resolved
src/table/filter-controller.tsx Outdated Show resolved Hide resolved
src/table/hooks/useAsyncLoading.tsx Outdated Show resolved Hide resolved
src/table/hooks/useColumnController.tsx Outdated Show resolved Hide resolved
src/table/hooks/useColumnController.tsx Outdated Show resolved Hide resolved
src/table/hooks/useFilter.tsx Outdated Show resolved Hide resolved
@PengYYYYY
Copy link
Collaborator

image

@PengYYYYY
Copy link
Collaborator

image

@PengYYYYY
Copy link
Collaborator

image

固定左侧列
固定右侧列
这两个配置可以互斥一下

@PengYYYYY
Copy link
Collaborator

image

重置数据无效

@PengYYYYY
Copy link
Collaborator

image

行拖拽无效

@chaishi
Copy link
Collaborator Author

chaishi commented Mar 28, 2022

  1. https://user-images.githubusercontent.com/35833812/159855346-fe7ef8f4-28ff-483a-ad4f-49401cd53734.png
    这个问题,已知,没有找到方法处理,后面有时间再看(不影响正常使用)

  2. https://user-images.githubusercontent.com/35833812/159855390-bec3c4e7-9a73-4165-86d4-1645097abc04.png
    这个问题,已知,特地写的示例,已处理

  3. https://user-images.githubusercontent.com/35833812/159855749-4fee55ed-9c27-46f8-982a-22f677c486df.png
    拖拽排序,已支持

@PengYYYYY PengYYYYY merged commit 3a694f6 into Tencent:develop Apr 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants