fixed #978
This commit is contained in:
Aresn
parent
d6070b2357
commit
e993204310
2 changed files with 159 additions and 158 deletions
|
|
@ -1,166 +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>-->
|
|
||||||
|
|
||||||
<!--<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>
|
<template>
|
||||||
<div>
|
<Row>
|
||||||
<Row style="width: 400px;">
|
<i-col span="4">{{model}}</i-col>
|
||||||
<i-col span="12" style="padding-right:10px">
|
<i-col span="8">
|
||||||
<Select v-model="model11" filterable>
|
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
|
||||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
|
||||||
</Select>
|
</i-select>
|
||||||
</i-col>
|
</i-col>
|
||||||
<i-col span="12">
|
</Row>
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
cityList: [
|
// model: 'Alabama',
|
||||||
{
|
model: ['Alabama', 'Hawaii'],
|
||||||
value: 'beijing',
|
options: [
|
||||||
label: '北京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shanghai',
|
|
||||||
label: '上海市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'shenzhen',
|
|
||||||
label: '深圳市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'hangzhou',
|
|
||||||
label: '杭州市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'nanjing',
|
|
||||||
label: '南京市'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'chongqing',
|
|
||||||
label: '重庆市'
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
model11: '',
|
list: [],
|
||||||
model12: []
|
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: {
|
methods: {
|
||||||
handleSet () {
|
handleAdd () {
|
||||||
this.model11 = 'shanghai';
|
this.options = [
|
||||||
// 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>
|
||||||
|
|
||||||
|
|
||||||
|
<!--<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 {-->
|
||||||
|
<!--cityList: [-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'beijing',-->
|
||||||
|
<!--label: '北京市'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'shanghai',-->
|
||||||
|
<!--label: '上海市'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'shenzhen',-->
|
||||||
|
<!--label: '深圳市'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'hangzhou',-->
|
||||||
|
<!--label: '杭州市'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'nanjing',-->
|
||||||
|
<!--label: '南京市'-->
|
||||||
|
<!--},-->
|
||||||
|
<!--{-->
|
||||||
|
<!--value: 'chongqing',-->
|
||||||
|
<!--label: '重庆市'-->
|
||||||
|
<!--}-->
|
||||||
|
<!--],-->
|
||||||
|
<!--model11: '',-->
|
||||||
|
<!--model12: []-->
|
||||||
|
<!--}-->
|
||||||
|
<!--},-->
|
||||||
|
<!--methods: {-->
|
||||||
|
<!--handleSet () {-->
|
||||||
|
<!--this.model11 = 'shanghai';-->
|
||||||
|
<!--// this.model12 = ['beijing'];-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}-->
|
||||||
|
<!--}-->
|
||||||
|
<!--</script>-->
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,8 @@
|
||||||
inputLength: 20,
|
inputLength: 20,
|
||||||
notFound: false,
|
notFound: false,
|
||||||
slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set false
|
slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set false
|
||||||
model: this.value
|
model: this.value,
|
||||||
|
currentLabel: this.label
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -593,15 +594,15 @@
|
||||||
if (this.remote) {
|
if (this.remote) {
|
||||||
if (!this.multiple && this.model !== '') {
|
if (!this.multiple && this.model !== '') {
|
||||||
this.selectToChangeQuery = true;
|
this.selectToChangeQuery = true;
|
||||||
if (this.label === '') this.label = this.model;
|
if (this.currentLabel === '') this.currentLabel = this.model;
|
||||||
this.lastQuery = this.label;
|
this.lastQuery = this.currentLabel;
|
||||||
this.query = this.label;
|
this.query = this.currentLabel;
|
||||||
} else if (this.multiple && this.model.length) {
|
} else if (this.multiple && this.model.length) {
|
||||||
if (this.label.length !== this.model.length) this.label = this.model;
|
if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
|
||||||
this.selectedMultiple = this.model.map((item, index) => {
|
this.selectedMultiple = this.model.map((item, index) => {
|
||||||
return {
|
return {
|
||||||
value: item,
|
value: item,
|
||||||
label: this.label[index]
|
label: this.currentLabel[index]
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue