安装sortablejs

npm install sortablejs --save

前台代码

<template>
  <el-table
    ref="searchList"
    border
    :data="searchList"
    row-key="__vModel__"
    :header-cell-style="{ background: '#f5f7fa' }"
  >
    <el-table-column
      header-align="center"
      align="center"
      label="拖拽"
      width="50"
    >
      <template>
        <i class="el-icon-rank move" @mousedown="rowDrop('searchList')" />
      </template>
    </el-table-column>
    <el-table-column
      prop="label"
      header-align="left"
      align="left"
      label="列名"
    ></el-table-column>
    <el-table-column
      prop="__vModel__"
      header-align="left"
      align="left"
      label="字段"
    ></el-table-column>
  </el-table>
</template>

注意一定要给el-table设置row-key属性，

js代码

import Sortable from "sortablejs";
export default {
  mounted() {
    this.rowDrop("searchList");
  },
  data() {
    return {
      searchList: [
        {
          __vModel__: "lll",
          label: "列名"
        },
        {
          __vModel__: "222",
          label: "列名"
        },
        {
          __vModel__: "333",
          label: "列名"
        }
      ]
    };
  },
  methods: {
    rowDrop(temp) {
      const tbody = this.$refs[temp].$el.querySelector(
        ".el-table__body-wrapper > table > tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        handle: ".move", //handle 这个参数是设置该标签，或者该class可以拖拽
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this[temp].splice(oldIndex, 1)[0];
          _this[temp].splice(newIndex, 0, currRow);
        }
      });
    }
  }
};