解决iview拖动头部横向滚动问题

Vue.directive('dragsroll', {
    bind (my_el) {
        let elHeader = my_el.querySelector('div.ivu-table-header');
        let el = my_el.querySelector('div.ivu-table-body');
        elHeader.style.cursor = 'grab';
        elHeader.onmousedown = function () {
            let gapX = event.clientX;
            let startX = elHeader.scrollLeft;
            document.onmousemove = function (e) {
                let x = e.clientX - gapX;
                el.scrollLeft = startX - x;
                return false;
            };
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    },
})

 注册全局自定义指令,然后再i-table中调用即可

 

posted @ 2022-05-06 14:52  chengJun—  阅读(200)  评论(0编辑  收藏  举报