vue3 hook 实现 antdv table表格整列拖拽

本方法主要基于 and-design-vue table组件中 columns的customHeaderCell 属性实现.

直接附上代码

hook 代码

// @/hook/use-drag-table/index.js

import { ref } from 'vue'

export default function useDragTable(columns) {
    const columnsData = ref([])
    let oldIndex = undefined;
    let newIndex = undefined;
    let sourceRecord = null;
    let targetRecord = null;
    function customHeaderCell(record) {
        return {
            style: {
                cursor: 'pointer'
            },
            //鼠标移入设置可拖拽
            onMouseenter: (event) => {
                const ev = event || window.event
                const target = ev.target
                target.draggable = true
            },
            // 开始拖拽
            onDragstart: (event) => {
                const ev = event || window.event
                ev.stopPropagation()
                //存储拖拽启示元素信息
                sourceRecord = record
                //存储拖拽启示元素index
                oldIndex = columnsData.value.findIndex(e => {
                    return e.dataIndex == record.dataIndex
                });
            },
            onDragover: (event) => {
                const ev = event || window.event
                ev.preventDefault()
                ev.dataTransfer.dropEffect = 'move'
                newIndex = columnsData.value.findIndex(e => {
                    return e.dataIndex || "" == record.dataIndex
                });
            },
            //拖拽结束
            onDrop: (event) => {
                const ev = event || window.event
                ev.stopPropagation()
                //拖拽结束时所在位置的元素信息
                targetRecord = record
                //拖拽结束时元素的索引
                newIndex = columnsData.value.findIndex(e => {
                    return e.dataIndex == record.dataIndex
                });
                //索引相同 直接返回 不同更改元素位置
                if (newIndex === oldIndex) return
                columnsData.value.splice(oldIndex, 1)
                columnsData.value.splice(newIndex, 0, sourceRecord)
            },
        }
    }

    columnsData.value = columns.map(e => {
        return {
            ...e,
            customHeaderCell: customHeaderCell
        }
    })

    return columnsData
}

使用页面代码

<template>
    <a-table :dataSource="dataSource" :columns="columns"/>
</template>
<script setup>
import { ref } from 'vue';
import useDragTable from '@/hook/use-drag-table/index'

const dataSource = ref([
    {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
    },
    {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
    },
])

const columns = useDragTable([
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
])
</script>

useDragTable 返回的是一个响应式的数据 所以改变顺序即可做到table整列替换

后续可通过:active选择器改变拖拽时元素的样式 还可以在 useDragTable 中添加 onDragenter 和 onDragleave 设置放置位置的样式