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

傷城~ 2023-01-08 08:13 268阅读 0赞

固定列需要在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像素的地方有一条线，非常不美观，

![Image 1][]

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

![Image 1][]

固定右边的列类似，只是样式没有直接写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);

\},

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例： <!DOCTYPE html>

古城微笑少年丶/ 2024年02月19日 17:01/ 0 赞/ 62 阅读

相关 Element table组件滚动条不显示的踩坑记录

踩坑详情在多table切换的单个页面内： 1. 某些table的横向滚动条不自动显示，在手动调整窗体大小或者进行缩放操作时会恢复正常。如： ![在这里插入

小灰灰/ 2023年07月13日 10:44/ 0 赞/ 24 阅读

相关 bootstrap-table 设置滚动条一直在屏幕底部

问题描述：由于有的table中的列比较多，那么table可能就会出现横向滚动条，但是table本身的滚动条是在table的底部的，这就导致每次想看一条数据的后面几列的时

叁歲伎倆/ 2023年02月17日 02:14/ 0 赞/ 22 阅读

相关 table设置tbody滚动条

table tbody { display: block; height: 400px; overflow-y: scr

偏执的太偏执、/ 2023年01月13日 04:15/ 0 赞/ 278 阅读

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

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

傷城~/ 2023年01月08日 08:13/ 0 赞/ 269 阅读

相关如何给table加滚动条 table中td设置宽度无效

HTML如何给table添加滚动条要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示： <!

阳光穿透心脏的1/2处/ 2023年01月07日 04:58/ 0 赞/ 159 阅读

相关 table加滚动条

记录一下，老项目会用到。很多前端需要手写。 CSS: .tableScroll{ // 滚动部分 -webkit-overflow-scrol

男娘i/ 2022年12月19日 09:21/ 0 赞/ 199 阅读

相关 table设置tbody滚动条

table tbody { display: block; height: 400px; overflow-y: scr

爱被打了一巴掌/ 2022年12月11日 03:25/ 0 赞/ 212 阅读

相关设置element-iu中table滚动条位置

设置table的ref为tableList 设置滚动至顶部 this.$nextTick(()=>{ this.$refs.tableLi

骑猪看日落/ 2022年09月12日 01:50/ 0 赞/ 269 阅读

相关 table添加横向滚动条

<div style="width:1000px; height:200px; overflow:scroll;"> <table border="1" rule...

你的名字/ 2021年03月25日 14:53/ 0 赞/ 837 阅读