drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix #4938

Browse source
This commit is contained in:
梁灏 2018-12-24 15:12:28 +08:00
parent c736b0f1e0
commit 2dc6888278
2 changed files with 56 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
examples/routers/select.vue
View file

@ -1,75 +1,47 @@
<template>
<Row>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
<div style="margin: 200px;">
<Select size="small" v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model14"
multiple
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
<Select v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
</Row>
<Select size="large" v-model="model10" multiple style="width:260px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
model13: '',
loading1: false,
options1: [],
model14: [],
loading2: false,
options2: [],
list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
}
cityList: [
{
value: 'New York',
label: 'New York'
},
methods: {
remoteMethod1 (query) {
if (query !== '') {
this.loading1 = true;
setTimeout(() => {
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options1 = [];
}
{
value: 'London',
label: 'LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon'
},
remoteMethod2 (query) {
if (query !== '') {
this.loading2 = true;
setTimeout(() => {
this.loading2 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options2 = [];
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model10: ['New York', 'London']
}
}
}

24
src/styles/components/select.less
View file

@ -205,9 +205,21 @@
height: 24px;
line-height: 22px;
margin: 3px 4px 3px 0;
//i{
// top: 2px;
//}
max-width: 99%;
position: relative;
span{
display: block;
margin-right: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i{
display: block;
position: absolute;
right: 4px;
top: 4px;
}
}
&-large&-multiple .@{css-prefix}tag{
@ -215,7 +227,7 @@
line-height: 26px;
font-size: @font-size-base;
i{
top: 1px;
top: 6px;
}
}
@ -225,8 +237,12 @@
font-size: @font-size-small;
padding: 0 6px;
margin: 3px 4px 2px 0;
span{
margin-right: 14px;
}
i{
top: 1px;
right: 2px;
}
}