素材巴巴 > 程序开发 >

antdesign-vue table设置固定表头和列(就是横向滚动 纵向滚动)后滚动条消失(项目框架用的是snowy小诺)

程序开发 2023-09-06 18:15:56

antdesign-vue table设置固定表头和列(就是横向滚动+纵向滚动),按照组件官网提示写上

	:scroll="{ x: 2000, y: 200 }"

后虽然可以滚动,但是没有滚动条,要通过长安鼠标滚轮,不知道为什么滚动条没了

:尝试过设置足够小的y值但滚动条仍未出现,

当单独设置横向滚动是是正常生效的,且有滚动条

			:scroll="{ x: 2000 }"

但当单独设置y值也就是纵向滚动时滚动条消失,原因不明,

查了很多问题,觉得最有可能的是有一条博客说的父元素没有高度的问题,但验证中。。。

虽然出现滚动条但是表头并没有固定,所以此方法不可用。

我又重新开了一个vue3的项目,然后组件用的antd4,发现同时固定表头和固定列没有任何问题,这说明问题可能来源于:1:我在哪里无意中写了全局样式,但我忘了;2:项目基于框架是snowy框架,可能内部封装了什么样式导致他出现这种情况。

经过验证我并没有写全局样式来隐藏滚动条;但这个框架封装了,解决办法:

把style文件夹下的index.less 中的滚动条属性中的众多类名中的‘.ant-table-body,’删除就可以了,如果找不到这个样式,可以在这个文件中查找‘ &::-webkit-scrollbar’就可以找到了。

这个问题耗时今天上班时间的80%,。。。。。。。。。。。。。。。【哭死】

总结:当遇到解决不了的属性问题时要一步步排查,开始我想是我的问题是我少写了什么,例如table的宽,key,就是说我明知道它是干什么用的,我都会想是不是因为没写她导致滚动条不见了,但这些都写上也没有用。第二个就是overflow:auto,是滚动条,然后我这没有滚动条,我就全局搜索‘overflow:hidden’好家伙我把所有的overflow:hidden全删了但不好使,这些都不好使我就开始怀疑是不是antd这个框架的4.0版本有bug和vue3搭配不生效【笑哭】好像那个白痴,然后我新建了个vue3项目,发现新的项目里他是生效的。此时我就想到他可能是snowy框架自己封装了什么导致我这个样式缺少什么类名,然后我就在浏览器里F12一点一点的对照旧项目和新项目的类名有什么不同【大白痴】,眼睛都累死了发现他俩写的一模一样,此时我崩溃了。最后经过一段时间半摆烂+半琢磨,我灵光一闪,我想我搜索一下‘隐藏滚动条的样式’,果然隐藏滚动条不是通过‘overflow’实现的【我可真蠢啊,明明以前的项目就写过隐藏滚动条却什么都不记得,就掉进overflow的坑里出不去了,这也证明我了解知识学的一点都不明白,一点都不深入】,设置滚动条的样式吧‘&::-webkit-scrollbar’也就是这个然后全局以搜索只有几个,一次看看,排除就解决了这个问题。这种框架自动封装样式的问题以前也遇到过,不过以前的是在浏览器里F12就能看出来,这次的没法在浏览器里看出来,但是也应该学会举一反三,还是笨了,并且陷进自己的坑里了,写前端这段时间感觉一旦陷进一个坑,并且脑子不清楚,而且还不清空一下脑子就会一直陷在那个坑里,导致看不清问题的本质,理不清思路,然后浪费很多时间。


标签:

上一篇: angular4 form表单绑定数据报错 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。