ant design vue a-table实现拖拽排序

最近在把react项目使用vue3进行重构，vue项目组件库使用ant design vue。

重构的功能包括：

1，M站菜单配置列表的展示

2，菜单列表新增

3，菜单列表的编辑

4，列表的拖拽排序

阅读ant design vue文档看到有table拖拽功能，准备直接使用，此处埋下彩蛋一颗

。

顺利的重构了1,2,3功能之后，照着文档配置好拖拽属性发现不生效

，翻阅源码没有找到对应的配置代码，原来拖拽功能属于付费内容，一年4999，ops~（ps:支持知识付费哈~但是我穷）

那就只能自己手写功能4了

梳理思路如下：

1，鼠标移入table行，修改改行gragable=true，修改鼠标展示样式为move

2，添加dragstart事件，在该事件中记录sourceRecord数据

3，添加dragend事件，在该事件中记录targetRecord数据

4，整体list数据中交换这两条数据，更新list

ant design vue a-table提供了customRow属性

该属性可以对每一行添加对应的样式，事件，为我们的实现思路打开了缺口。

最后代码如下：

至此，拖拽排序table顺利重构完成。