Ant Design Vue（a-table + vue-draggable-plus）

一，导入

npm install vue-draggable-plus

二，官网

VueDraggablePlus | 支持 Vue2 和 Vue3 的拖拽组件 (vue-draggable-plus.pages.dev)

三，代码

<!--
*@TestTable
*@author JIANG L
-->
<template>

<!--      
注意，排版的时候不要用:scroll="{x:'max-content',y:'500px'}" ，
改成：style="cursor: pointer;overflow: auto"样式控制，不然会冲突。
其他参考官网，这只是基本的实现。添加的注释删掉，基本功能就能实现了
-->
    <a-table
        bordered
        :row-class-name="rowsClassName" //添加class
        :columns="columns" //行
        :dataSource="tableData1" //表数据
        style="cursor: pointer" //鼠标样式改为手
        :pagination="false" //不分页
        ref="testTable1" //表地址
        size="small" //小表
    >
        <template #bodyCell="{ text, record, index, column }">
            <!--            操作-->
        </template>
    </a-table>
            <!--            分割线-->
    <a-divider style="height: 2px; background-color: blue" />

    <a-table
        bordered
        :row-class-name="rowsClassName"
        :columns="columns"
        :dataSource="tableData2"
        style="cursor: pointer"
        :pagination="false"
        ref="testTable2"
        size="small"
    >
        <template #bodyCell="{ text, record, index, column }">
            <!--            操作-->
        </template>
    </a-table>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {useDraggable} from "vue-draggable-plus";
const columns = [
    {title: '名称', dataIndex: 'name', key: 'name', align: "center"},
    {title: '年龄', dataIndex: 'age', key: 'age', align: "center"},
    {title: '性别', dataIndex: 'sex', key: 'sex', align: "center"}
]
const tableData1 = ref([
    {name: '张三', age: '18', sex: '男'},
    {name: '李四', age: '19', sex: '女'},
    {name: '王五', age: '20', sex: '男'},
    {name: '赵六', age: '21', sex: '女'},
    {name: '孙七', age: '22', sex: '男'},
    {name: '周八', age: '23', sex: '女'},
    {name: '吴九', age: '24', sex: '男'},
    {name: '郑十', age: '25', sex: '女'}
]) ;
const tableData2 = ref([
    {name: '刘十一', age: '26', sex: '男'},
    {name: '陈十二', age: '27', sex: '女'},
    {name: '蔡十三', age: '28', sex: '男'},
    {name: '沈十四', age: '29', sex: '女'},
    {name: '苏十五', age: '30', sex: '男'},
    {name: '杜十六', age: '31', sex: '女'}
]) ;
// 加上class
function rowsClassName(record,index) {
    return (index % 2 === 1) ? 'tableRowColor cursor-move': 'cursor-move';
}

const testTable1 = ref();
const testTable2 = ref();
onMounted(async () => { // 加载
    await nextTick();
    let tbody2 = testTable2.value.$el.querySelector('tbody'); //绑定表，获取表
    useDraggable(tbody2, tableData2,  {
        animation: 150,
        group: 'people', //相同的group表示可以相互拖动
        handle: '.cursor-move',
// 修改的时候
        // onUpdate: (evt) => {
        //     console.log('onUpdate',evt)
        // },
// 添加时候
        // onAdd: (evt) => {
        //     console.log('onAdd',evt)
        //     console.log('onAdd==========',evt.clonedData)
        // },
// 排序拖动
        // onSort: event => {
        //     console.log('onSort',event)
        // }
    });

    // 自定义克隆
    let tbody1 = testTable1.value.$el.querySelector('tbody');//绑定表，获取表
    useDraggable(tbody1, tableData1,  {
        animation: 150,//拖动时显示动画
        group: {
            name: 'people',
            pull: 'clone', //方式
            put: false //表示不能放入数据
        },
        handle: '.cursor-move',
        sort: false, // 是否排序
    });
})

</script>

<style scoped>
:deep(.tableRowColor) {
    background-color: #F4F4F4;
}

</style>