This commit is contained in:
mo.duan 2019-10-08 11:46:18 +08:00
parent 3c88bbe182
commit a6068736cb
2 changed files with 53 additions and 80 deletions

View file

@ -1,91 +1,64 @@
<template> <template>
<div style="margin: 100px;"> <div>
<Select v-model="model1" filterable style="width:200px" prefix="ios-albums"> {{formValidate}}
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
</Select> <FormItem label="Hobby" prop="ainterest">
<Select
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px"> multiple
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> :max-tag-count="1"
</Select> v-model="formValidate.ainterest"
>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums"> <Option value="Eat">Eat</Option>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option value="Sleep">Sleep</Option>
</Select> <Option value="Run">Run</Option>
<Option value="Movie">Movie</Option>
<br><br>
<Select v-model="model1" style="width:200px">
<Icon type="ios-alarm" slot="prefix" color="red" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px">
<Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<br><br>
<Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
</FormItem>
<FormItem label="Hobby" prop="binterest">
<CheckboxGroup v-model="formValidate.binterest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
cityList: [ formValidate: {
{ ainterest: [],
value: 'New York', binterest: [],
label: 'New York'
}, },
{ ruleValidate: {
value: 'London', ainterest: [
label: 'London' { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
], ],
model1: '', binterest: [
model10: [] { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
],
}
} }
}, },
methods: { methods: {
more (num) { handleSubmit (name) {
return 'more' + num; this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
} }
} }
} }

View file

@ -710,7 +710,7 @@
if (value === '') this.values = []; if (value === '') this.values = [];
else if (checkValuesNotEqual(value,publicValue,values)) { else if (checkValuesNotEqual(value,publicValue,values)) {
this.$nextTick(() => this.values = getInitialValue().map(getOptionData).filter(Boolean)); this.$nextTick(() => this.values = getInitialValue().map(getOptionData).filter(Boolean));
this.dispatch('FormItem', 'on-form-change', this.publicValue); !(Array.isArray(value)) && this.dispatch('FormItem', 'on-form-change', this.publicValue);
} }
}, },
values(now, before){ values(now, before){