element-ui-table表格自由拖动方法封装

最新推荐文章于 2025-07-01 14:44:18 发布

大柿子炒鸡蛋、

最新推荐文章于 2025-07-01 14:44:18 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/qq_57491020/article/details/132335654

文章介绍了如何在Vue项目中使用Element-UI库实现全局的表格拖动效果，包括鼠标操作处理、列宽调整和文本复制功能的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from "vue"; //这里是重中之重
import { Notification, MessageBox, Message, Loading } from "element-ui";
export const tablesMove = function (Vue) {
  // 全局添加table左右拖动效果的指令
  Vue.directive("tableMove", {
    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;

      let bindRef = binding.value[0]; //绑定的表格的ref属性

      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.$refs[bindRef].doLayout();
        }, 200);
        if (mouseFlag) {
          mouseFlag = false;
        } else {
          clearTimeout(mouseDownAndUpTimer); // 清除延迟时间
        }
      };

      odiv.onmouseleave = (e) => {
        setTimeout(() => {
          // 解决拖动列宽行不对齐问题--渲染表格
          vnode.context.$refs[bindRef].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.onselectstart = (e) => {
        if (e.target._prevClass == "el-input__inner") {
          return true;
        } else {
          return false;
        }
      };
      odiv.ondblclick = (e) => {
        let url = e.target.innerText;
        if(url==''){
          return
        }
        let oInput = document.createElement("input");
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy"); // 执行浏览器复制命令
        Message({
          message: "复制成功",
          type: "success",
        });
        oInput.remove();
      };

      //浏览器Event.path属性不存在
      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;
      }
    },
  });
};

在main.js中写

最后在组件中使用