el-table 横向滚动条固定在可视窗口底部_eltable横向滚动条

有一个需求,当el-table的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。

方法1、在el-table上手动添加滚动条

参考原文链接el-table增加顶部滚动条，表格实现上下双滚动条_MrsTing的博客-CSDN博客_el-table设置滚动条

1、在el-table上方添加一个div，div的宽度和表格的宽度相同。

<div ref="topScroll" class="top-scroll">



  <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>



</div>



<el-table ref="tableRef" :data="list"  v-loading.body="listLoading">



 



</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

给两个div添加样式，里面的div一定要设置高度，不设置的话滚动条出不来

.top-scroll {



  width: 100%;



  overflow-x: auto;



}



.top-scroll-content {



  /* 高度不设置的话滚动条出不来 */



  height: 1px; 



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、给滚动条设置初始值

data(){



 return{



      topScrollWidth: 0,



      tableDom: null,



 }



},



methods:{



  setScrollWidth() {



      //设置顶部滚顶条宽度值为表格的滚动宽度



    this.$nextTick(() => {



      this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px';



    })



  },



  getList(){



    //在获取数据后，设置顶部滚动条的宽度



     getListPer(data).then(res => {



        this.list = res.list;



        this.setScrollWidth();



        this.listLoading = false;



      })



  }



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

3、在watch中监听滚动条宽度值，实现两个滚动条同步

watch:{



   topScrollWidth: {



      // 两个滚动条同时滚动



      handler(newVal, oldVal) {



        // 监听滚动条



        this.$nextTick(() => {



          this.tableDom = this.$refs.tableRef.bodyWrapper



          this.tableDom.addEventListener('scroll', () => {



             // 表格顶部滚动条与底部同步



            let scrollLeft = this.tableDom.scrollLeft



            this.$refs.topScroll.scrollTo(scrollLeft, 0);



          })



          let topScroll = this.$refs.topScroll



          topScroll.addEventListener('scroll', () => {



            // 表格底部滚动条与顶部同步



            let scrollLeft = this.$refs.topScroll.scrollLeft



            this.$refs.tableRef.bodyWrapper.scrollTo(scrollLeft, 0);



          })



        })



      },



      deep: true



    },



},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

4、监听浏览器的缩放操作，并在页面销毁时清除监听

  mounted() {



    this.getList()



    //监听浏览器的缩放操作



    window.addEventListener("resize", () => {



      this.setScrollWidth();



    })



  },



  beforeDestroy() {



   //清除监听



    window.removeEventListener("resize", () => {



      this.setScrollWidth();



    })



  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果图

方法2、使用v-horizontal-scroll

网上一个大佬写的，是真的厉害

el-table横向滚动条吸底处理方案思路 - 哔哩哔哩

源码仓库地址

GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottom

如何使用

安装

npm install el-table-horizontal-scroll
1

注册指令

import horizontalScroll from 'el-table-horizontal-scroll'



Vue.use(horizontalScroll)
1
2
3
4
5

或者

import horizontalScroll from 'el-table-horizontal-scroll'



 



export default {



    directives: {



        horizontalScroll



    }



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在el-table上添加v-horizontal-scroll

可以使用 always 或 hover`` ,默认值为hover，将鼠标悬停在表格上时，该栏将显示；

或者可以将其更改为always，并使栏始终显示

<el-table :data="data"  v-horizontal-scroll="'always'">



 



</el-table>
1
2
3
4
5
6
7
8
9

效果图（我自己就是选的这个方法，个人觉得比其他方法好）

方法3：el-table添加max-height值

原文链接：element如何让table表格的横向滚动条一直显示,而不是要滚动到表格底部_Creci的博客-CSDN博客_element table横向滚动

方法是给el-table添加一个max-height值，在页面渲染时动态计算值。

<el-table :max-height="maxHeight"></el-table>



 



 



mouted(){



  this.$nextTick(()=>{



    this.maxHeight = window.innerHeight - 300;//300是页面中除了表格外其他组件的高度



   })



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果图

方法4：使用CSS

原文链接：

element table滚动条固定视图底部_银狼嘯月的博客-CSDN博客_element table 滚动条固定

html:

<div class="table-parent" @contextmenu.prevent.capture>



    <el-table :data="excelData" border class="table-box">



    </el-table>



</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

@contextmenu.prevent.capture 阻止浏览器默认右键行为， 事件修饰符capture给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素

css:

.table-parent {



  position: absolute;



  overflow: auto;



}



 



.table-parent .table-box {



  position: relative;



  min-width: 1300px;



  overflow: auto;



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

将el-table的宽度放大后，页面底部会出现横向滚动条，但是如果el-table上方的布局已经被写死了，会出现留白

效果图：