table横向滚动条_Iviewtable横向滚动条始终位于可视区域的实现

Iview Table 横向滚动条的实现与滚动事件同步

最新推荐文章于 2024-11-30 19:11:39 发布

最新推荐文章于 2024-11-30 19:11:39 发布 · 3.8k 阅读

文章标签：

#table横向滚动条 #vue监听滚动条滚动事件

本文介绍了如何在 Vue 中使用 Iview Table 实现一个始终位于可视区域的横向滚动条，并详细阐述了实现步骤：覆盖原生滚动条，设置滚动条宽度与表格宽度一致，以及同步 view-table 的 scroll 事件和自定义滚动事件。通过代码示例展示了具体实现方法。

思路：

1、实现一个横向滚动条并盖住原生滚动条

2、自定滚动条的宽度必须与view-table的宽度一致

3、将view-table的scroll事件和自定义scroll事件进行同步

上效果图：

上代码：

<template>    <div class="scroll-table">        <div class="st-con">纯占位字符div>    div>template>

.scroll-table {    margin-top: -20px;    width: 100%;    height: 20px;    overflow-x: scroll;    overflow-y: hidden;    // 采用粘性布局    position: sticky;    bottom: -20px;    .st-con {        // 将内容隐藏        opacity: 0;    }}

// 初始化mounted() {    // 给自定义模块设置宽度    document.getElementsByClassName('st-con')[0].style.width = document.getElementsByClassName('ivu-table-body')[0].scrollWidth + 'px';    // 同步原生滚动条位置    document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', (event) => {        document.getElementsByClassName('scroll-table')[0].scrollLeft = event.target.scrollLeft;    });    // 同步自定义滚动条位置    document.getElementsByClassName('scroll-table')[0].addEventListener('scroll', (event) => {        document.getElementsByClassName('ivu-table-body')[0].scrollLeft = event.target.scrollLeft;    });}// 销毁监听beforeDestroy() {    // 同步原生滚动条位置    document.getElementsByClassName('ivu-table-body')[0].removeEventListener('scroll', (event) => {        document.getElementsByClassName('scroll-table')[0].scrollLeft = event.target.scrollLeft;    });    // 同步自定义滚动条位置    document.getElementsByClassName('scroll-table')[0].removeEventListener('scroll', (event) => {        document.getElementsByClassName('ivu-table-body')[0].scrollLeft = event.target.scrollLeft;    });}