如何将element ui table组建的左右滚动条固定在下方?

发布于 2022-09-11 14:27:03 字数 363 浏览 34 评论 0

问题:目前在用element ui的table组件,但是由于列数太多,官方又不支持自适应宽度,无奈总是会有左右滚动条出现,这样导致的问题便是数据修改起来必须先划到下边滚动左右滚动条,然后进行数据查看和数据修改,极其不方便!

clipboard.png

1.首先有没有办法能解决自适应的问题,而且要保证某些列(如下拉框)的文字不被阻挡
2.退而求其次,希望有能够让左右滚动条固定在屏幕下方的解决方案

期待各位的答复

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

伪装你 2022-09-18 14:27:03

用max-height限制一下最大高度,试试看

梦回梦里 2022-09-18 14:27:03

返回的数据明显太多了,建议用分页,不然显示交互就会很差,每次都要先下拉滚动条在横向滚动条。
table组件里的横行滚动条,由于列数太多,你每一列哪怕设置max-width,依旧会出现滚动条,没法拿掉下方滚动条,element-ui的限制

绝影如岚 2022-09-18 14:27:03
  let el = document.getElementsByClassName("el-table")[0];
  this.$nextTick(() => {
    el.scrollLeft = 1000000;//这个数字不用这么大其实,我随便写的。只要比屏幕大就好
  }, 10);
  特意测了一下。望采纳
夏の忆 2022-09-18 14:27:03

宽度不是自适应的吗。。。写100%就是自动计算的,如果你给某些宽度赋值了,这些宽度加起来超过父元素的宽度才会出现横向滚动条。
高度不是自适应的。如果你想一直看到滚动条,就写死高度,或者父元素写死,表格高度100%。这样,宽度不够就会出现横向滚动条了,同时表头也能固定。但是这样,纵向滚动条就在表格里面显示了。。。
接触这个不久,希望对你有帮助。。。我也要被这个table搞疯了,难受

亽野灬性zι浪 2022-09-18 14:27:03

用max-height限制一下最大高度,如何有可能,自己计算一下table占的高度,created中:

// this.clientHeight-表格最大高度
this.clientHeight = document.body.clientHeight - 299

el-table上:

:max-height="clientHeight"

这样就相当于固定在一个屏幕高度的空间,数据很多的时候不需要再拖到最低部才能看到滚动条。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文