Form表单组件封装和使用(Vue3)

3,684 阅读1分钟

表单Form是中后台频繁使用的组件,以下是一个基于arco design vue组件库封装的表单组件。

这个表单组件特点:

  1. 所有配置都是直接继承组件库组件的props,无需其他文档
  2. 可配置展开折叠
  3. 支持响应式布局
  4. 表单项支持动态隐藏
  5. 插槽支持,自定义扩展
  6. 组件库的良好支持,封装代码简洁优雅
  7. placeholder无需手写,输入框允许清除默认true
  8. 自带hooks省时省力
  9. TS代码提示支持

数据类型结构如下

form-ts.png

组件代码

form.png

组件自带hooks

form-hooks.png

示例1 折叠查询表单

form-demo1.png

演示效果

20231029182548_rec_.gif

示例2 动态隐藏表单项

form-demo2.png

演示效果

20231029183213_rec_.gif

示例3 自带hooks的使用

form-demo3.png

演示效果

20231029183711_rec_.gif

升级版 2024-09-20更新

gi-form.png

使用

gi-form-demo.png

示例图

image.png

源码:前往码云搜索 gi-demo