Vue实现表格拖拽排序(基于vuedraggable)

近日有表格拖拽排序的需求，公司项目基于Vue2和Ant Design实现，看了Ant Design官网，发现表格拖拽排序功能属于收费版，并且基于Vue3实现的。泪目，只能自己封装一个简单版拖拽排序表格。

下载依赖

安装vuedraggable 为拖拽功能提供支持

npm i -S vuedraggable  

实现原则

使用方式与Ant Design表格保持一致，包括属性名、样式、插槽使用等。

实现思路

布局：基于flex的flex-grow结合传入的columns参数实现动态列宽。列高由表格内容自动撑开。首列自动添加序号。

数据：遍历取出【行数据】，再遍历【表头】将行数据布局。

插槽：每个表格项与Ant Design一样可用插槽方式自定义，会向父组件暴露【行数据】。

效果图