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,7 +189,7 @@ | ||
| 189 | if (Array.isArray(value) && value.length > 0) { | 189 | if (Array.isArray(value) && value.length > 0) { |
| 190 | this.validateDisabled = true; | 190 | this.validateDisabled = true; |
| 191 | prop.o[prop.k] = []; | 191 | prop.o[prop.k] = []; |
| 192 | - } else if (value) { | 192 | + } else if (value !== this.initialValue) { |
| 193 | this.validateDisabled = true; | 193 | this.validateDisabled = true; |
| 194 | prop.o[prop.k] = this.initialValue; | 194 | prop.o[prop.k] = this.initialValue; |
| 195 | } | 195 | } |
test/routers/form.vue
| 1 | <template> | 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 | </Form-item> | 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 | </Form-item> | 15 | </Form-item> |
| 13 | <Form-item> | 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 | </Form-item> | 19 | </Form-item> |
| 16 | </i-form> | 20 | </i-form> |
| 17 | </template> | 21 | </template> |
| @@ -19,23 +23,17 @@ | @@ -19,23 +23,17 @@ | ||
| 19 | export default { | 23 | export default { |
| 20 | data () { | 24 | data () { |
| 21 | return { | 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 | methods: { | 35 | methods: { |
| 38 | - handleSubmit(name) { | 36 | + handleSubmit (name) { |
| 39 | this.$refs[name].validate((valid) => { | 37 | this.$refs[name].validate((valid) => { |
| 40 | if (valid) { | 38 | if (valid) { |
| 41 | this.$Message.success('提交成功!'); | 39 | this.$Message.success('提交成功!'); |
| @@ -43,6 +41,9 @@ | @@ -43,6 +41,9 @@ | ||
| 43 | this.$Message.error('表单验证失败!'); | 41 | this.$Message.error('表单验证失败!'); |
| 44 | } | 42 | } |
| 45 | }) | 43 | }) |
| 44 | + }, | ||
| 45 | + handleReset (name) { | ||
| 46 | + this.$refs[name].resetFields(); | ||
| 46 | } | 47 | } |
| 47 | } | 48 | } |
| 48 | } | 49 | } |