Vue3-Antdv-Admin 中表单 defaultValue 与 autoSize 的深度解析

在基于 Vue3 和 Ant Design Vue 的后台管理系统开发中，表单组件的 defaultValue 设置和 autoSize 自动高度调整是两个常见但容易出问题的功能点。本文将通过实际案例，深入分析这两个功能在 Vue3-Antdv-Admin 项目中的正确使用方式。

defaultValue 的设置方式对比

在表单 schema 定义中，defaultValue 有两种设置方式：

1. 直接设置在 schema 对象上
   这是推荐且稳定的方式，表单提交时能正确获取到默认值。

{
  field: 'status',
  label: '状态',
  component: 'RadioGroup',
  defaultValue: 1,  // 推荐方式
  componentProps: {
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 },
    ],
  },
}

2. 设置在 componentProps 中
   这种方式虽然能在界面上显示默认值，但在表单提交时可能会被识别为空值。

{
  field: 'name',
  component: 'Input',
  label: '字典名称',
  componentProps: {
    defaultValue: '默认值测试',  // 不推荐方式
  },
}

TextArea 的 autoSize 问题

对于文本域(TextArea)组件，当需要自动调整高度(autoSize)时，defaultValue 的设置时机尤为关键：

{
  field: 'remark',
  component: 'InputTextArea',
  label: '备注',
  defaultValue: '多行文本内容',  // 必须在此设置
  componentProps: {
    autoSize: true,
  },
}

问题现象：如果在 mounted 生命周期后才设置 defaultValue，autoSize 将无法正确计算文本域的高度。

根本原因：这与 Ant Design Vue 内部的值变化监听机制有关。autoSize 的高度计算依赖于初始值的渲染，如果在组件挂载后才设置值，高度计算会失效。

最佳实践建议

1. 统一使用 schema 层级的 defaultValue
   避免使用 componentProps 中的 defaultValue，以确保表单提交时能正确获取默认值。

2. 对于 autoSize 的 TextArea
   必须提前在 schema 层级设置 defaultValue，不能在组件挂载后异步设置。

3. 生命周期注意事项
   表单默认值的初始化应在组件创建阶段完成，而不是在 mounted 钩子中。

技术原理延伸

这种设计差异源于 Vue3 和 Ant Design Vue 的工作机制：

• schema 层级的 defaultValue 会被直接注入到表单模型中
• componentProps 中的 defaultValue 仅作为组件渲染的初始值
• autoSize 的高度计算依赖于初始渲染时的内容测量

理解这些底层原理，可以帮助开发者更好地处理类似的功能需求，避免踩坑。

通过遵循这些实践建议，开发者可以在 Vue3-Antdv-Admin 项目中更稳定地实现表单默认值和自适应高度的功能需求。