vue3 + antd + typeScript 封装一个高仿的ProTable

前言

阿里的antd组件说实话真的非常完善了，可是vue版的寥寥无几，vue3的更少了，今天有空就封装一个高仿的ProTable

开始

其实很简单的，我们是基于vue版的antd进行二次封装，我们把表格组件联动到表单组件即可，然后预留一些位置让组件灵活的更高。

介绍

注意点：

1. antd的表单组件必须是全局组件
2. ProTable算是一个半成品(满足基本使用)
3. 需要vuedraggable、screenfull依赖
4. 把它转成element 组件的话也非常简单

完成度：

1. 自动生成查询表单（支持antd全部表单组件）
2. 表格头部、头部下边(可做勾选了多少列)、底部、表单查询、自定义表单查询的卡槽都有空余出来
3. 表格的列设置、全屏、密度

其实完成的差不多了，满足我们日常开发需求了。

使用

全局组件（main.ts）：

import ProTable from './components/ProTable/IndexView.vue'
app.component('ProTable', ProTable);

ProTable组件代码：

<t