[Feature Request]Design optimization of Table

[ziyoung]

Existing Component

是

Component Name

Table

Description

Table 常见的问题

1. 与固定列有关
   1. 出现多个 popover 组件 [Bug Report] Using popover in column with table column fixed will cause duplicate popover #10588
   2. 底部滚动条无法拖动 [Bug Report] When table components use totals, there is a fixed in the column, and the style is confused #5415 [Bug Report] table has lock table header, lock table column, and can not scroll when combined. #12666
   3. 固定列的表头不显示 [Bug Report] Table Column fixed prop can't work on multiple level column #9926
   4. 高度跟着不变化 [Bug Report] Element ui table layout breaks and does not align well when using 'append' slots and some table columns are fixed left/right #10671 [Bug Report] Fixed column height is not adaptive #12078
   5. 表头多余宽度 http://jsrun.net/FGXKp/edit
2. 性能问题
   1. 数据量大的时候，table 性能优化 [Feature Request] Performance improvement for large Table's #4359 [Feature Request] Table rendering is too slow when 1000 records (hopefully you can support scrolling according to scroll bars) #6089
   2. 鼠标在 table 的悬浮时触发重复渲染 [Bug Report] ElTable component calls row/cell class/style functions on hover event #14550(已修复)
3. 滚动条问题
   1. 出现滚动时，滚动条的位置 [Bug Report] Table component scroll bar exception problem #7564
   2. 滚动条无法拖动（1.1 中已有描述）
   3. 自定义滚动条显示问题 [Bug Report] After changing the scrollbar style globally, when the table height is set to hold the left fixed column, the left fixed column blocks the horizontal scrollbar, and the scroll to the bottom border will dislocate #12607
4. 排序相关
   1. 排序丢失 [Bug Report] When using V-IF and v-else-if to switch el-table-column in table, it will result in the invalidation of some properties of el-table-column. #14023
   2. clearSort 不能清除自定义 sort-mothod [Bug Report] Table clearSort() doesn't work on custom sort. #13873
   3. sort-mothod 的问题 [Bug Report] Bug in el-table sort-method #13842 (不一定是 element 的 bug)
5. filter
   1. 允许自定义 [Feature Request] Can add table columns filter slot at el-table? #11807
6. 展开行（expand）
   1. 展开行显示后出现滚动条(与固定列有关) [Bug Report] table column (type = expand) bug #13868
7. show-overflow-tooltip
   1. 支持配置 tooltip 的属性 [Feature Request] 使TABLE内自带TOOLTIP方向可配置 #13576
8. 树形数据
   1. children，hasChildren 可配置 [Feature Request] Optimizing Tree Table #14910
   2. 展开行（default-expand-all 只是控制展开行） [Feature Request] [Feature Request] [Recommendation] Table table adds default expansion properties #14982

优化

1. 功能拆分，允许更多的自定义选项。

   1. 非核心功能剥离出来，比如排序，索引列（type=index）功能拆分，show-overflow-tooltip，提供默认选项，也支持自定义。
   2. 把展开行（type=exapnd）与显示树形数据的功能分别拆分成两个新组件：ExpandTable 与 TreeTable。这样就不用担心某些属性： default-expand-all expand-row-keys ，事件 expand-change，以及方法：toggleRowExpansion 有冲突了。
   3. 提供更多的自定义功能：比如自定义图标的显示以及筛选面板的自定义。
   4. 拆分模块意味着用户可以根据自己的需求去开发一些插件。

2. 性能优化以及提供更多的功能。

   1. 提供高性能的 table。
   2. table 可以自带一个 pagination。

3. 固定列实现优化

   1. 目前的实现，固定列都是通过拷贝一个完整的table来实现，修改为只拷贝必要的列。
   2. 解决固定列导致的排版问题：比如滚动条的拖动问题。

4. 根据内容自适应宽度

   1. 修改 table-layout。如果没有使用了复杂的功能，尽量只有一个 table 元素。[Feature Request] Table width adaptation #12773

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

Table

Description

Table's Common Problems

1. Related to fixed columns

2. Multiple Popover components appear

3. Bottom scrollbar cannot be dragged

4. Fixed column headers do not display [Bug Report] Table Column fixed prop can't work on multiple level column #9926

5. Height keeps unchanged

6. Performance issues

7. Table performance optimization [Feature Request] Table rendering is too slow when 1000 records (hopefully you can support scrolling according to scroll bars) #6089 when data is large

8. ~ The mouse triggers repeated rendering [Bug Report] ElTable component calls row/cell class/style functions on hover event #14550~ (repaired) while the table is suspended.

9. Scrollbar Problem

10. When a scroll occurs, the position of the scroll bar el-button怎么点击触发事件 #64

11. Scrollbars cannot be dragged (described in 1.1)

12. Custom scrollbar display problem [Bug Report] After changing the scrollbar style globally, when the table height is set to hold the left fixed column, the left fixed column blocks the horizontal scrollbar, and the scroll to the bottom border will dislocate #12607

13. Sort correlation

14. Ordering Loss fix contribution url #23

15. CleaSort cannot clear custom sort-mothod slave [Bug Report] Table clearSort() doesn't work on custom sort. #13873

16. sort-mothod problem [Bug Report] Bug in el-table sort-method #13842 (not necessarily an element bug)

17. filter

18. Allow customization [Feature Request] Can add table columns filter slot at el-table? #11807

19. Expansion

20. Scroll bars (related to fixed columns) appear after expanding row display [Bug Report] table column (type = expand) bug #13868

21. show-overflow-tooltip

22. Attribute [Feature Request] 使TABLE内自带TOOLTIP方向可配置 #13576 to support configuration tooltip ____________

23. Tree data

24. Children, hasChildren can be configured with [Feature Request] Optimizing Tree Table #14910

25. Expansion row (default-expand-all only controls expansion row) button doesn't have correct focus style #982
    The optimization of the Three Gorges Project

26. Functional splitting, allowing more customization options.

27. Non-core functions are stripped out, such as sorting, indexing column (type = index) splitting, show-overflow-tooltip, providing default options, and supporting customization.

28. The functions of expanding rows (type = exapnd) and displaying tree data are separated into two new components: ExpandTable and TreeTable. So you don't have to worry about certain attributes: default-expand-all expand-row-keys, event expand-change, and method: toggle Row Expansion.

29. Provide more customization functions, such as customizing icon display and filtering panel customization.

30. Splitting modules means that users can develop some plug-ins according to their own needs.

31. Performance optimization and providing more functions.

32. Provide high performance tables.

33. The table can bring a pagination.

34. Fixed column optimization

35. Currently, fixed columns are implemented by ** copying a complete table ** and modified to copy only the necessary columns.

36. Solve typesetting problems caused by fixed columns: such as scroll bar dragging.

[dawnfrost]

https://codepen.io/dawnfrost/pen/NJmjdK
这个tabs问题尽快解决吧

[ghost]

有支持表格可视区域渲染的计划吗

[meihuanyu]

treeTable use load this way, i think will some problem.
i can't controller table data...

[xlz26296]

由于项目中很多带有 children 的数据
问下什么时候能支持关闭树结构，不需要渲染树，希望能支持关闭。

[xiaogaofudao]

静等更新，不知道 @ziyoung 是不是官方维护人员，给你点个赞

[ziyoung]

pr #15709

[phoeson]

树形表格缩进对齐的问题可以考虑一下吗？
如果一个行，它包含children行，就会因为它前面有一个展开/收起的小三角造成不会和它同级的行在文字上垂直对齐，我觉得应该是对齐会更好。

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.