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>
|
<template>
|
||||||
<Row>
|
<Row>
|
||||||
<i-col span="4">{{model}}</i-col>
|
<Col span="12" style="padding-right:10px">
|
||||||
<i-col span="8">
|
<Select
|
||||||
<i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
|
v-model="model13"
|
||||||
<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
|
filterable
|
||||||
</i-select>
|
remote
|
||||||
</i-col>
|
: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>
|
</Row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
// model: 'Alabama',
|
model13: '',
|
||||||
model: ['Alabama', 'Hawaii'],
|
loading1: false,
|
||||||
options: [
|
options1: [],
|
||||||
|
model14: [],
|
||||||
],
|
loading2: false,
|
||||||
list: [],
|
options2: [],
|
||||||
loading: false,
|
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'],
|
||||||
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 () {
|
remoteMethod1 (query) {
|
||||||
this.options = [
|
|
||||||
{
|
|
||||||
label: '全部',
|
|
||||||
value: 0
|
|
||||||
},{
|
|
||||||
label: '苹果',
|
|
||||||
value: 1
|
|
||||||
},{
|
|
||||||
label: '香蕉',
|
|
||||||
value: 2
|
|
||||||
},{
|
|
||||||
label: '西瓜',
|
|
||||||
value: 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
remoteMethod (query) {
|
|
||||||
console.log(13)
|
|
||||||
if (query !== '') {
|
if (query !== '') {
|
||||||
this.loading = true;
|
this.loading1 = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.loading = false;
|
this.loading1 = false;
|
||||||
this.options = this.list.filter(item => {
|
const list = this.list.map(item => {
|
||||||
return item.label.toLowerCase()
|
return {
|
||||||
.indexOf(query.toLowerCase()) > -1;
|
value: item,
|
||||||
|
label: item
|
||||||
|
};
|
||||||
});
|
});
|
||||||
}, 500);
|
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
|
||||||
|
}, 200);
|
||||||
} else {
|
} else {
|
||||||
this.options = [];
|
this.options1 = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleInput () {
|
remoteMethod2 (query) {
|
||||||
// console.log(1)
|
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>
|
</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": {
|
"dependencies": {
|
||||||
"async-validator": "^1.7.1",
|
"async-validator": "^1.7.1",
|
||||||
"core-js": "^2.4.1",
|
"core-js": "^2.4.1",
|
||||||
"deepmerge": "^1.3.1",
|
"deepmerge": "^1.5.0",
|
||||||
"popper.js": "^0.6.4"
|
"popper.js": "^0.6.4"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"vue": "^2.1.10"
|
"vue": "^2.4.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer-loader": "^2.0.0",
|
"autoprefixer-loader": "^2.0.0",
|
||||||
"babel": "^6.23.0",
|
"babel": "^6.23.0",
|
||||||
"babel-core": "^6.23.1",
|
"babel-core": "^6.25.0",
|
||||||
"babel-loader": "^6.2.4",
|
"babel-loader": "^6.4.1",
|
||||||
"babel-plugin-transform-runtime": "^6.12.0",
|
"babel-plugin-transform-runtime": "^6.12.0",
|
||||||
"babel-preset-es2015": "^6.9.0",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-runtime": "^6.11.6",
|
"babel-runtime": "^6.11.6",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"cross-env": "^3.1.4",
|
"cross-env": "^3.2.4",
|
||||||
"css-loader": "^0.23.1",
|
"css-loader": "^0.23.1",
|
||||||
"eslint": "^3.12.2",
|
"eslint": "^3.19.0",
|
||||||
"eslint-plugin-html": "^1.7.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",
|
"file-loader": "^0.8.5",
|
||||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||||
"function-bind": "^1.1.0",
|
"function-bind": "^1.1.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^3.9.1",
|
||||||
"gulp-autoprefixer": "^3.1.1",
|
"gulp-autoprefixer": "^3.1.1",
|
||||||
"gulp-clean-css": "^2.0.13",
|
"gulp-clean-css": "^2.0.13",
|
||||||
"gulp-less": "^3.1.0",
|
"gulp-less": "^3.3.2",
|
||||||
"gulp-rename": "^1.2.2",
|
"gulp-rename": "^1.2.2",
|
||||||
"html-loader": "^0.3.0",
|
"html-loader": "^0.3.0",
|
||||||
"html-webpack-plugin": "^2.28.0",
|
"html-webpack-plugin": "^2.29.0",
|
||||||
"karma": "^1.4.1",
|
"karma": "^1.7.0",
|
||||||
"karma-coverage": "^1.1.1",
|
"karma-coverage": "^1.1.1",
|
||||||
"karma-mocha": "^1.3.0",
|
"karma-mocha": "^1.3.0",
|
||||||
"karma-phantomjs-launcher": "^1.0.2",
|
"karma-phantomjs-launcher": "^1.0.4",
|
||||||
"karma-sinon-chai": "^1.2.4",
|
"karma-sinon-chai": "^1.3.1",
|
||||||
"karma-sourcemap-loader": "^0.3.7",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"karma-spec-reporter": "0.0.26",
|
"karma-spec-reporter": "0.0.26",
|
||||||
"karma-webpack": "^2.0.2",
|
"karma-webpack": "^2.0.4",
|
||||||
"less": "^2.7.1",
|
"less": "^2.7.1",
|
||||||
"less-loader": "^2.2.3",
|
"less-loader": "^2.2.3",
|
||||||
"lolex": "^1.5.2",
|
"lolex": "^1.5.2",
|
||||||
"mocha": "^3.2.0",
|
"mocha": "^3.4.2",
|
||||||
"phantomjs-prebuilt": "^2.1.13",
|
"phantomjs-prebuilt": "^2.1.13",
|
||||||
"sinon": "^1.17.7",
|
"sinon": "^1.17.7",
|
||||||
"sinon-chai": "^2.8.0",
|
"sinon-chai": "^2.11.0",
|
||||||
"style-loader": "^0.13.1",
|
"style-loader": "^0.13.1",
|
||||||
"url-loader": "^0.5.7",
|
"url-loader": "^0.5.9",
|
||||||
"vue": "^2.3.3",
|
"vue": "^2.4.1",
|
||||||
"vue-hot-reload-api": "^1.3.3",
|
"vue-hot-reload-api": "^1.3.3",
|
||||||
"vue-html-loader": "^1.2.3",
|
"vue-html-loader": "^1.2.3",
|
||||||
"vue-loader": "^11.0.0",
|
"vue-loader": "^11.3.4",
|
||||||
"vue-router": "^2.2.1",
|
"vue-router": "^2.7.0",
|
||||||
"vue-style-loader": "^1.0.0",
|
"vue-style-loader": "^1.0.0",
|
||||||
"vue-template-compiler": "^2.3.3",
|
"vue-template-compiler": "^2.4.1",
|
||||||
"webpack": "^2.2.1",
|
"webpack": "^2.7.0",
|
||||||
"webpack-dev-server": "^2.4.1",
|
"webpack-dev-server": "^2.5.1",
|
||||||
"webpack-merge": "^3.0.0"
|
"webpack-merge": "^3.0.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@
|
||||||
type: [String, Number, Array],
|
type: [String, Number, Array],
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
// 使用时，也得设置 value 才行
|
||||||
label: {
|
label: {
|
||||||
type: [String, Number, Array],
|
type: [String, Number, Array],
|
||||||
default: ''
|
default: ''
|
||||||
|
|
@ -586,27 +587,31 @@
|
||||||
} else {
|
} else {
|
||||||
this.broadcast('iOption', 'on-query-change', val);
|
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 () {
|
mounted () {
|
||||||
this.modelToQuery();
|
this.modelToQuery();
|
||||||
// 处理 remote 初始值
|
// 处理 remote 初始值
|
||||||
if (this.remote) {
|
this.updateLabel();
|
||||||
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.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.broadcastQuery('');
|
this.broadcastQuery('');
|
||||||
});
|
});
|
||||||
|
|
@ -685,6 +690,10 @@
|
||||||
this.model = val;
|
this.model = val;
|
||||||
if (val === '') this.query = '';
|
if (val === '') this.query = '';
|
||||||
},
|
},
|
||||||
|
label (val) {
|
||||||
|
this.currentLabel = val;
|
||||||
|
this.updateLabel();
|
||||||
|
},
|
||||||
model () {
|
model () {
|
||||||
this.$emit('input', this.model);
|
this.$emit('input', this.model);
|
||||||
this.modelToQuery();
|
this.modelToQuery();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue