前言:
如今朋友们对“elementui表格自动滚动”大概比较着重,看官们都需要学习一些“elementui表格自动滚动”的相关资讯。那么小编也在网摘上搜集了一些有关“elementui表格自动滚动””的相关文章,希望兄弟们能喜欢,各位老铁们快快来学习一下吧!前段时间接手了一个新的项目,使用的React+antd的技术栈,最近在正式做第一期的需求了,自己也开始使用蚂蚁的antd了,自己之前用Vue的时候是用过饿了么的Element-ui,想着这类用法应该都大同小异的,但是自己还是遇到了坑。。。
主要是宽度不生效,滚动条出不来,左侧列固定后有白色空隙,文末有解决方案。
背景
项目比较老,里面使用的ant版本为3.22.0,现在最新的ant已经是4.x了,自己刚接手不久,暂时不会考虑升级antd版本。
用户选择的对比语言,都会在表格中增加一列,加上表格里面固定的QID列和基准语言列,剩下的就是对比语言的列了(有几个对比语言,就有几列),当用户选择的对比语言过多的时候,就需要很像滚动
需求一:内容过多时支持横向滚动
为了表格整体美观一点,需要设置下列的宽度,QID列的内容都是字母数字,长度波动不大,准备固定为280,所有语言列的宽度准备固定为200,这个表格里面没有常见的最后一列--操作列,也就是没有了可以用来不设置固定宽度供伸缩的列,官方说法是请尝试建议留一列不设宽度以适应弹性布局。
遇到的问题固定宽度不生效对比语言列少的场景
这样没什么问题,铺满。
列多语言列多的场景
这里面选择了很多的对比语言,我们会看到列的宽度没有生效,语言列的宽度会不断压缩,以方便所有的语言列显示在table中。本想着固定宽度的总量不断增加,超过整体可视区域,会自动让我横向滚动的,结果没有。
属性是设置上去了的。
看来不会用这个width的不止我一个。
尝试打开官方给的链接,与github的issue上找解决方案
虽然感觉跟我的问题不太一样,还是尝试把上面提到的textWrap, ellipsis,wordBreak都组合设置了下,也没有看到效果。
其它上面的三个属性应该是适用于列里面的文字太多了的场景,我这边目前还没到那一步呢,就截图上的语言列里面的哪个几个汉字是不会超过200的。
横向滚动
尝试设置了scroll = {{x: true}}、scroll = {{x: 'max-content'}}、scroll = {{x: 600}},包括根据当前语言列的多少,动态设置scorll.x的数值也尝试过,直接设置过大或过小值也尝试过,终究出现滚动条。
但是只有上面的需求一,也就是需要横向滚动,但是连滚动条的影子都没有见到。。。
最后决定放弃官方给的属性设置了,尝试用CSS解决。
解决方案(需求一)把上面尝试的官方设置的width、scroll都拿掉。给需要尝试设置宽度的列设置上class(通过antd实现),QID列为qid_column,其它语言列均为lang_column加上css.ant-table-body { overflow-x: auto; // 让table能横向滚动 .ant-table-tbody { .qid_colomn { word-break: break-all; width: 280px; // 固定列宽度 } .lang_column { min-width: 200px; word-break: break-all; } } }完美搞定,简单而实用。需求二:b表格最左列固定
也就是说表格最左边的QID列能固定(类似Excle的冻结窗口)
其实对于这个要求我内心是比较拒绝的,虽然我知道这个更好用,因为我知道这个table不好用,或者说我还不会用。
看文档。 首先是在该列上设置fixed: 'left' 然后就又可以看到上面提到的老朋友width和scroll
再次尝试放弃之前的CSS方案,改用官方的配置试试,结果如下
数据多(或者少)的场景都不理想,我太难了。。。好歹我也算见到了上面提到的垂直白色空隙了。
可以看到固定列,其实就是出现两个表格,然后通过合理的设置间接,让“下面的”表格滚动,“上面的”表格绝对定位,实现固定列。
依旧是各种尝试后无果,回到中的CSS方案,还是需要复用两套表格这个实现逻辑,所以上面的fixed: 'left'还是需要设置的。
解决方案(包括需求一、需求二)
还是用CSS解决
.ant-table-body { overflow-x: auto; // 让table能横向滚动 } .ant-table-tbody { .qid_column { word-break: break-all; width: 280px; // 固定列宽度 } .ant-table-fixed-columns-in-body { width: 280px; // 固定左列容器的宽度始终为上述固定列宽度,避免数量多少时出现白色垂直空隙 } .lang_column { min-width: 200px; word-break: break-all; } }
额外加上的就是对左列容器.ant-table-fixed-columns-in-body的宽度设置。
效果图
语言列少时
语言列过多时
语言列过多滚动时
总结
使用开源组件先看文档,尽量搞懂官方配置项的使用方法,如果用了没效果可以在网上搜搜,方便的话可以看看源码深入理解配置。
antd太难了,我不会用,文档看不懂。
如果你还是不会用,就跟我一样,那就是指理解组件作者的实现思路吧,自己尝试解决(特别是CSS类的,还不用改源码)吧。
标签: #elementui表格自动滚动