fixed #957
This commit is contained in:
梁灏
parent
03a904529d
commit
219e5c9251
2 changed files with 160 additions and 93 deletions
|
|
@ -1,105 +1,166 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="4">{{model}}</i-col>
|
||||
<i-col span="8">
|
||||
<i-select v-model="model" :label="['L Alabama', 'L Hawaii']" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
|
||||
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<!--<template>-->
|
||||
<!--<Row>-->
|
||||
<!--<i-col span="4">{{model}}</i-col>-->
|
||||
<!--<i-col span="8">-->
|
||||
<!--<i-select v-model="model" :label="['L Alabama', 'L Hawaii']" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>-->
|
||||
<!--<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</i-col>-->
|
||||
<!--</Row>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--// model: 'Alabama',-->
|
||||
<!--model: ['Alabama', 'Hawaii'],-->
|
||||
<!--options: [-->
|
||||
|
||||
<!--],-->
|
||||
<!--list: [],-->
|
||||
<!--loading: false,-->
|
||||
<!--states: ["Al", "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"]-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--mounted () {-->
|
||||
<!--this.options = [-->
|
||||
<!--// {-->
|
||||
<!--// label: '全部',-->
|
||||
<!--// value: 0-->
|
||||
<!--// },{-->
|
||||
<!--// label: '苹果',-->
|
||||
<!--// value: 1-->
|
||||
<!--// },{-->
|
||||
<!--// label: '香蕉',-->
|
||||
<!--// value: 2-->
|
||||
<!--// },{-->
|
||||
<!--// label: '西瓜',-->
|
||||
<!--// value: 3-->
|
||||
<!--// }-->
|
||||
<!--];-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--handleAdd () {-->
|
||||
<!--this.options = [-->
|
||||
<!--{-->
|
||||
<!--label: '全部',-->
|
||||
<!--value: 0-->
|
||||
<!--},{-->
|
||||
<!--label: '苹果',-->
|
||||
<!--value: 1-->
|
||||
<!--},{-->
|
||||
<!--label: '香蕉',-->
|
||||
<!--value: 2-->
|
||||
<!--},{-->
|
||||
<!--label: '西瓜',-->
|
||||
<!--value: 3-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--},-->
|
||||
<!--remoteMethod (query) {-->
|
||||
<!--console.log(13)-->
|
||||
<!--if (query !== '') {-->
|
||||
<!--this.loading = true;-->
|
||||
<!--setTimeout(() => {-->
|
||||
<!--this.loading = false;-->
|
||||
<!--this.options = this.list.filter(item => {-->
|
||||
<!--return item.label.toLowerCase()-->
|
||||
<!--.indexOf(query.toLowerCase()) > -1;-->
|
||||
<!--});-->
|
||||
<!--}, 500);-->
|
||||
<!--} else {-->
|
||||
<!--this.options = [];-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--handleInput () {-->
|
||||
<!--// console.log(1)-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--mounted () {-->
|
||||
<!--this.list = this.states.map(item => {-->
|
||||
<!--return {-->
|
||||
<!--value: item,-->
|
||||
<!--label: 'L ' + item-->
|
||||
<!--};-->
|
||||
<!--});-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row style="width: 400px;">
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<Select v-model="model11" filterable>
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<Select v-model="model12" filterable multiple>
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Button @click="handleSet">set</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// model: 'Alabama',
|
||||
model: ['Alabama', 'Hawaii'],
|
||||
options: [
|
||||
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
loading: false,
|
||||
states: ["Al", "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"]
|
||||
model11: '',
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.options = [
|
||||
// {
|
||||
// label: '全部',
|
||||
// value: 0
|
||||
// },{
|
||||
// label: '苹果',
|
||||
// value: 1
|
||||
// },{
|
||||
// label: '香蕉',
|
||||
// value: 2
|
||||
// },{
|
||||
// label: '西瓜',
|
||||
// value: 3
|
||||
// }
|
||||
];
|
||||
},
|
||||
methods: {
|
||||
handleAdd () {
|
||||
this.options = [
|
||||
{
|
||||
label: '全部',
|
||||
value: 0
|
||||
},{
|
||||
label: '苹果',
|
||||
value: 1
|
||||
},{
|
||||
label: '香蕉',
|
||||
value: 2
|
||||
},{
|
||||
label: '西瓜',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
remoteMethod (query) {
|
||||
console.log(13)
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
},
|
||||
handleInput () {
|
||||
// console.log(1)
|
||||
handleSet () {
|
||||
this.model11 = 'shanghai';
|
||||
// this.model12 = ['beijing'];
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.list = this.states.map(item => {
|
||||
return {
|
||||
value: item,
|
||||
label: 'L ' + item
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -694,6 +694,12 @@
|
|||
} else {
|
||||
this.updateSingleSelected();
|
||||
}
|
||||
// #957
|
||||
if (!this.visible && this.filterable) {
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
}
|
||||
},
|
||||
visible (val) {
|
||||
if (val) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue