Element中table组件(el-table)右侧滚动条空白占位处理

错误展示

如下图：

element的table组件有一个max-height参数可以设置表格组件的最大高度。

如果数据过多，在最大高度内展示不开，就会自动加一个滚动条，进行滚动展示。

如果数据很少，没有达到最大高度，那么右侧不应该有滚动条，和一切干扰列。

但是当我设置了max-height ，且我这个地方没有达到最大高度，就会在表格右侧出现一列空白的占位，这样比较丑。怎么去掉这一列空白呢？

解决方法

方法1：

不设置max-height参数。

如果你的数据有限（分页展示），不考虑过多的列会无限往下撑高度。那么可以采用这种方法来解决。

方法2：

手动通过css来隐藏掉这一列。

/deep/ .el-table th.gutter{display: none;width:0
}
/deep/ .el-table colgroup col[name='gutter']{display: none;width: 0;
}
/deep/ .el-table__body{width: 100% !important;
}

这样修改完，超过最大高度的情况，会出现滚动条。不超过最大高度的情况，也不会有空白占位列。

成果展示

展示如下：

我这边对表格有一个拖拽功能。通过拖拽来控制表格的最大高度。

当拖拽的最大高度小于数据高度时，有滚动条。

当拖拽高度大于数据高度时，可以看到没有滚动条，也没有空白占位列。

Element中table组件(el-table)右侧滚动条空白占位处理相关推荐

antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
element中upload组件中的确认删除问题
element中upload组件中的确认删除问题问题原因 <el-uploadclass="upload-demo"dragaction="https://jso ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
elementUI的table组件实现setCurrentRow的滚动条定位效果
在github上咨询了,直接给了代码: https://jsfiddle.net/tk37c5cb/14/ 转载于:https://www.cnblogs.com/blueroses/p/852207 ...
element中el-dialog组件垂直居中完美解决方案，适配超高dialog
.el-dialog__wrapper {display: flex;padding: 24px; //添加上下间隙,可为任意值.el-dialog {margin: auto !important; ...
element中滑块组件Slider展示一天24小时的时间问题
效果如下 Slider滑块轴的默认绑定输出值是number 且取值范区间是[0-100] 根据需求比如我这里是需要展示一天24小时,且只能展示半点和整点.可以把时间轴等分成48份,这里max取值上限 ...
Element ui table组件滚动条隐藏与样式修改
Element ui 虽然用起来方便,但是调整就比较麻烦了,尤其是这个table组件,一旦设定了height属性,数据多的时候就会自动出现滚动条,如果你改了其他的样式,这个滚动条就是十分难看,可以用下 ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...