sortablejs+vue2+antdv 实现表格简单拖拽排序

安装

$ npm install sortablejs --save

使用

//html
<a-table ref="dragTable" :data-source="newData">
</a-table>

// script
import Sortable from "sortablejs";

mounted() {
    //调用
     this.$nextTick(() => this.setDrag());
},
// newData为表格数据
methods: {
	// 设置拖拽
	setDrag() {
	 // 获取元素
      const el = this.$refs.dragTable.$el.querySelectorAll(".ant-table-body > table > tbody")[0];
      this.sortable = Sortable.create(el, {
        ghostClass: "sortable-ghost", // Class name for the drop placeholder,
        setData: function (dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        // 拖动结束时回调
        onEnd: (evt) => {
          const targetRow = this.newData.splice(evt.oldIndex, 1)[0];
          // 更新到表格数据
          this.newData.splice(evt.newIndex, 0, targetRow);
          // 提示等
          this.$message.success("操作成功"); 
        },
      });
    },
    
    // 在改动数据的方法中调用
    add() {
     this.$nextTick(() => this.setDrag());
    },
}