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

fixed #2893

Browse source
This commit is contained in:
梁灏 2018-01-23 16:30:34 +08:00
parent 037de0520c
commit feb21a0a16
2 changed files with 96 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
examples/routers/select.vue
View file

@ -167,50 +167,105 @@
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>-->
<!--<div style="width: 300px">-->
<!--<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>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['a', 'b', 'c']-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--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 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div style="width: 300px"> <Row>
<Select <Col span="12" style="padding-right:10px">
v-model="model14" <Select v-model="model11" disabled filterable>
multiple <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
filterable
remote
:remote-method="remoteMethod2"
:loading="loading2">
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select> </Select>
</div> </Col>
<Col span="12">
<!--<Select v-model="model12" filterable multiple>-->
<!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--</Select>-->
<Input v-model="model13" disabled="" />
</Col>
</Row>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
model13: '', cityList: [
loading1: false, {
options1: [], value: 'New York',
model14: [], label: 'New York'
loading2: false,
options2: [],
list: ['a', 'b', 'c']
}
}, },
methods: { {
remoteMethod2 (query) { value: 'London',
if (query !== '') { label: 'London'
this.loading2 = true; },
setTimeout(() => { {
this.loading2 = false; value: 'Sydney',
const list = this.list.map(item => { label: 'Sydney'
return { },
value: item, {
label: item value: 'Ottawa',
}; label: 'Ottawa'
}); },
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); {
}, 200); value: 'Paris',
} else { label: 'Paris'
this.options2 = []; },
{
value: 'Canberra',
label: 'Canberra'
} }
],
model11: 'New York',
model12: [],
model13: 'New York'
} }
} }
} }
</script> </script>

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

@ -149,6 +149,11 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
.placeholder(); .placeholder();
&[disabled]{
cursor: @cursor-disabled;
color: #ccc;
}
} }
&-single &-input{ &-single &-input{