iview 自定义指令实现Table左右横向拖拽

更新日期: 2020-03-02阅读: 2.2k标签: iview

有时候表格内容会很多,需要横向滚动查看右边的内容,又不想到底部拖动滚动条,如果能直接在内容中拖动就好了,这个时候就可以用 vue 的自定义指令来实现了。


为了以后扩展指令方便,创建 directives.js 文件,在 js 文件中引入Vue

import Vue from 'vue';


然后就可以自定义指令了

Vue.directive('tableDrag', {
    inserted: function() {
        let el = document.getElementsByClassName('ivu-table-body')[0];
        el.style.cursor = 'grab';
        el.onmousedown = function() {
            let gapX = event.clientX;
            let startX = el.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;
            };
        };
    }
});


在 main.js 中引入 js 文件

import './libs/tableDrag.js'


之后就可以在 i-table 元素上使用这个指令了

<i-table v-tableDrag></i-table>


链接: https://fly63.com/article/detial/9244

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!