element table滚动条占宽度_Element table设置固定列，没有滚动条时底部会显示一条线的解决方法...

固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left  right,表示左边固定还是右边固定

:data="tableData"

border

style="width: 100%">

fixed

prop="date"

label="日期"

width="150">

prop="name"

label="姓名"

width="120">

prop="zip"

label="邮编"

width="120">

fixed="right"

label="操作"

width="100">

查看

编辑

在小屏幕上含有滚动条，显示是正常的，但是如果是大屏幕没有滚动条就在底部约17像素的地方有一条线，非常不美观，

通过审查元素发现，如果是左侧固定，不管有没有滚动条.el-table-fixed 这个元素 样式都是距离底部17px，

固定右边的列类似，只是样式没有直接写bottom:17px

如何解决呢？

思路：页面解析完成后，如果内容的宽度小于或者等于容器的宽度 就把bottom设置为1px

完整的代码

mounted() {

//修改固定列有和没有滚动条的样式

var wrapWidth = document.querySelector(".el-table__header-wrapper").offsetWidth;

var tableWidth;

setTimeout(() => {

tableWidth = document.querySelector(".el-table__header").offsetWidth - 17;

console.log(wrapWidth, tableWidth);

document.querySelector(".el-table__fixed-right").style.height = "auto";

document.querySelector(".el-table__fixed-right").style.bottom = "17px";

if (tableWidth <= wrapWidth) {

document.querySelector(".el-table__fixed").style.bottom = "1px";

document.querySelector(".el-table__fixed-right").style.bottom = "1px";

}

}, 500);

},