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

掘金地址

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"