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

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

clipboard.png

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

期待各位的答复

回答:

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

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

el-table上:

:max-height="clientHeight"

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

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注