jeecgboot vue3 里面的ts文件FormSchema[] 下面的每一项怎么获取到表单值
时间: 2023-11-22 11:54:38 浏览: 193
jeecgboot-vue3 v3.4.3 资源
如果你想要获取表单值,你可以使用 `ref` 获取到表单的实例,并且使用该实例的 `model` 属性获取到表单的数据模型。在 JeecgBoot Vue3 中,表单的数据模型是一个对象,每个属性对应一个表单项的值。
例如,如果你有一个表单项的 `name` 属性为 `username`,那么你可以通过以下方式获取到其对应的值:
```typescript
import { ref } from 'vue'
import { FormSchema } from '@/components/jeecg/JFormDesign/types/form.type'
export default {
setup() {
const formRef = ref<any>(null)
const formSchema: FormSchema[] = [
{
field: 'username',
label: '用户名',
component: 'Input'
}
]
const submitForm = () => {
const formData = formRef.value.model // 获取表单数据模型
const username = formData.username // 获取用户名的值
console.log(username)
}
return {
formRef,
formSchema,
submitForm
}
}
}
```
在上述代码中,我们通过 `formRef` 获取到了表单的实例,并且在 `submitForm` 方法中获取到了表单的数据模型。由于表单的数据模型是一个对象,我们可以通过属性名来获取每个表单项的值。在这个例子中,我们获取了 `username` 表单项的值并打印到控制台中。
阅读全文