解决 Vue element ui 的table水平滚动条固定底部（两个姿势）

最新推荐文章于 2025-07-14 14:26:56 发布

@baby张

最新推荐文章于 2025-07-14 14:26:56 发布

阅读量2.6w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：实用功能实用组件 VUE技术栈

本文链接：https://blog.youkuaiyun.com/weixin_43648947/article/details/88865725

本文介绍了两种方法解决Vue中Element UI Table组件在小屏幕下出现水平滚动条时，如何将其固定在屏幕底部。思路一涉及手写滚动条并用window.onresize监听窗口大小变化，通过计算比例实现联动。思路二则利用CSS控制，将table包裹在div中，设置最小宽度和隐藏溢出，达到最佳效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

掘金地址

Github 写的两个方法demo,点点star

前提条件，需求：

使用vue element UI 的table
在这里插入图片描述
由于横向数据比较长，小屏幕电脑会出现水平滚动条，假如每页20条数据，那么我想对第一条数据进行操作，我得先滚动到table最下面，再拉动水平滚动条到最右边，再回滚到最上面，对末尾的操作进行点击。

这样操作太繁琐，所以提出需求：屏幕过小出现水平滚动条时候，将table的水平滚动条固定再屏幕底部。
element ui 的table并没有办法实现，我采用的是window.onresize

思路一、手写滚动条关联table

1.手写一个固定底部的滚动条，与table的滚动条绑定实现联动，并隐藏table的滚动条.。
2.用window.onresize对浏览器窗口进行监听，用来判断滚动条显示隐藏。
3.计算滑动位移距离和对应比例。

熟悉思路看代码

一、手写个滚动条并定位到底部绑定上事件,设置好初始化参数，用处已经注释好了

	data(){
   
   
	return{
   
   
 		//滚动条参数
      newx: "", // 第一次坐标
      oldx: "", // 移动的坐标
      outBoxWidth: "", // 滚动条长度
      moveWidth: "", // 可移动的长度
      old_new: {
   
   
        // 滚动条偏移量
        left: 0
      },
      windowWidth: document.body.clientWidth - 280, //table宽度
      f: 0,
      leftstr:'',
      //滚动条参数
      }
     }

<!-- 滚动条 -->
//img是两端的小箭头
<div class="out_box" ref="out_box">
     <img style="margin-left:-20px;position:fixed;bottom:0px;" src="http://img.s.youfenba.com/material_thumb/74NGnHkeQs.png">  
     <