基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table

二次封装的Form跟搜索Table

为啥想二次封装组件

作为一名刚入职新公司的前端开发者，我开局就面临 "双重挑战"：一方面，公司此前所有子系统基于 Vue2 开发，而团队希望我用 Vue3 搭建新业务模块，但给到的只有一个 "裸奔" 的种子工程 ------ 没有任何封装好的通用组件，所有功能都得从零手撸；另一方面，我此前都是 React 技术栈，面试也是面的React的，说来也是干React，结果一拉gitlab仓库干的是vue的活，哈哈，对 Vue 生态只能算 "入门级玩家"，不是太深入的了解跟使用。

不过，受原公司主管理念的影响，原来一直吃的都是细糠，现在轮到自己起灶了，做好不好吃那也得吃。我还是决定先从高频场景入手：封装基于 ant-design-vue 的 JsonForm（JSON 配置化表单）和可搜索 Table。这么做有三个核心原因：

提效减重复：分页、表单校验、状态收集这些逻辑，不用每次开发都写一遍，后续维护也不用逐个模块改；
练手 Vue3：借封装过程熟悉 Vue3 的响应式、组合式 API、组件通信等核心能力，快速补齐技术短板；
公司水太深，适合摸鱼！？

JsonForm

网上其实有很多 JSON 配置化表单的二次封装方案，核心思路都大同小异 ------通过 "组件类型枚举匹配" 实现动态渲染。我这套方案也基于这个思路，但针对 Vue3 特性和实际业务场景做了适配优化。

核心实现：组件映射与增强（componentsMap）

JsonForm 的核心是 componentsMap 对象：它定义了 "配置类型" 与 "ant-design-vue 组件" 的映射关系，同时对部分组件做了默认属性注入和功能增强（比如支持异步加载选项、适配 Vue3 v-model 绑定）。

部分 componentsMap 代码

js 复制代码

export const componentsMap = {
  Text,
  Time,
  Textarea,
  InputNumber,
  DatePicker,
  Input,
  RangePicker,
  // 扩展options可以支持异步获取，返回一个promise进行处理options数据结构
  Cascader: extendComponentsOptions(Cascader, {
    allowClear: true,
    showSearch: true,
    getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode,
  }),
  // 扩展options可以支持异步获取，返回一个promise进行处理options数据结构
  TreeSelect: extendComponentsOptions(TreeSelect, {
    allowClear: true,
    showSearch: true,
    getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode,
    filterTreeNode: (inputValue: string, { label }: any) =>
      label.indexOf(inputValue) !== -1,
  }),
  // 扩展options可以支持异步获取，返回一个promise进行处理options数据结构
  Select: extendComponentsOptions(Select, {
    allowClear: true,
    showSearch: true,
    getPopupContainer: (triggerNode: HTMLElement) => triggerNode.parentNode,
  }),
  CheckboxGroup: extendComponentsOptions(CheckboxGroup),
  RadioGroup: extendComponentsOptions(RadioGroup),
  Checkbox: transformBinding(Checkbox), // 处理 v-model:checked 绑定
  Switch: transformBinding(Switch), // 处理 v-model:checked 绑定
  Radio: transformBinding(Radio), // 处理 v-model:checked 绑定
}

关键设计亮点

默认属性注入：比如所有选择类组件（Select/TreeSelect/Cascader）默认开启 showSearch（搜索）和 allowClear（清空），不用每次配置都写这两个属性；

异步选项支持：getOptions: () => Promise（如从接口拉取部门列表），组件内部自动处理加载状态；

依赖项显隐：isShow可以支持自定义场景下显示隐藏，也可以支持高级配置根据表单项内依赖值进行显示隐藏

配套资源：在线文档与示例

为了方便团队使用，用vitepress框架搭建了配套的在线文档，包含所有配置项说明、组件用法示例和常见问题解答：

在线文档地址：wangxuelina.github.io/general_ant...

四、后续规划

新增组件：支持在表单上传按钮组件、富文本编辑器等
上线npm包进行引用