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

其实很简单的,我们是基于vue版的antd进行二次封装,我们把表格组件联动到表单组件即可,然后预留一些位置让组件灵活的更高。
介绍
注意点:
- antd的表单组件必须是全局组件
- ProTable算是一个半成品(满足基本使用)
- 需要vuedraggable、screenfull依赖
- 把它转成element 组件的话也非常简单
完成度:
- 自动生成查询表单(支持antd全部表单组件)
- 表格头部、头部下边(可做勾选了多少列)、底部、表单查询、自定义表单查询的卡槽都有空余出来
- 表格的列设置、全屏、密度
其实完成的差不多了,满足我们日常开发需求了。
使用
全局组件(main.ts):
import ProTable from './components/ProTable/IndexView.vue'
app.component('ProTable',
本文介绍如何使用Vue3和Ant Design Vue,结合TypeScript封装一个高仿的ProTable组件。通过二次封装表格和表单组件,实现了查询表单自动生成、全屏、密度设置等功能,满足日常开发需求。同时,文章提供了组件的使用方法,有助于提升对Antd组件库的理解和组件封装能力。
订阅专栏 解锁全文
1126

被折叠的 条评论
为什么被折叠?



