Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 28, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

💡 需求背景和解决方案

问题描述:当表头同时启用 ellipsissorterfilter 三个属性时,表头样式错位。居中对齐时文字不会省略,筛选排序的图标也会被裁剪掉。

issue

解决方案:修改 packages/common/style/web/components/table/_index.less 中的 CSS 样式:

  1. .t-table__cell--title .t-table__ellipsis:添加 flex: 1min-width: 0,使文本在 flex 容器中能正确截断

  2. .t-table__filter-icon-wrap:移除固定 width: @table-icon-size,添加 flex-shrink: 0,防止图标在空间不足时被裁剪

  3. 居中对齐 .t-align-center:将 justify-content: space-around 改为 justify-content: center,并为 .t-table__cell--title 添加 max-width: 100% 约束

注意:修改位于 packages/common 子模块中,需要先提交到 tdesign-common 仓库,然后更新子模块引用。

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • fix(table): 修复 ellipsis+sorter+filter 同时启用时表头样式错位问题

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供
Original prompt

This section details on the original issue you should resolve

<issue_title>[Table] ellipsis+sorter+filter三个属性同时启用后,会导致表头样式错位</issue_title>
<issue_description>### tdesign-vue-next 版本

最新版

重现链接

https://codesandbox.io/p/sandbox/tdesign-vue-next-table-filter-controlled-demo-forked-52qjgf

重现步骤

No response

期望结果

No response

实际结果

Image

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

并且如果表头是居中的话,宽度不足时文字不会省略,筛选排序的图标也会被裁剪掉。</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@liweijie0812
Copy link
Collaborator

@copilot 继续工作

Copy link
Contributor Author

Copilot AI commented Nov 28, 2025

@copilot 继续工作

I've reapplied the CSS fixes to packages/common/style/web/components/table/_index.less. All 249 table tests pass.

The changes fix the header style misalignment by:

  1. Adding flex: 1; min-width: 0 to .t-table__ellipsis for proper text truncation
  2. Removing fixed width and adding flex-shrink: 0 to .t-table__filter-icon-wrap to prevent icon clipping
  3. Changing center alignment to justify-content: center with max-width: 100% on title

Note: These changes are in the packages/common git submodule (tdesign-common). To complete this fix, the changes need to be:

  1. Committed and pushed to the tdesign-common repository
  2. Then the submodule reference updated in tdesign-vue-next

Would you like me to prepare a PR for the tdesign-common repository, or do you have a different workflow for submodule changes?

Copilot AI changed the title [WIP] Fix table header style misalignment with ellipsis, sorter, filter fix(table): fix header style misalignment when ellipsis+sorter+filter enabled Nov 28, 2025
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.

[Table] ellipsis+sorter+filter三个属性同时启用后,会导致表头样式错位

2 participants