ElemeFE / ElemeFE/element

[Feature Request]Design optimization of Table

Open
#15,170 9 comments 16 reactions 0 assignees View on GitHub
component: table next major candidate stale status: discussion
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue concerns the Table component and lists multiple fixed-column, performance, scrolling, sorting, filtering, expansion, tooltip, tree-data, and width-adaptation concerns. No source file, test, or entry point is named; review the referenced issues first and define a narrower, testable change before starting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.