el-table表格可拖拽实现

druggerTable.js

(function (global, factory) {
  global.BmTableDrag = factory(global);
})(window, function (global) {
  function BmTableDrag(options = {}) {
    if (!(this instanceof BmTableDrag)) {
      throw new Error(
        "BmTableDrag is a constructor and should be called with the `new` keyword"
      );
    }
    this._initParams(options);
  }

  let btd;
  BmTableDrag.prototype._initParams = function (options) {
    btd = this;
    btd.dragState = {
      start: -1,
      end: -1,
      move: -1,
      dragging: false,
      direction: undefined,
    };
    btd.tableRef = options.tableRef;
    btd.tableDiv = btd.tableRef.$el;
    let prev = btd.tableDiv.previousElementSibling;
    btd.wTableDiv = document.createElement("div");
    btd.wTableDiv.className = "table-drag";
    btd.wTableDiv.appendChild(btd.tableDiv);
    prev.parentNode.insertBefore(btd.wTableDiv, prev.nextSibling);
    btd.columns = btd.tableRef.store.states._columns;
    let existSelection = btd.columns[0].type === "selection";
    btd.headThCells = btd.tableDiv.querySelectorAll(
      "div.el-table__header-wrapper .table-header-cell-style .cell"
    );
    btd.headThCells.forEach((it, index) => {
      if (index === 0 && existSelection) {
        return;
      }
      it.addEventListener("mousedown", btd._handleMouseDown.bind(btd));
      it.addEventListener("mousemove", btd._handleMouseMove.bind(btd));
      it.addEventListener("mouseup", btd._handleMouseUp.bind(btd));
    });

    document.addEventListener("mouseup", btd.resetDragIfNecessary.bind(btd));
  };

  BmTableDrag.prototype._handleMouseDown = function (e) {
    if (e.currentTarget.classList.contains("noclick")) {
      return;
    }
    btd.wTableDiv.classList.add("table-drag_moving");
    btd.dragState.dragging = true;
    btd.dragState.start = btd._realIndex(e);
  };

  BmTableDrag.prototype._handleMouseMove = function (e) {
    if (!btd.dragState.dragging) {
      return;
    }
    let index = btd._realIndex(e);
    if (index - btd.dragState.start !== 0) {
      btd.dragState.direction =
        index - btd.dragState.start < 0 ? "left" : "right";
      btd.dragState.move = index;
    } else {
      btd.dragState.direction = undefined;
    }

    if (btd.columns[index].type === "selection") {
      return;
    }

    btd._resetHeadThCellCls();
    let targetTh;
    let target = e.target;
    if (target.classList.contains("sort-caret")) {
      targetTh = target.parentElement.parentElement.parentElement;
    } else if (target.classList.contains("caret-wrapper")) {
      targetTh = target.parentElement.parentElement;
    } else {
      targetTh = target.parentElement;
    }
    targetTh.classList.add(`drag_active_${btd.dragState.direction}`);
  };

  BmTableDrag.prototype._handleMouseUp = function (e) {
    let key = btd._realIndex(e);
    btd.dragState.end = parseInt(key);
    btd._dragColumn(btd.dragState);
    btd._resetDragState();
  };

  BmTableDrag.prototype._dragColumn = function ({ start, end, direction }) {
    if (
      btd.dragState.start !== -1 &&
      btd.dragState.start !== btd.dragState.end
    ) {
      let tempData = [];
      let left = direction === "left";
      let min = left ? end : start - 1;
      let max = left ? start + 1 : end;
      for (let i = 0; i < btd.columns.length; i++) {
        if (i === end) {
          tempData.push(btd.columns[start]);
        } else if (i > min && i < max) {
          tempData.push(btd.columns[left ? i - 1 : i + 1]);
        } else {
          tempData.push(btd.columns[i]);
        }
      }
      btd.tableRef.store.states._columns.splice(0, btd.columns.length);
      btd.tableRef.store.states._columns.push(...tempData);

      btd.tableRef.store.updateColumns();
      btd.tableRef.data.splice(0, 0);
    }
  };

  BmTableDrag.prototype._realIndex = function (e) {
    let list = btd.columns;
    for (let i = 0; i < list.length; i++) {
      const id = list[i].id;
      if (id === e.currentTarget.parentElement.classList[0]) {
        return i;
      }
    }
    return -1;
  };

  BmTableDrag.prototype._resetHeadThCellCls = function () {
    btd.headThCells.forEach((it) => {
      it.parentElement.classList.remove(
        "drag_active_left",
        "drag_active_right"
      );
    });
  };

  BmTableDrag.prototype.resetDragIfNecessary = function (e) {
    if (e.buttons === 0) {
      btd._resetDragState();
    }
  };

  BmTableDrag.prototype._resetDragState = function () {
    if (btd.dragState.dragging) {
      btd._resetHeadThCellCls();
      btd.wTableDiv.classList.remove("table-drag_moving");
      btd.dragState.start = -1;
      btd.dragState.end = -1;
      btd.dragState.move = -1;
      btd.dragState.dragging = false;
      btd.dragState.direction = undefined;
    }
  };

  return BmTableDrag;
});

