vue2 viewUi table 横向滚动条底部悬浮

使用实例

<template>
    <Table ref="table" :columns="columns" :data="dataSouse"></Table>
    <scrollbar/>
</template>

组件

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

<script>
export default {
    name: 'scrollTable',
    // 初始化
    mounted() {
        setTimeout(() => {
            // 给自定义模块设置宽度
            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
                })
        }, 200)
    },
    // 销毁监听
    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
            })
    },
}
</script>

<style lang="scss" scoped>
.scroll-table {
    margin-top: -20px;
    width: 100%;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: sticky;
    bottom: 0;
    .st-con {
        opacity: 0;
    }
}
</style>