本方法主要基于 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 设置放置位置的样式