82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<cn>
|
|
#### ่กจๅๅธๅฑ
|
|
่กจๅๆไธ็งๅธๅฑใ
|
|
</cn>
|
|
|
|
<us>
|
|
#### Form Layout
|
|
There are three layout for form: `horizontal`, `vertical`, `inline`.
|
|
</us>
|
|
|
|
|
|
<template>
|
|
<div>
|
|
<a-form :layout="formLayout">
|
|
<a-form-item
|
|
label='Form Layout'
|
|
:labelCol="formItemLayout.labelCol"
|
|
:wrapperCol="formItemLayout.wrapperCol"
|
|
>
|
|
<a-radio-group defaultValue='horizontal' @change="handleFormLayoutChange">
|
|
<a-radio-button value='horizontal'>Horizontal</a-radio-button>
|
|
<a-radio-button value='vertical'>Vertical</a-radio-button>
|
|
<a-radio-button value='inline'>Inline</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label='Field A'
|
|
:labelCol="formItemLayout.labelCol"
|
|
:wrapperCol="formItemLayout.wrapperCol"
|
|
>
|
|
<a-input placeholder='input placeholder' />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label='Field B'
|
|
:labelCol="formItemLayout.labelCol"
|
|
:wrapperCol="formItemLayout.wrapperCol"
|
|
>
|
|
<a-input placeholder='input placeholder' />
|
|
</a-form-item>
|
|
<a-form-item
|
|
:wrapperCol="buttonItemLayout.wrapperCol"
|
|
>
|
|
<a-button type='primary'>Submit</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
formLayout: 'horizontal',
|
|
}
|
|
},
|
|
methods: {
|
|
handleFormLayoutChange (e) {
|
|
this.formLayout = e.target.value
|
|
},
|
|
},
|
|
computed: {
|
|
formItemLayout () {
|
|
const { formLayout } = this
|
|
return formLayout === 'horizontal' ? {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 14 },
|
|
} : {}
|
|
},
|
|
buttonItemLayout () {
|
|
const { formLayout } = this
|
|
return formLayout === 'horizontal' ? {
|
|
wrapperCol: { span: 14, offset: 4 },
|
|
} : {}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|