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>
|
<!--<template>-->
|
||||||
<Row>
|
<!--<Row>-->
|
||||||
<i-col span="4">{{model}}</i-col>
|
<!--<i-col span="4">{{model}}</i-col>-->
|
||||||
<i-col span="8">
|
<!--<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-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-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>-->
|
||||||
</i-select>
|
<!--</i-select>-->
|
||||||
</i-col>
|
<!--</i-col>-->
|
||||||
</Row>
|
<!--</Row>-->
|
||||||
</template>
|
<!--</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>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
// model: 'Alabama',
|
cityList: [
|
||||||
model: ['Alabama', 'Hawaii'],
|
{
|
||||||
options: [
|
value: 'beijing',
|
||||||
|
label: '北京市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'shanghai',
|
||||||
|
label: '上海市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'shenzhen',
|
||||||
|
label: '深圳市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'hangzhou',
|
||||||
|
label: '杭州市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'nanjing',
|
||||||
|
label: '南京市'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'chongqing',
|
||||||
|
label: '重庆市'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
list: [],
|
model11: '',
|
||||||
loading: false,
|
model12: []
|
||||||
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: {
|
methods: {
|
||||||
handleAdd () {
|
handleSet () {
|
||||||
this.options = [
|
this.model11 = 'shanghai';
|
||||||
{
|
// this.model12 = ['beijing'];
|
||||||
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>
|
</script>
|
||||||
|
|
@ -694,6 +694,12 @@
|
||||||
} else {
|
} else {
|
||||||
this.updateSingleSelected();
|
this.updateSingleSelected();
|
||||||
}
|
}
|
||||||
|
// #957
|
||||||
|
if (!this.visible && this.filterable) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.broadcastQuery('');
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
visible (val) {
|
visible (val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue