如何设置表单默认值？

通过 value 字段直接设置默认值

这种方法最为简单直接，只需要在表单规则中为 value 字段赋值即可。

<template>
   <form-create :rule="formRule" />
</template>
<script setup>
import { ref } from 'vue';
const formRule = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名',
    value: '默认用户名' // 设置默认值
  },
  {
    type: 'input',
    field: 'email',
    title: '邮箱',
    value: 'example@example.com' // 设置默认值
  }
]);
</script>

通过 v-model 绑定表单数据对象

使用 v-model 绑定一个数据对象，并在对象中设置默认值。这样不仅可以设置初始值，还可以随时更新表单数据。

<template>
   <form-create :rule="formRule" v-model="formData" />
</template>
<script setup>
import { ref } from 'vue';
const formData = ref({
  username: '默认用户名',
  email: 'example@example.com'
});
const formRule = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名',
  },
  {
    type: 'input',
    field: 'email',
    title: '邮箱',
  }
]);
</script>

在表单加载后动态设置默认值

有时需要在表单加载后根据某些逻辑动态设置默认值，这时可以使用 formApi.setValue 方法。

<template>
   <form-create :rule="formRule" v-model:api="formApi" />
</template>
<script setup>
import { ref, onMounted } from 'vue';


const formApi = ref(null);


const formRule = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名'
  },
  {
    type: 'input',
    field: 'email',
    title: '邮箱'
  }
]);


onMounted(() => {
  // 动态设置默认值
  formApi.value.setValue('username', '动态默认用户名');
  formApi.value.setValue('email', 'dynamic@example.com');
});
</script>