2019-11-01 19:01:55 +08:00
|
|
|
# Inline Form
|
|
|
|
```html
|
|
|
|
<n-form
|
|
|
|
inline
|
|
|
|
:label-width="80"
|
2019-11-06 13:48:05 +08:00
|
|
|
:model="formValue"
|
2019-11-01 19:01:55 +08:00
|
|
|
ref="form"
|
|
|
|
>
|
2019-11-02 23:09:36 +08:00
|
|
|
<n-form-item label="Name" path="user.name" required>
|
|
|
|
<n-input v-model="formValue.user.name" placeholder="Input Name" />
|
2019-11-01 19:01:55 +08:00
|
|
|
</n-form-item>
|
2019-11-02 23:09:36 +08:00
|
|
|
<n-form-item label="Age" path="user.age" required>
|
|
|
|
<n-input placeholder="Input Age" v-model="formValue.user.age"/>
|
2019-11-01 19:01:55 +08:00
|
|
|
</n-form-item>
|
2019-11-02 23:09:36 +08:00
|
|
|
<n-form-item label="Phone" path="phone" required>
|
2019-11-01 19:01:55 +08:00
|
|
|
<n-input placeholder="Phone Number" v-model="formValue.phone"/>
|
|
|
|
</n-form-item>
|
|
|
|
<n-form-item v-model="formValue.phone">
|
|
|
|
<n-button @click="handleValidateClick">Validate</n-button>
|
|
|
|
</n-form-item>
|
|
|
|
</n-form>
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
{{ JSON.stringify(formValue, 0, 2) }}
|
|
|
|
</pre>
|
|
|
|
```
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
formValue: {
|
2019-11-02 23:09:36 +08:00
|
|
|
user: {
|
|
|
|
name: '',
|
|
|
|
age: ''
|
|
|
|
},
|
2019-11-01 19:01:55 +08:00
|
|
|
phone: ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleValidateClick (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
this.$refs.form.validate()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|