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

效果

上代码

//全局自定义指令

import Vue from 'vue';

Vue.directive('tableDrag', {

  inserted: function(el) {

      el = el.getElementsByClassName('el-table__body-wrapper')[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;

          };

      };

  }

});

使用 :标签上直接加指令就ok

<el-table v-tableDrag></el-table>