对vue项目el-table表格进行鼠标左右拖动行为功能

1，我是在utils里定义了一个tableMove.js文件，里面代码如下

import Vue from 'vue';
  Vue.directive('tabelMove', {
    // 指令的定义
    bind: function(el, binding, vnode) {
      var odiv = el // 获取当前表格元素

      el.querySelector('.el-table .el-table__body-wrapper').style.cursor = 'pointer'

      var mouseDownAndUpTimer = null
      var mouseOffset = 0
      var mouseFlag = false
      odiv.onmousedown = (e) => {
        const ePath = composedPath(e)
        // 拖拽表头不滑动
        if (ePath.some(res => { return res && res.className && res.className.indexOf('el-table__header') > -1 })) return

        if (e.which !== 1) return

        mouseOffset = e.clientX
        mouseDownAndUpTimer = setTimeout(function() {
          mouseFlag = true
        }, 80)
      }
      odiv.onmouseup = (e) => {
        setTimeout(() => {
          // vnode.context:当前的vm实例 -- 渲染表格
          vnode.context.$refs.orderTable && vnode.context.$refs.orderTable.doLayout()
        }, 200)
        if (mouseFlag) {
          mouseFlag = false
        } else {
          clearTimeout(mouseDownAndUpTimer) // 清除延迟时间
        }
      }
      odiv.onmouseleave = (e) => {
        setTimeout(() => {
          // vnode.context:当前的vm实例 --  渲染表格
          vnode.context.$refs.orderTable && vnode.context.$refs.orderTable.doLayout()
        }, 200)
        mouseFlag = false
      }
      odiv.onmousemove = (e) => {
        if (e.which !== 1) return

        const divData = odiv.querySelector('.el-table .el-table__body-wrapper')
        if (mouseFlag && divData) {
          // 设置水平方向的元素的位置
          divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX))
        }
      }
      // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
      odiv.ondragstart = (e) => {
        e.preventDefault()
      }
      odiv.ondragend = (e) => {
        e.preventDefault()
      }
      // 点击复制
      odiv.onclick = (e) => {
      }
      // 是否选中文字
      odiv.onselectstart = () => {
        return false
      }
      function composedPath(e) {
        // 存在则直接return
        if (e.path) { return e.path }
        // 不存在则遍历target节点
        let target = e.target
        e.path = []
        while (target.parentNode !== null) {
          e.path.push(target)
          target = target.parentNode
        }
        // 最后补上document和window
        e.path.push(document, window)
        return e.path
      }
    }
  })



/*1.指令定义： Vue.directive('tabelMove', { ... }) 定义了一个名为tabelMove的Vue自定义指令。

2.指令绑定： 当这个指令被绑定到一个DOM元素上时，bind函数会被调用。bind函数接收三个参数：el（被绑定的元素），binding（绑定对象），vnode（虚拟节点）。

3.变量初始化：

odiv = el：将传入的el（被绑定的元素）赋值给odiv。
设置.el-table .el-table__body-wrapper的cursor样式为pointer，使得鼠标悬停时显示为手形图标。
4.鼠标事件处理：

onmousedown：当鼠标按下时，获取鼠标的当前位置clientX，并设置一个定时器，在80毫秒后设置mouseFlag为true。这主要用于判断鼠标是否确实开始移动，以避免误触。
onmouseup：当鼠标松开时，如果mouseFlag为true，则将其设置为false；否则，清除之前设置的定时器。此外，无论mouseFlag的值如何，都会调用vnode.context.$refs.orderTable.doLayout()，这似乎是重新布局或刷新表格的操作。
onmouseleave：当鼠标离开元素时，执行与onmouseup相似的操作，同时确保mouseFlag为false。
onmousemove：当鼠标移动时，如果mouseFlag为true，则根据鼠标的当前位置和上一次的位置差来滚动表格的内容区域。
5.其他事件处理：

ondragstart 和 ondragend：阻止元素的默认拖动行为。
onclick：目前为空，但预留了点击事件的处理。
onselectstart：阻止文本选择。*/

2，然后在main.js里全局引入tabelMove文件

import Vue from 'vue'
import App from './App'
import './utils/tabelMove.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3，在页面里进行使用

 <el-table  v-tabelMove>  
    <el-table-column type="selection" width="55" align="center"/>
    <el-table-column fixed type="index" label="序号" width="55">
    </el-table-column>
 </el-table>