有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用 Vue 的自定义指令来实现了。
为了以后扩展指令方便，创建 directives.js 文件，在 js 文件中引入Vue
import Vue from 'vue';
// iview 自定义指令 table 点击内容左右拖拽
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 tableDrag from './plugins/tableDrag' // 权限按钮字段判断 页面 v-has 标签调用
之后就可以在 table 元素上使用这个指令了
<Table v-tableDrag></Table>
