el-table(Sortable)简单实现拖动排序(亲测有效)

el-table(Sortable)简单实现拖动排序(亲测有效)

1、template组件，这里需要注意2点，ref="dragTable"和row-key="id"

<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>
</template>

2、script可以之间复制使用

import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "张富贵", school: "西瓜南大学", age: "22", sex: "不知", sort:1 },
        { id: 2, name: "李德华", school: "西瓜南大学", age: "22", sex: "不知", sort:2 },
        { id: 3, name: "董小明", school: "西瓜南大学", age: "22", sex: "不知", sort:3 }
      ],
      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("原来位置", targetRow.sort);
          console.log("现在位置", evt.newIndex + 1); //这是当前页面位置，如果是分页需要自己改一下
        }
      });
    }
  }
};