网站建设定制开发el-table 横向滚动条固定在可视窗口底部

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

方法1、在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>

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

.top-scroll {
  width: 100%;
  overflow-x: auto;
}
.top-scroll-content {
  /* 高度不设置的话滚动条出不来 */
  height: 1px; 
}

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;
      })
  }
}

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
    },
},

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

  mounted() {
    this.getList()
    //监听浏览器的缩放操作
    window.addEventListener("resize", () => {
      this.setScrollWidth();
    })
  },
  beforeDestroy() {
   //清除监听
    window.removeEventListener("resize", () => {
      this.setScrollWidth();
    })
  },

效果图

 方法2、使用v-horizontal-scroll

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

源码仓库地址

如何使用

安装

npm install el-table-horizontal-scroll

注册指令

import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

或者

import horizontalScroll from 'el-table-horizontal-scroll'
 
export default {
    directives: {
        horizontalScroll
    }
}

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

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

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

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

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

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

原文链接：

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

<el-table :max-height="maxHeight"></el-table>
 
 
mouted(){
  this.$nextTick(()=>{
    this.maxHeight = window.innerHeight - 300;//300是页面中除了表格外其他组件的高度
   })
}

效果图

方法4：使用CSS 

原文链接：

 html:

<div class="table-parent" @contextmenu.prevent.capture>
    <el-table :data="excelData" border class="table-box">
    </el-table>
</div>

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

css:

.table-parent {
  position: absolute;
  overflow: auto;
}
 
.table-parent .table-box {
  position: relative;
  min-width: 1300px;
  overflow: auto;
}

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

效果图：