先看看效果

程式碼

helper.js

export const dataSource =  [
    {
      key: "1",
      name: "張三",
      age: 32,
      address: "西湖區湖底公園1號"
    },
    {
      key: "2",
      name: "胡彥祖",
      age: 42,
      address: "西湖區湖底公園2號"
    },
    {
        key: "3",
        name: "李四",
        age: 22,
        address: "西湖區湖底公園3號"
    }
  ];

  export const columns =  [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "年齡",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address"
    }
  ]
 

demo.vue

<template>
  <div class="demo">
    <a-table id="mytb" :dataSource="dataSource" :columns="columns" />
  </div>
</template>
<script>
import { dataSource, columns } from "./helper";
import { onMounted } from "@vue/runtime-core";
import Sortable from "sortablejs";
import { message } from 'ant-design-vue';
export default {
  setup() {
    onMounted(() => {
      const mytb = document.querySelector("#mytb tbody");
      new Sortable(mytb, {
        handle: ".ant-table-row",
        animation: 150,
        ghostClass: "blue-background-class",
        sort: true,
        onUpdate (evt) {
            const name = evt.item.querySelector('td').innerText;
            message.success(`${name}：從位置${evt.oldIndex+1}挪到${evt.newIndex+1}`);
        }
      });
    });

    return { dataSource, columns };
  },
};
</script>
<style scoped lang="less">
.demo {
  width: 800px;
  margin: auto;
  margin-top: 20px;
}
</style>