Vue element表格实现拖动排序

最近在vue项目开发时，领导提了一个需求，需要实现自由拖动element表格进行排序，小编上网查了很多方法，最终实现了这个功能。在这里小编跟大家分享一下如何实现这个功能的。

首先我们需要安装sortable.js这款插件

npm install sortablejs

然后我们在js中引入这个插件

import Sortable from "sortablejs";

表格加上row-key=“id”

  <el-table :data="tableData" ref="singleTable" highlight-current-row border row-key="id" class="load_table">
      <el-table-column prop="id"  width="50" label="序号" align="center"></el-table-column>
      <el-table-column prop="name"  width="50" label="姓名" align="center" prop="index"></el-table-column>
   </el-table>

实现排序方法如下所示：

 mounted(){
    this.dragSort();
  },
   //表格拖动排序
    dragSort() {
      const el = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function (dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: e => {
        //e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
          const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
          this.tableData.splice(e.newIndex, 0, targetRow);
          let dragId = this.tableData[e.newIndex].id;//拖动行的id
          let oneId,twoId
          //拖动行的前一行
          if( this.tableData[e.newIndex-1]){
           oneId = this.tableData[e.newIndex-1].id;}
          else {
           oneId = ""
          }
          //拖动行的后一行
        if( this.tableData[e.newIndex+1]){
           twoId = this.tableData[e.newIndex+1].id;}
          else {
           twoId = ""
          }
        this.postRequest({
        url: this.dragUrl,
        data: {
          "dragId":dragId,
          "oneId": oneId,
          "twoId": twoId ,
          "projectId": ""
        },
        success: (result) => {
          if (result) {
            this.$message({
              message: "拖动排序成功!",
              type: "success",
            })
          }
          else {
            this.$message({
              message: "拖动排序失败！",
              type: "error"
            });
          }
        }
      })
        }
      })

    },

到这一步，我们已经实现页面自由拖动表格的功能了。个人需求不同，大家自行传参数给后台。以我个人为例，后台需要我拖动行的id以及推动后拖动行前面一行以及后面一行的id。存在两种情况，拖动到第一行和最后一行时，他们的前一行和后一行根本就不存在，所以需要处理下。