el-table表格实现鼠标拖动而左右滑动

场景描述:

表格样式较为复杂,10条数据超出整个屏幕的高度,因而导致无法快速拖动滚动条,所以提出需要在表格内容区拖动鼠标,从而实现无需滚动到底部就可以左右拖动表格内容的效果。

具体实现:

实现的方式通过注册一个自定义指令,方便随时调用这个鼠标拖动的能力。

main.js

复制代码
Vue.directive('tabelMove', {
  // 指令的定义
  bind: function (el, binding, vnode) {
    var odiv = el // 获取当前表格元素
    // el.style.cursor = 'pointer'

    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
    }
  }
})

使用:

复制代码
 <el-table v-tabelMove :data="tableData" >
 	<el-table-column>......</<el-table-column>
 </el-table>
相关推荐
掘金安东尼3 分钟前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃8 分钟前
react context如何使用
前端·javascript·react.js
GDAL13 分钟前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
芜青28 分钟前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
麦麦大数据1 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法
BillKu6 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
DevilSeagull6 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
大怪v7 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
gnip10 小时前
链式调用和延迟执行
前端·javascript
杨天天.10 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频