Vuejs用sortablejs实现表格之间上下拖拽功能

功能需求：表格需要做排序，拖动需要排序行放在想要的位置。下面需要用到sortablejs插件，下面代码可以直接复制使用！

1、template代码

复制代码<el-table :data="list" ref="dragTable" highlight-current-row row-key="id">
  <el-table-column label="id" width="60" prop="id"></el-table-column>
  <el-table-column label="name" prop="name"></el-table-column>
  <el-table-column label="school" prop="school"></el-table-column>
  <el-table-column label="age" prop="age"></el-table-column>
  <el-table-column label="sex" prop="sex"></el-table-column>
</el-table>
1
2
3
4
5
6
7

2、js代码

复制代码import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "张富贵", school: "西瓜南大学", age: "22", sex: "不知" },
        { id: 2, name: "李德华", school: "西瓜南大学", age: "22", sex: "不知" },
        { id: 3, name: "董小明", school: "西瓜南大学", age: "22", sex: "不知" }
      ],
      oldId: "",
      newsId: ""
    };
  },
  mounted() {
    this.setSort();
  },
  methods: {
    setSort() {
      const el = this.$refs.dragTable.$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.list.splice(evt.oldIndex, 1)[0];
          this.list.splice(evt.newIndex, 0, targetRow);
          console.log("Id", targetRow.id);
          console.log("位置", evt.newIndex);
        }
      });
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36