Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: better approach to solve not show overflow content when in elastic #20821

Merged
merged 1 commit into from Jan 13, 2020

Conversation

@AshoneA
Copy link
Contributor

AshoneA commented Jan 10, 2020

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

使用现在的方式解决固定列问题会导致直接留白:https://codesandbox.io/s/cranky-sun-9p1fx

💡 Background and solution

如果单元格内有直接的NodeText,使用color: transparent 处理,如果单元格内有其他元素,使其隐藏。
If the cell's child is direct NodeText, use color: transparent, if the cell includes other elements, use visibility: hidden

📝 Changelog

Language Changelog
🇺🇸 English Optimize Table fixed columns blank problem in one situation.
🇨🇳 Chinese 优化 Table 固定列在某些情况下出现空白间隔的问题。

☑️ Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed
@auto-add-label auto-add-label bot added the bug label Jan 10, 2020
@pr-triage pr-triage bot added the PR: unreviewed label Jan 10, 2020
@netlify

This comment has been minimized.

Copy link

netlify bot commented Jan 10, 2020

Deploy preview for ant-design ready!

Built with commit 3ec3f99

https://deploy-preview-20821--ant-design.netlify.com

@yoyo837 yoyo837 added the 3.x label Jan 10, 2020
@codesandbox

This comment has been minimized.

Copy link

codesandbox bot commented Jan 10, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3ec3f99:

Sandbox Source
antd reproduction template Configuration
upbeat-pascal-ujz3z PR
@codecov

This comment has been minimized.

Copy link

codecov bot commented Jan 10, 2020

Codecov Report

Merging #20821 into 3.x-stable will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@             Coverage Diff             @@
##           3.x-stable   #20821   +/-   ##
===========================================
  Coverage       97.81%   97.81%           
===========================================
  Files             286      286           
  Lines            7749     7749           
  Branches         2172     2172           
===========================================
  Hits             7580     7580           
  Misses            169      169

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 23d5a85...3ec3f99. Read the comment docs.

@afc163

This comment has been minimized.

Copy link
Member

afc163 commented Jan 11, 2020

@AshoneA

This comment has been minimized.

Copy link
Contributor Author

AshoneA commented Jan 11, 2020

@afc163 我知道这个,但是因为我们实际产品中用户能够自定义每一列的宽度,所以每列都需要有一个宽度,当宽度不够的时候就会出现这个裂缝

@afc163

This comment has been minimized.

Copy link
Member

afc163 commented Jan 11, 2020

@afc163 我知道这个,但是因为我们实际产品中用户能够自定义每一列的宽度,所以每列都需要有一个宽度,当宽度不够的时候就会出现这个裂缝

这个没办法,宽度都写死了碰到弹性布局必然会出现裂缝,你代码里要有计算宽度保证 100% 填满的代码(用户全设置宽度也预留一列,或是按比例计算百分比)。

这个代码思路很不错,但是不解决根本问题(比如单元格里面有自定义组件或者复杂内容)。

@AshoneA

This comment has been minimized.

Copy link
Contributor Author

AshoneA commented Jan 11, 2020

@afc163 我知道这个,但是因为我们实际产品中用户能够自定义每一列的宽度,所以每列都需要有一个宽度,当宽度不够的时候就会出现这个裂缝

这个没办法,宽度都写死了碰到弹性布局必然会出现裂缝,你代码里要有计算宽度保证 100% 填满的代码(用户全设置宽度也预留一列,或是按比例计算百分比)。

这个代码思路很不错,但是不解决根本问题(比如单元格里面有自定义组件或者复杂内容)。

OK,谢谢你的建议。btw麻烦请教下不解决根本问题是指单元格下面元素color或者visibility的css权重比antd高的时候还是有问题,还说其他情况呢?

@afc163

This comment has been minimized.

Copy link
Member

afc163 commented Jan 13, 2020

就是单元格里不是文本节点依然有空白。

不过你这个也算是一个没负作用的小优化,我合掉了。

@afc163 afc163 merged commit ab29ecb into ant-design:3.x-stable Jan 13, 2020
27 checks passed
27 checks passed
Header rules - ant-design No header rules processed
Details
Pages changed - ant-design 220 new files uploaded
Details
DEP All dependencies are resolved
Mixed content - ant-design No mixed content detected
Details
Redirect rules - ant-design 18 redirect rules processed
Details
Semantic Pull Request ready to be squashed
Details
WIP Ready for review
Details
ci/circleci: check_metadata Your tests passed on CircleCI!
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
ci/codesandbox Building packages succeeded.
Details
codecov/patch Coverage not affected when comparing 23d5a85...3ec3f99
Details
codecov/project 97.81% remains the same compared to 23d5a85
Details
netlify/ant-design/deploy-preview Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected
@pr-triage pr-triage bot added the PR: merged label Jan 13, 2020
@johnJine

This comment has been minimized.

Copy link

johnJine commented Jan 16, 2020

固定列本来用来覆盖原来的列, 宽度和不够的时候, 列的宽度被拉伸导致用来覆盖的区域宽度不够,感觉上这改动,如果需要加外边框(bordered | 是否展示外边框和列边框), 还是有问题,
例如: <Table bordered ...

@johnJine

This comment has been minimized.

Copy link

johnJine commented Jan 16, 2020

啥时候能出一个屏幕宽度能放的下的时候不固定列, 放不的时候固定列的表格, 感觉理论上是能实现的。

@johnJine

This comment has been minimized.

Copy link

johnJine commented Jan 16, 2020

也希望能出一个加载大量数据的表格, 比如100000条数据的表格。

@yoyo837

This comment has been minimized.

Copy link
Collaborator

yoyo837 commented Jan 16, 2020

4.0 表格已经支持virtualScroll.

@johnJine

This comment has been minimized.

Copy link

johnJine commented Jan 16, 2020

期待

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.