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>
<div style="margin: 100px;">
<Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model10" filterable :max-tag-count="2" 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 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>
</div>
<div>
{{formValidate}}
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Hobby" prop="ainterest">
<Select
multiple
:max-tag-count="1"
v-model="formValidate.ainterest"
>
<Option value="Eat">Eat</Option>
<Option value="Sleep">Sleep</Option>
<Option value="Run">Run</Option>
<Option value="Movie">Movie</Option>
</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>
</template>
<script>
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: '',
model10: []
formValidate: {
ainterest: [],
binterest: [],
},
ruleValidate: {
ainterest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
],
binterest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
],
}
}
},
methods: {
more (num) {
return 'more' + num;
handleSubmit (name) {
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 = [];
else if (checkValuesNotEqual(value,publicValue,values)) {
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){