search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[Feature Request]Design optimization of Table #15170

Open ziyoung opened 5 years ago

ziyoung commented 5 years ago

Existing Component

是

Component Name

Table

Description

Table 常见的问题

  1. 与固定列有关
    1. 出现多个 popover 组件 #10588
    2. 底部滚动条无法拖动 #5415 #12666
    3. 固定列的表头不显示 #9926
    4. 高度跟着不变化 #10671 #12078
    5. 表头多余宽度 http://jsrun.net/FGXKp/edit
  2. 性能问题
    1. 数据量大的时候，table 性能优化 #4359 #6089
    2. 鼠标在 table 的悬浮时触发重复渲染 #14550(已修复)
  3. 滚动条问题
    1. 出现滚动时，滚动条的位置 #7564
    2. 滚动条无法拖动（1.1 中已有描述）
    3. 自定义滚动条显示问题 #12607
  4. 排序相关
    1. 排序丢失 #14023
    2. clearSort 不能清除自定义 sort-mothod #13873
    3. sort-mothod 的问题 #13842 (不一定是 element 的 bug)
  5. filter
    1. 允许自定义 #11807
  6. 展开行（expand）
    1. 展开行显示后出现滚动条(与固定列有关) #13868
  7. show-overflow-tooltip
    1. 支持配置 tooltip 的属性 #13576
  8. 树形数据
    1. children，hasChildren 可配置 #14910
    2. 展开行（default-expand-all 只是控制展开行） #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 元素。#12773
element-bot commented 5 years ago

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 #9926

  5. Height keeps unchanged

  6. Performance issues

  7. Table performance optimization #6089 when data is large

  8. ~ The mouse triggers repeated rendering #14550~ (repaired) while the table is suspended.

  9. Scrollbar Problem

  10. When a scroll occurs, the position of the scroll bar #64

  11. Scrollbars cannot be dragged (described in 1.1)

  12. Custom scrollbar display problem #12607

  13. Sort correlation

  14. Ordering Loss #023

  15. CleaSort cannot clear custom sort-mothod slave #13873

  16. sort-mothod problem #13842 (not necessarily an element bug)

  17. filter

  18. Allow customization #11807

  19. Expansion

  20. Scroll bars (related to fixed columns) appear after expanding row display #13868

  21. show-overflow-tooltip

  22. Attribute #13576 to support configuration tooltip ____

  23. Tree data

  24. Children, hasChildren can be configured with #14910

  25. Expansion row (default-expand-all only controls expansion row) #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 commented 5 years ago

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

ghost commented 5 years ago

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

meihuanyu commented 5 years ago

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

xlz26296 commented 5 years ago

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

xiaogaofudao commented 5 years ago

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

ziyoung commented 5 years ago

pr #15709

phoeson commented 4 years ago

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

stale[bot] commented 3 years ago

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.