Commit 38646a11711eebb4837bb8a5b37c585efd020b35
1 parent
867eca35
fixed Form reset using Input or Switch
fixed Form reset using Input or Switch
Showing
2 changed files
with
24 additions
and
23 deletions
Show diff stats
src/components/form/form-item.vue
| ... | ... | @@ -189,7 +189,7 @@ |
| 189 | 189 | if (Array.isArray(value) && value.length > 0) { |
| 190 | 190 | this.validateDisabled = true; |
| 191 | 191 | prop.o[prop.k] = []; |
| 192 | - } else if (value) { | |
| 192 | + } else if (value !== this.initialValue) { | |
| 193 | 193 | this.validateDisabled = true; |
| 194 | 194 | prop.o[prop.k] = this.initialValue; |
| 195 | 195 | } | ... | ... |
test/routers/form.vue
| 1 | 1 | <template> |
| 2 | - <i-form v-ref:form-inline :model="formInline" :rules="ruleInline" inline> | |
| 3 | - <Form-item prop="user"> | |
| 4 | - <i-input type="text" :value.sync="formInline.user" placeholder="Username"> | |
| 5 | - <Icon type="ios-person-outline" slot="prepend"></Icon> | |
| 6 | - </i-input> | |
| 2 | + <i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="100"> | |
| 3 | + <Form-item label="输入框" prop="input"> | |
| 4 | + <i-input :value.sync="formValidate.input" placeholder="请输入"></i-input> | |
| 7 | 5 | </Form-item> |
| 8 | - <Form-item prop="password" :show-message="false"> | |
| 9 | - <i-input type="password" :value.sync="formInline.password" placeholder="Password"> | |
| 10 | - <Icon type="ios-locked-outline" slot="prepend"></Icon> | |
| 11 | - </i-input> | |
| 6 | + <Form-item label="Ajax：" prop="ajax"> | |
| 7 | + <div slot="label"> | |
| 8 | + <span>Ajax</span> | |
| 9 | + <Tooltip content="基于 axios"> | |
| 10 | + <Icon type="ios-help" size="14" color="#3399ff"></Icon> | |
| 11 | + </Tooltip> | |
| 12 | + <span>：</span> | |
| 13 | + </div> | |
| 14 | + <Switch :checked.sync="formValidate.ajax"></Switch> | |
| 12 | 15 | </Form-item> |
| 13 | 16 | <Form-item> |
| 14 | - <i-button type="primary" @click="handleSubmit('formInline')">登录</i-button> | |
| 17 | + <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button> | |
| 18 | + <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button> | |
| 15 | 19 | </Form-item> |
| 16 | 20 | </i-form> |
| 17 | 21 | </template> |
| ... | ... | @@ -19,23 +23,17 @@ |
| 19 | 23 | export default { |
| 20 | 24 | data () { |
| 21 | 25 | return { |
| 22 | - formInline: { | |
| 23 | - user: '', | |
| 24 | - password: '' | |
| 26 | + formValidate: { | |
| 27 | + input: '123', | |
| 28 | + ajax: true | |
| 25 | 29 | }, |
| 26 | - ruleInline: { | |
| 27 | - user: [ | |
| 28 | - { required: true, message: '请填写用户名', trigger: 'change' } | |
| 29 | - ], | |
| 30 | - password: [ | |
| 31 | - { required: true, message: '请填写密码', trigger: 'blur' }, | |
| 32 | - { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'change' } | |
| 33 | - ] | |
| 30 | + ruleValidate: { | |
| 31 | + | |
| 34 | 32 | } |
| 35 | 33 | } |
| 36 | 34 | }, |
| 37 | 35 | methods: { |
| 38 | - handleSubmit(name) { | |
| 36 | + handleSubmit (name) { | |
| 39 | 37 | this.$refs[name].validate((valid) => { |
| 40 | 38 | if (valid) { |
| 41 | 39 | this.$Message.success('提交成功!'); |
| ... | ... | @@ -43,6 +41,9 @@ |
| 43 | 41 | this.$Message.error('表单验证失败!'); |
| 44 | 42 | } |
| 45 | 43 | }) |
| 44 | + }, | |
| 45 | + handleReset (name) { | |
| 46 | + this.$refs[name].resetFields(); | |
| 46 | 47 | } |
| 47 | 48 | } |
| 48 | 49 | } | ... | ... |