在main.js里引入

import '@/utils/druggerTable'

vue页面

<template>
   <div>实现方式二:通过修改elementUI table组件的内部状态</div>
   <el-table 
       ref="listTableRef1"
       :data="listTableData" 
       :height="260" 
       border
       v-loading="loadings.length>0" 
       element-loading-text="请稍后..."
       header-cell-class-name="table-header-cell-style"
       cell-class-name="table-body-cell-style">
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="date" label="日期" width="100"></el-table-column>
       <el-table-column prop="name" label="姓名" width="100"></el-table-column>
       <el-table-column prop="address" label="地址" width="200" show-overflow-tooltip>
       </el-table-column>
       <el-table-column prop="status" sortable label="状态" width="80">
           <template slot-scope="scope">
               <span :style="'color:' + (scope.row.status===0 ? 'red' : 'green')">
                   {{statusMap[scope.row.status]}}
               </span>
           </template>
       </el-table-column>
       <el-table-column prop="tag" label="标签">
           <template slot-scope="scope">
               <el-tag
                   :type="scope.row.tag === '家' ? 'primary' : 'success'"
                   disable-transitions>
                   {{scope.row.tag}}
               </el-tag>
           </template>
       </el-table-column>
   </el-table>
<template>
<script>
export default {
   data() {
       return {
           loadings: [],
           statusMap: {
               0: '无效',
               1: '有效'
           },
           listTableData: [{
             date: '2016-05-01',
             name: '王小虎1',
             address: '上海市普陀区金沙江路 1518 弄',
             status: 0,
             tag: '家'
           }, {
             date: '2016-05-02',
             name: '王小虎2',
             address: '上海市普陀区金沙江路 1517223 XXX栋 XXX座 弄',
             status: 1,
             tag: '公司2'
           }, {
             date: '2016-05-03',
             name: '王小虎3',
             address: '上海市普陀区金沙江路 1519 弄',
             status: 0,
             tag: '家'
           }, {
             date: '2016-05-04',
             name: '王小虎4',
             address: '上海市普陀区金沙江路 1516 弄',
             status: 1,
             tag: '公司4'
           }]
       }
   },
   mounted() {
	    this.$nextTick(() => {
	        new BmTableDrag({tableRef: this.$refs.listTableRef1})
	    })
   }
}
</script>
<style lang='scss' scoped>
::v-deep .table-drag {
    .el-table th {
        padding: 0;
    }

    .el-table th.drag_active_left {
        border-left: 3px solid #409EFF;
    }

    .el-table th.drag_active_right {
        border-right: 3px solid #409EFF;
    }

    .table-header-cell-style .thead-cell {
        cursor: pointer;
        overflow: initial;
        width: 100%;
    }

    .table-header-cell-style.noclick .cell {
        cursor: pointer;
        overflow: initial;
    }

    .table-header-cell-style .cell {
        cursor: pointer;
        overflow: initial;
        width: 98%;
    }
}

::v-deep .table-drag.table-drag_moving .el-table th .thead-cell {
    cursor: move !important;
}

::v-deep .table-drag.table-drag_moving .el-table__fixed {
    cursor: not-allowed;
}

::v-deep .table-drag.table-drag_moving .el-table__fixed {
    cursor: not-allowed;
}

::v-deep .table-drag.table-drag_moving .el-table th.table-header-cell-style .cell {
    cursor: move !important;
}

::v-deep .table-drag.table-drag_moving .el-table th.table-header-cell-style.el-table-column--selection .cell {
    cursor: not-allowed !important;
}
</style>

本文文章来源，搬运仅为自己借鉴使用