element table实现拖拽排序功能

最近遇到一个需要实现拖拽排序的需求
发现一个插件可以实现
我这里是vue+element table
首先引入一下插件

npm install sortablejs --save

然后在你需要的页面引入插件

记得要在table上面加一个 row-key=“id”
这个id需要是你的这条数据中唯一的

<el-table
ref="table"
:data="tableData"
row-key="id"
>
</el-table>

然后在methods中写入拖拽排序的方法

setSort() {
	  //ref一定跟table上面的ref一致
      const el = this.$refs.table.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        ghostClass: "sortable-ghost",
        setData: function(dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        // 监听拖拽事件结束时触发
        onEnd: evt => {
          // 拖动行的前一行
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
          // 拖动行的后一行
          this.tableData.splice(evt.newIndex, 0, targetRow);
          //这里的tableData是你table上面绑定的list
        }
      });
    }

最后记得在 mounted生命周期里面调取一下这个方法
这样就大功告成啦！