vue项目中el-table表格实现鼠标左右滑动

1、实现原理

在vue的main.js文件中通过directive注册一个v-tableSwipe自定义指令，再在el-table上引入即可。

2、具体代码如下：

2.1 在main.js中自定义指令代码：

Vue.directive('tableSwipe', {
  // 指令的定义
  bind: function (el, binding, vnode) {
    var odiv = el // 获取当前表格元素
    // 找到el-table元素 设置鼠标悬停鼠标样式
    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
    }
  }
})

2.2 在xxx.vue文件的template中的el-table组件上添加上面自定义的指令,若需要实现表格底部汇总数据可在el-table上添加summary-method属性方法：

<el-table :data="tableData" style="width: 100%" border show-summary  :summary-method = "summaryMethodHandler" v-tabelMove>
</el-table>
methods: {
  //表格底部汇总
   summaryMethodHandler({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
         if (index === 0) {
            sums[index] = '合计';//可更改合计行的名称
               return;
           }
           const values = data.map(item => {
            return Number(item[column.property])//property为表头的prop值
           });
            // every() 方法用于检测values数组所有元素是否都符合指定条件（通过函数提供）
            if (!values.every(value => isNaN(value))) {
             sums[index] = values.reduce((prev, curr) => {
             const value = Number(curr);//Number转换为数值
          let sum = Number(Number(prev) + Number(curr)).toFixed(2);//toFixed(2)数据项保留两位小数
             if (!isNaN(value)) {
                 return sum;
              } else {
                 return prev;
              }
             }, 0);
             // sums[index] += '单位名称';
                  sums[index] += '';
              } else {
                  sums[index] = '';
            }
        });
        return sums;//返回sums数组,sums数组中各项就会显示在合计行的各列中
    },
}