表格拖动排序

            <el-table
        :data="tabListDataS"
        ref="singleTable"
        row-key="id"
        max-height="350"
      >
        <el-table-column
          prop="name"
          label="关注游戏名称"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          type="index"
          width="120"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template #default="scope">
            <div>
              <img
                style="cursor: pointer"
                src="./gantt/icon/顺序备份5.svg"
                alt
              />
              <img
                v-if="scope.row.cancel === false"
                style="cursor: pointer; padding-left: 20px; padding-right: 20px"
                src="./gantt/icon/编组10备份13.svg"
                alt
                @click.prevent="deletRow(scope.row, scope.$index)"
                v-buriedPointClick="[GetRouter,173,'search']"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>

import Sortable from "sortablejs";

  data() {
    return {
      tabListDataS: [],
    };
  },
    init() {
      this.$nextTick(() => {
        this.dragSort()
      })
    },
    //表格拖动排序
    dragSort() {
      const tbody = this.$refs.singleTable.$el.querySelector(
        ".el-table__body-wrapper tbody"
      );
      const selft = this;
      Sortable.create(tbody, {
        animation: 400, //动画参数
        onEnd({ newIndex, oldIndex }) {
          let tData = JSON.parse(JSON.stringify(selft.tabListDataS));
          const currRow = tData.splice(oldIndex, 1)[0];
          tData.splice(newIndex, 0, currRow);
          selft.tabListDataS = [];
          setTimeout(() => {
            selft.tabListDataS = tData;
          }, 5);
          let YData = tData.map((e) => {
            let Focus = { id: e.id, sort: e.sort };
            return Focus;
          });
          const tempArr = [];
          YData.forEach((e) => {
            tempArr.push(e.sort);
          });
          tempArr.sort((a, b) => a - b);
          tempArr.forEach((e, i) => {
            YData[i].sort = e;
          });
          // const Focus = {
          // updateList: YData,
          // userName: selft.userinformation.userName,
          // };
          userintelligencetagSort(YData)
            .then((res) => {
              if (res.code === 0) {
                ElMessage({
                  message: "排序成功!",
                  type: "success",
                });
                selft.$parent.updateList()
              } else {
                ElMessage({
                  message: res.message,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              ElMessage({
                message: err,
                type: "error",
              });
            });
        },
      });
    },

Sortablejs的用法