突然遇到需求需要實現(xiàn)table拖動排序，并且拖動后需要對后端返回的數(shù)據(jù)進行排序

那么我們需要用到插件:sortablejs

僅僅實現(xiàn)拖拽代碼效果如下

<template>
  <div class="home">
    <h1>Element ui表格組件+sortablejs實現(xiàn)行拖拽排序</h1>
    <el-table
      size="small"
      :default-sort="{ prop: 'sortNum', order: 'ascending' }"
      :data="tableData"
      border
      align="left"
    >
      <el-table-column
        show-overflow-tooltip
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="col[index].prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <p>{{ scope.row[item.prop] }}</p>
          <p v-if="item.label === '操作'">
            <el-button size="mini" type="success">上架</el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  components: {
    Sortable
  },
  data() {
    return {
      col: [
        {
          label: "位置",
          prop: "location"
        },
        {
          label: "廣告信息",
          prop: "content"
        },
        {
          label: "跳轉url",
          prop: "url"
        },
        {
          label: "聯(lián)系人",
          prop: "contacts"
        },
        {
          label: "開始時間",
          prop: "startDate"
        },
        {
          label: "結束時間",
          prop: "endDate"
        },
        {
          label: "經(jīng)辦人",
          prop: "operator"
        },
        {
          label: "操作",
          prop: "isClick"
        }
      ],
      tableData: [
        {
          location: "A5",
          content: "這個鞋子好啊",
          url: "http://xiezi.com",
          contacts: "溫州皮革城",
          startDate: "2019-08-28",
          endDate: "2019-08-31",
          operator: "小李"
        },
        {
          location: "A1",
          content: "落魄前端炒粉",
          url: "http://888.com",
          contacts: "陳老板",
          startDate: "2019-08-28",
          endDate: "2019-08-31",
          operator: "小李"
        },
        {
          location: "A0",
          content: "某寶啥都有",
          url: "http://taobao.com",
          contacts: "馬總",
          startDate: "2019-08-28",
          endDate: "2019-12-01",
          operator: "大錘"
        },
        {
          location: "A4",
          content: "時尚潮流服飾",
          url: "http://good.com",
          contacts: "廖老板",
          startDate: "2018-09-28",
          endDate: "2019-01-10",
          operator: "狗蛋"
        },
        {
          location: "A3",
          content: "人到中年禿不由己",
          url: "http://666666.com",
          contacts: "土豪",
          startDate: "2019-03-28",
          endDate: "2019-06-18",
          operator: "翠花"
        },
        {
          location: "A2",
          content: "落魄前端炒粉",
          url: "http://dddd.com",
          contacts: "李老板",
          startDate: "2019-02-13",
          endDate: "2019-05-31",
          operator: "小黃"
        }
      ]
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      Sortable.create(tbody);
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 1200px;
  margin: 0 auto;
}
</style>

關于拖拽后保存到數(shù)據(jù)庫：

http://www.sortablejs.com/index.html
sorttablejs：https://blog.csdn.net/XH_jing/article/details/120265576

參考文獻：
https://segmentfault.com/a/1190000020210917
https://github.com/liguangshuai1997/elementTable-Drag