el-form-item prop 配列
时间: 2023-12-14 14:02:58 浏览: 80
vue实现表单数据验证的实例代码
`prop` 是 `el-form-item` 组件中的一个属性,用于指定与表单数据绑定的表单项的属性名。它是一个字符串或字符串数组,用于指定要绑定的表单项的属性路径。当 `prop` 是字符串时,它表示单个表单项的属性名。当 `prop` 是字符串数组时,它表示多个表单项的属性路径。
例如,如果有一个名为 `user` 的表单对象,其中包含 `name` 和 `age` 两个属性,可以将 `prop` 设置为 `user.name` 和 `user.age` 来与对应的表单项进行数据绑定。
以下是使用 `prop` 的示例:
```html
<template>
<el-form :model="user" label-width="80px">
<el-form-item label="Name" prop="user.name">
<el-input v-model="user.name"></el-input>
</el-form-item>
<el-form-item label="Age" prop="user.age">
<el-input v-model="user.age"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
age: ''
}
};
}
};
</script>
```
在上面的示例中,`user.name` 和 `user.age` 分别与两个表单项进行了绑定,并且通过 `prop` 属性指定了绑定的属性路径。这样,在提交表单时,会验证和收集这两个表单项的数据。
阅读全文