Vue element表格实现拖动排序

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

npm install sortablejs

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

import Sortable from "sortablejs";

表格加上row-key=“id”

  <el-table :data="userlist" 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.userlist.splice(e.oldIndex, 1)[0];
          this.userlist.splice(e.newIndex, 0, targetRow);
          console.log(this.userlist);
　　　　　　//这块根据自己需求处理
          let temp = [];
          this.userlist.map((m, i) => {
            temp.push({
              id: m.id,
              seq: i,
            });
          });
          console.log(temp);
        },
      });
    },

 原文地址 https://blog.csdn.net/qq_40236722/article/details/102699830