Vue+ElementUi项目实现表格-单行拖拽

最近在项目的中用到了表格单行拖拽的功能，当时直接复制粘贴别人的代码，今天有时间再回头看看：

首先VUE + ELEMENT+SORTABLEJS 准备好，对应的是以下版本    

 1.   "element-ui": "^2.13.2"

 2.   "vue": "^2.5.2"

 3.   "sortablejs": "^1.10.2"

<template>
  <el-table :data="tableData" id="rowDrop_table">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "App",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-01",
          name: "赵",
          address: "上海市普陀区金沙江路 1518"
        },
        {
          date: "2017-06-02",
          name: "钱",
          address: "上海市普陀区金沙江路 1517"
        },
        {
          date: "2018-07-03",
          name: "孙",
          address: "上海市普陀区金沙江路 1519"
        },
        {
          date: "2019-08-04",
          name: "李",
          address: "上海市普陀区金沙江路 1516"
        }
      ]
    };
  },
  methods: {
    rowDrop() {
      let tbody = document.querySelectorAll("#rowDrop_table tbody");
      if (!tbody.length) return;
      let _this = this;
      Sortable.create(tbody[0], {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          console.log(_this.tableData);
        }
      });
    }
  },
  mounted() {
    this.rowDrop();
  }
};
</script>
<style>
#rowDrop_table {
  width: 700px;
  margin: 0 auto;
}
</style>