(element-ui) el-table adds mouse drag event

1. Demand

When using element-ui's el-table, you will inevitably encounter too many columns and use floating columns. This is officially encapsulated by element. You only need to add a fixed attribute to achieve the floating effect of fixed columns.
but! !
He did not encapsulate more user-friendly operations, such as mouse click and drag! !

You can only drag left and right by clicking on the drag bar. If the content of the table is too long and the data you want to see is in the first column, it will obviously not be Ginkgo! !
emmmmm!
In fact, it is also the needs of customers. They simply don’t pay attention to our development at all. All needs are added! !
Don’t talk about it! solve! Just fuck him and that's it!

2. Solution

1. Encapsulate a drag event

Create a js file and copy and paste the following code into the js file.
Here is a tableMove method directly exported.
The code is as follows (example):

import Vue from "vue";  //这里是重中之重
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 = () => {
    
    
        return false;
      };

      //浏览器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;
      }
    },
  });
};

2. Global introduction

By encapsulating instructions and referencing them globally in main.js , you can add an instruction event to the table that needs to be dragged and use it without repeatedly introducing files, which is very convenient!
The code is as follows (example):

//设置表格支持拖动
import {
    
     tablesMove } from "./util/util";  //这里是引入js文件中的方法  路径替换成自己的js路径即可
Vue.use(tablesMove);

3. Use in tables

Define ref in el-table to specify which table is dragged

   ref="multipleTable"

Pass the ref name defined above into the event to support drag events

   v-table-move="['multipleTable']"

Complete code

The focus of the red box, the ref name must be consistent, otherwise the drag effect cannot be achieved! !