Tencent / Tencent/tdesign-react
[Table] 表格设置resizable后，鼠标移动到header上有边框一闪一闪
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 965
- Forks
- 373
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 17
Description
tdesign-react 版本
1.11.1
重现链接
https://stackblitz.com/edit/fk9sgy4q?file=src%2Fdemo.tsx
重现步骤
鼠标移动到表格header上
期望结果
不要出现一闪一闪的边框线，不美观，比较突兀，不符合一般交互逻辑（需要思考，然后去接受，而且不一定能接受这种样式的突变）。
如果是因为设置resizable后header宽度可调整，需要一个分割线，建议两种方案：
1、鼠标移动到哪两个字段之间就显示对应两个字段的分割线，并且增加一点过渡时间
方案2：如果设置了resizable后，就长期显示字段的分割线（或者其他的样式）
实际结果
出现一闪一闪的边框线，影响美观，被产品吐槽，被客户吐槽
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the StackBlitz reproduction at src/demo.tsx and reproduce the flickering border while moving over the resizable table header. Inspect the table header behavior and verify the fix by confirming that moving across the header no longer causes abrupt flashing borders, while the resize affordance remains understandable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100