naive-ui
naive-ui copied to clipboard
Table scroll-x Big Bug?
Describe the bug
一直以来Table有个问题困扰我很久,就是我想让Column的宽度不写死,而是自适应其max-content最大宽度,然而我给Table设置了scroll-x = 'max-content',以及max-height='300',其中Column自定义渲染div上width:max-content, 结果会有意想不到的bug,横向滚动条无限延申,为什么?
如果不定Table的高度(去掉max-height='300'),那就没这个问题,可是我的需求要给Table高度,到底是什么原因呢?
以下是在线代码,顺便附上代码:
`
`
https://codesandbox.io/p/devbox/naiveui-table-bug-spyc63
Steps to reproduce
一直存在这个问题
Link to minimal reproduction
https://codesandbox.io/p/devbox/naiveui-table-bug-spyc63
System Info
System:
OS: Windows 11 10.0.22631
CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13500HX
Memory: 3.27 GB / 15.73 GB
Binaries:
Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.12.1 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Edge: Chromium (123.0.2420.65)
Internet Explorer: 11.0.22621.1
Used Package Manager
pnpm
Validations
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.
尝试了下也复现了,通过获取header的dom然后给宽度了就好了,但是发现scroll-x给个空字符串也行。
尝试了下也复现了,通过获取header的dom然后给宽度了就好了,但是发现scroll-x给个空字符串也行。
感谢您的回答,但是对我没有帮助,虽然看上去没问题了,但是max-content还是没效果,所有设置了width=max-content的列都被平分成一等分了,宽度都一样,那有的内容宽有的内容短就没意义了,根本原因就是设置了max-height,不加max-height就没问题
flex-height
也有相同的问题
这里如果要固定表头,用 sticky
来实现可能比较好