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

有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用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>