fixed #1286
This commit is contained in:
梁灏
parent
da17044c8d
commit
98bf25b3ce
4 changed files with 9555 additions and 13399 deletions
|
|
@ -1,166 +1,76 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="4">{{model}}</i-col>
|
||||
<i-col span="8">
|
||||
<i-select v-model="model" 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>
|
||||
<Col span="12" style="padding-right:10px">
|
||||
<Select
|
||||
v-model="model13"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteMethod1"
|
||||
:loading="loading1">
|
||||
<Option v-for="option in options1" :value="option.value" :key="new Date()">{{option.label}}</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Select
|
||||
v-model="model14"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteMethod2"
|
||||
:loading="loading2">
|
||||
<Option v-for="option in options2" :value="option.value" :key="new Date()">{{option.label}}</Option>
|
||||
</Select>
|
||||
</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"]
|
||||
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'],
|
||||
}
|
||||
},
|
||||
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)
|
||||
remoteMethod1 (query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
this.loading1 = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
this.loading1 = false;
|
||||
const list = this.list.map(item => {
|
||||
return {
|
||||
value: item,
|
||||
label: item
|
||||
};
|
||||
});
|
||||
}, 500);
|
||||
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
|
||||
}, 200);
|
||||
} else {
|
||||
this.options = [];
|
||||
this.options1 = [];
|
||||
}
|
||||
},
|
||||
handleInput () {
|
||||
// console.log(1)
|
||||
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 = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
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 {-->
|
||||
<!--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>-->
|
||||
|
|
|
|||
22667
package-lock.json
generated
22667
package-lock.json
generated
File diff suppressed because it is too large
Load diff
46
package.json
46
package.json
|
|
@ -41,62 +41,62 @@
|
|||
"dependencies": {
|
||||
"async-validator": "^1.7.1",
|
||||
"core-js": "^2.4.1",
|
||||
"deepmerge": "^1.3.1",
|
||||
"deepmerge": "^1.5.0",
|
||||
"popper.js": "^0.6.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.1.10"
|
||||
"vue": "^2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer-loader": "^2.0.0",
|
||||
"babel": "^6.23.0",
|
||||
"babel-core": "^6.23.1",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
"babel-plugin-transform-runtime": "^6.12.0",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-runtime": "^6.11.6",
|
||||
"chai": "^3.5.0",
|
||||
"cross-env": "^3.1.4",
|
||||
"cross-env": "^3.2.4",
|
||||
"css-loader": "^0.23.1",
|
||||
"eslint": "^3.12.2",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-plugin-html": "^1.7.0",
|
||||
"extract-text-webpack-plugin": "^2.0.0",
|
||||
"extract-text-webpack-plugin": "^2.1.2",
|
||||
"file-loader": "^0.8.5",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"function-bind": "^1.1.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-clean-css": "^2.0.13",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-less": "^3.3.2",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"html-loader": "^0.3.0",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"karma": "^1.4.1",
|
||||
"html-webpack-plugin": "^2.29.0",
|
||||
"karma": "^1.7.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.2",
|
||||
"karma-sinon-chai": "^1.2.4",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-sinon-chai": "^1.3.1",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"karma-webpack": "^2.0.4",
|
||||
"less": "^2.7.1",
|
||||
"less-loader": "^2.2.3",
|
||||
"lolex": "^1.5.2",
|
||||
"mocha": "^3.2.0",
|
||||
"mocha": "^3.4.2",
|
||||
"phantomjs-prebuilt": "^2.1.13",
|
||||
"sinon": "^1.17.7",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"sinon-chai": "^2.11.0",
|
||||
"style-loader": "^0.13.1",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^2.3.3",
|
||||
"url-loader": "^0.5.9",
|
||||
"vue": "^2.4.1",
|
||||
"vue-hot-reload-api": "^1.3.3",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^11.0.0",
|
||||
"vue-router": "^2.2.1",
|
||||
"vue-loader": "^11.3.4",
|
||||
"vue-router": "^2.7.0",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vue-template-compiler": "^2.3.3",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^2.4.1",
|
||||
"vue-template-compiler": "^2.4.1",
|
||||
"webpack": "^2.7.0",
|
||||
"webpack-dev-server": "^2.5.1",
|
||||
"webpack-merge": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
// 使用时，也得设置 value 才行
|
||||
label: {
|
||||
type: [String, Number, Array],
|
||||
default: ''
|
||||
|
|
@ -586,27 +587,31 @@
|
|||
} else {
|
||||
this.broadcast('iOption', 'on-query-change', val);
|
||||
}
|
||||
},
|
||||
// 处理 remote 初始值
|
||||
updateLabel () {
|
||||
if (this.remote) {
|
||||
if (!this.multiple && this.model !== '') {
|
||||
this.selectToChangeQuery = true;
|
||||
if (this.currentLabel === '') this.currentLabel = this.model;
|
||||
this.lastQuery = this.currentLabel;
|
||||
this.query = this.currentLabel;
|
||||
} else if (this.multiple && this.model.length) {
|
||||
if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
|
||||
this.selectedMultiple = this.model.map((item, index) => {
|
||||
return {
|
||||
value: item,
|
||||
label: this.currentLabel[index]
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.modelToQuery();
|
||||
// 处理 remote 初始值
|
||||
if (this.remote) {
|
||||
if (!this.multiple && this.model !== '') {
|
||||
this.selectToChangeQuery = true;
|
||||
if (this.currentLabel === '') this.currentLabel = this.model;
|
||||
this.lastQuery = this.currentLabel;
|
||||
this.query = this.currentLabel;
|
||||
} else if (this.multiple && this.model.length) {
|
||||
if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
|
||||
this.selectedMultiple = this.model.map((item, index) => {
|
||||
return {
|
||||
value: item,
|
||||
label: this.currentLabel[index]
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
this.updateLabel();
|
||||
this.$nextTick(() => {
|
||||
this.broadcastQuery('');
|
||||
});
|
||||
|
|
@ -685,6 +690,10 @@
|
|||
this.model = val;
|
||||
if (val === '') this.query = '';
|
||||
},
|
||||
label (val) {
|
||||
this.currentLabel = val;
|
||||
this.updateLabel();
|
||||
},
|
||||
model () {
|
||||
this.$emit('input', this.model);
|
||||
this.modelToQuery();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue