前言

阿里的antd組件說實話真的非常完善了，可是vue版的寥寥無幾，vue3的更少了，今天有空就封裝一個高仿的ProTable

開始

其實很簡單的，我們是基于vue版的antd進行二次封裝，我們把表格組件聯動到表單組件即可，然后預留一些位置讓組件靈活的更高。

介紹

注意點：

antd的表單組件必須是全局組件

ProTable算是一個半成品(滿足基本使用)

需要vuedraggable、screenfull依賴

把它轉成element 組件的話也非常簡單

完成度：

自動生成查詢表單（支持antd全部表單組件）

表格頭部、頭部下邊(可做勾選了多少列)、底部、表單查詢、自定義表單查詢的卡槽都有空余出來

表格的列設置、全屏、密度

其實完成的差不多了，滿足我們日常開發需求了。

使用

全局組件（main.ts）：

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

ProTable組件代碼：

<template>

總結

以上是生活随笔為你收集整理的vue3 + antd + typeScript 封装一个高仿的ProTable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。