element-table横滚轴固定显示

element-table横滚轴固定显示

---

问题描述：

最近用elementui中的el-table组件，因为表格中的列比较多，所以表格会有横滚轴，这问题就来了。如果我想看拖动横滚轴的话，我必须要将页面拖到表格底部，再拖动横滚轴，然后再将页面滚到上面查看被遮挡的信息。。。

---

设想：

如果当数据表的数据超出窗口显示区域时，横滚轴固定显示到可视区域的底部，那就方便多了。

---

解决思路：

从网上看他们是这么解决的：
el-table外层加一个div，table设置足够宽，利用div代替el-table的滚轴，然后。。。没往下看，满足不了我的需求。因为我的table还有固定列。
我的思路差不多，添加两个div相互嵌套，固定到屏幕下方，设置里面的div与el-table内容等宽，外面的div与el-table容器等宽，以此让外面的div出现滚轴。拖动滚轴时，通过事件作应到el-table的滚轴。当原滚轴出现时，将改div隐藏。当原滚轴不可见时再让他显示。

---

实现代码：

import store from ''

//滚动条
export default {
    name: 'scroll-bar',
    data(){
        return {
            isShow: false,
            itemElement: null,
            position: {},
            itemContainer: {},
            content: null,
            container: null,
        }
    },
    render: function(createElement) {
        this.content || (this.content = createElement(
            'div',
            {
                class: ['content'],
                style: {
                    height: "10px"
                }
            },
        ))
        this.container || (this.container = createElement(
            'div',
            {
                style: {
                    width: '100%',
                    'overflow-y': 'hidden',
                    position: 'fixed',
                    bottom: '4px',
                    'z-index': 10,
                    display: this.isShow ? "block": "none"
                },
                on: {
                    scroll: this.divScroll
                }
            },
            [
                this.content 
            ]
        ))
        return this.container
    },
    methods: {
        divScroll(event){
            let scrolling = this.itemContainer
            scrolling && scrolling.scrollTo(event.target.scrollLeft, 0)
        },
        ///重新渲染方法，可供父组件调用
        reSetShow(){
            if(this.itemElement && this.container){
                this.content.elm.style.width = this.itemElement.offsetWidth + "px"
                this.container.elm.style.width = this.itemContainer.offsetWidth + "px"
                let position = this.position 
                this.isShow = this.itemContainer.offsetHeight + position.absoluteTop > position.appMain.scrollTop + window.innerHeight
                this.container.elm.style.display = this.isShow ? "block": "none"
                return this.isShow
            }
        },
        init(){
            store.dispatch('', this.reSetShow)
            
            this.itemElement = document.querySelector(this.itemSelector);
            this.position = getElementPosition(this.itemElement);
            this.itemContainer = document.querySelector(this.containerSelector);
        }
    },
    mounted(){
        this.init()
        this.reSetShow()
    },
    props: {
        //table内容
        itemSelector: {
            type: String
        },
        //外部容器，原滚动条显示的元素
        containerSelector: {
            type: String
        }
    },
    beforeDestroy(){
        store.dispatch('‘, null)
    }
}

不要在意我为变量起名的含义（不会英语，起名真难-_-||）。
每次滚动滚轴都需要判断一下，el-table中横滚轴是否已经显示出来了。（刷新显示的方法：reSetShow， 因为这个方法需要频繁的执行，我尽可能的不在方法中做运算。）
因为我的业务页面显示在app-mian中的，所以我在该div中加了一个@scroll事件，事件执行的方法存到了store中（我也不知道怎么做合不合理），如此一来，想添加scroll直接提交store就可以，在页面销毁前（beforeDestroy）将刷新事件清空。
所以需要引用vuex那一套（自行引用）。
还用到一个方法，用来计算el-table到页面顶部的距离，从网上找了不知道哪个哥们的，地址没记…

export function getElementPosition(element){
    if ( arguments.length != 1 || element == null ) 
    { 
        return null; 
    } 
    var offsetTop = element.offsetTop; 
    var offsetLeft = element.offsetLeft; 
    var offsetWidth = element.offsetWidth; 
    var offsetHeight = element.offsetHeight; 
    while( element = element.offsetParent ) 
    { 
        offsetTop += element.offsetTop; 
        offsetLeft += element.offsetLeft; 
    } 
    return { 
        absoluteTop: offsetTop, 
        absoluteLeft: offsetLeft, 
        offsetWidth: offsetWidth, 
        offsetHeight: offsetHeight,
    }; 
}

我的初衷是，添加这个组件实现此功能，当然我的问题是因为el-table，这组件使用却不局限于el-table（应该吧。。。别的没测）

<scroll-bar  containerSelector=".el-table .el-table__body-wrapper" 
itemSelector=".el-table .el-table__body" ref="scrollBar"/>

用的话就很方便了…吧，通过选择器确定标签元素以达到通用效果
必要的时候来一句,刷新下滚轴

this.$refs.scrollBar.reSetShow()

这个组件是在js中写的，至于原因，就是因为我之前没用render（）这么写过，想试一下。。。