阅读 369

Vue+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>复制代码


文章分类
前端
文章标签