other / mew-iview

Browse Code »

Commit 59aac107d0858a09eca4b5f281a822a9d8c04227

Authored by Graham Fairweather 2018-02-26 08:35:42 +0100

1 parent 899ad697

Add select examples from the docs for rework of the select component

Showing 1 changed file with 618 additions and 245 deletions Show diff stats

Inline Side-by-side

examples/routers/select.vue

Show/Hide comments View file @59aac10

1	<!--<template>-->	1	<!--<template>-->
2	- <!--<div>-->
3	- <!--{{ model10 }} - -->
4	- <!--{{ model11 }}-->
5	- <!--<Select v-model="model10" style="width:260px">-->
6	- <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
7	- <!--</Select>-->
8	- <!--<Select v-model="model11" style="width:260px">-->
9	- <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
10	- <!--</Select>-->
11	- <!--</div>-->	2	+<!--<div>-->
		3	+<!--{{ model10 }} - -->
		4	+<!--{{ model11 }}-->
		5	+<!--<Select v-model="model10" style="width:260px">-->
		6	+<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
		7	+<!--</Select>-->
		8	+<!--<Select v-model="model11" style="width:260px">-->
		9	+<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
		10	+<!--</Select>-->
		11	+<!--</div>-->
12	<!--</template>-->	12	<!--</template>-->
13	<!--<script>-->	13	<!--<script>-->
14	- <!--export default {-->
15	- <!--data () {-->
16	- <!--return {-->
17	- <!--cityList: [],-->
18	- <!--model10: '',-->
19	- <!--model11: '',-->
20	- <!--model12: ''-->
21	- <!--}-->
22	- <!--},-->
23	- <!--mounted () {-->
24	- <!--setTimeout(() => {-->
25	- <!--this.cityList = [-->
26	- <!--{-->
27	- <!--value: 'beijing',-->
28	- <!--label: '北京市'-->
29	- <!--},-->
30	- <!--{-->
31	- <!--value: 'shanghai',-->
32	- <!--label: '上海市'-->
33	- <!--},-->
34	- <!--{-->
35	- <!--value: 'shenzhen',-->
36	- <!--label: '深圳市'-->
37	- <!--},-->
38	- <!--{-->
39	- <!--value: 'hangzhou',-->
40	- <!--label: '杭州市'-->
41	- <!--},-->
42	- <!--{-->
43	- <!--value: 'nanjing',-->
44	- <!--label: '南京市'-->
45	- <!--},-->
46	- <!--{-->
47	- <!--value: 'chongqing',-->
48	- <!--label: '重庆市'-->
49	- <!--}-->
50	- <!--];-->
51	- <!--}, 1000);-->
52	- <!--}-->
53	- <!--}-->	14	+<!--export default {-->
		15	+<!--data () {-->
		16	+<!--return {-->
		17	+<!--cityList: [],-->
		18	+<!--model10: '',-->
		19	+<!--model11: '',-->
		20	+<!--model12: ''-->
		21	+<!--}-->
		22	+<!--},-->
		23	+<!--mounted () {-->
		24	+<!--setTimeout(() => {-->
		25	+<!--this.cityList = [-->
		26	+<!--{-->
		27	+<!--value: 'beijing',-->
		28	+<!--label: '北京市'-->
		29	+<!--},-->
		30	+<!--{-->
		31	+<!--value: 'shanghai',-->
		32	+<!--label: '上海市'-->
		33	+<!--},-->
		34	+<!--{-->
		35	+<!--value: 'shenzhen',-->
		36	+<!--label: '深圳市'-->
		37	+<!--},-->
		38	+<!--{-->
		39	+<!--value: 'hangzhou',-->
		40	+<!--label: '杭州市'-->
		41	+<!--},-->
		42	+<!--{-->
		43	+<!--value: 'nanjing',-->
		44	+<!--label: '南京市'-->
		45	+<!--},-->
		46	+<!--{-->
		47	+<!--value: 'chongqing',-->
		48	+<!--label: '重庆市'-->
		49	+<!--}-->
		50	+<!--];-->
		51	+<!--}, 1000);-->
		52	+<!--}-->
		53	+<!--}-->
54	<!--</script>-->	54	<!--</script>-->
55		55
56	<!--<template>-->	56	<!--<template>-->
57	- <!--<div>-->
58	- <!--<Select v-model="value">-->
59	- <!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
60	- <!--</Select>-->
61	- <!--<Button @click="setList">set list</Button>-->
62	- <!--</div>-->	57	+<!--<div>-->
		58	+<!--<Select v-model="value">-->
		59	+<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
		60	+<!--</Select>-->
		61	+<!--<Button @click="setList">set list</Button>-->
		62	+<!--</div>-->
63	<!--</template>-->	63	<!--</template>-->
64	<!--<script>-->	64	<!--<script>-->
65	- <!--export default {-->
66	- <!--data () {-->
67	- <!--return {-->
68	- <!--value: '',-->
69	- <!--list: []-->
70	- <!--}-->
71	- <!--},-->
72	- <!--methods: {-->
73	- <!--setList () {-->
74	- <!--let list = [];-->
75	- <!--for (let i = 0; i < 400; i++) {-->
76	- <!--list.push({-->
77	- <!--value: 'value' + i,-->
78	- <!--label: 'label' + i-->
79	- <!--});-->
80	- <!--}-->
81	- <!--this.list = list;-->
82	- <!--}-->
83	- <!--}-->
84	- <!--}-->	65	+<!--export default {-->
		66	+<!--data () {-->
		67	+<!--return {-->
		68	+<!--value: '',-->
		69	+<!--list: []-->
		70	+<!--}-->
		71	+<!--},-->
		72	+<!--methods: {-->
		73	+<!--setList () {-->
		74	+<!--let list = [];-->
		75	+<!--for (let i = 0; i < 400; i++) {-->
		76	+<!--list.push({-->
		77	+<!--value: 'value' + i,-->
		78	+<!--label: 'label' + i-->
		79	+<!--});-->
		80	+<!--}-->
		81	+<!--this.list = list;-->
		82	+<!--}-->
		83	+<!--}-->
		84	+<!--}-->
85	<!--</script>-->	85	<!--</script>-->
86		86
87	<!--<template>-->	87	<!--<template>-->
88	- <!--<div style="width: 400px;margin: 50px;">-->
89	- <!--<div>data: {{ model13 }}</div>-->
90	- <!--<Row>-->
91	- <!--<Col span="12" style="padding-right:10px">-->
92	- <!--<Select-->
93	- <!--size="small"-->
94	- <!--placeholder="提示提示"-->
95	- <!--v-model="model13"-->
96	- <!--filterable-->
97	- <!--remote-->
98	- <!--transfer-->
99	- <!--:remote-method="remoteMethod1"-->
100	- <!--:loading="loading1">-->
101	- <!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
102	- <!--</Select>-->
103	- <!--</Col>-->
104	- <!--<Col span="12">-->
105	- <!--<Select-->
106	- <!--v-model="model14"-->
107	- <!--multiple-->
108	- <!--filterable-->
109	- <!--remote-->
110	- <!--:remote-method="remoteMethod2"-->
111	- <!--:loading="loading2">-->
112	- <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
113	- <!--</Select>-->
114	- <!--</Col>-->
115	- <!--</Row>-->
116	- <!--</div>-->	88	+<!--<div style="width: 400px;margin: 50px;">-->
		89	+<!--<div>data: {{ model13 }}</div>-->
		90	+<!--<Row>-->
		91	+<!--<Col span="12" style="padding-right:10px">-->
		92	+<!--<Select-->
		93	+<!--size="small"-->
		94	+<!--placeholder="提示提示"-->
		95	+<!--v-model="model13"-->
		96	+<!--filterable-->
		97	+<!--remote-->
		98	+<!--transfer-->
		99	+<!--:remote-method="remoteMethod1"-->
		100	+<!--:loading="loading1">-->
		101	+<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
		102	+<!--</Select>-->
		103	+<!--</Col>-->
		104	+<!--<Col span="12">-->
		105	+<!--<Select-->
		106	+<!--v-model="model14"-->
		107	+<!--multiple-->
		108	+<!--filterable-->
		109	+<!--remote-->
		110	+<!--:remote-method="remoteMethod2"-->
		111	+<!--:loading="loading2">-->
		112	+<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
		113	+<!--</Select>-->
		114	+<!--</Col>-->
		115	+<!--</Row>-->
		116	+<!--</div>-->
117	<!--</template>-->	117	<!--</template>-->
118	<!--<script>-->	118	<!--<script>-->
119	- <!--export default {-->
120	- <!--data () {-->
121	- <!--return {-->
122	- <!--model13: '',-->
123	- <!--loading1: false,-->
124	- <!--options1: [],-->
125	- <!--model14: [],-->
126	- <!--loading2: false,-->
127	- <!--options2: [],-->
128	- <!--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']-->
129	- <!--}-->
130	- <!--},-->
131	- <!--methods: {-->
132	- <!--remoteMethod1 (query) {-->
133	- <!--if (query !== '') {-->
134	- <!--this.loading1 = true;-->
135	- <!--setTimeout(() => {-->
136	- <!--this.loading1 = false;-->
137	- <!--const list = this.list.map(item => {-->
138	- <!--return {-->
139	- <!--value: item,-->
140	- <!--label: item-->
141	- <!--};-->
142	- <!--});-->
143	- <!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
144	- <!--}, 200);-->
145	- <!--} else {-->
146	- <!--this.options1 = [];-->
147	- <!--}-->
148	- <!--},-->
149	- <!--remoteMethod2 (query) {-->
150	- <!--if (query !== '') {-->
151	- <!--this.loading2 = true;-->
152	- <!--setTimeout(() => {-->
153	- <!--this.loading2 = false;-->
154	- <!--const list = this.list.map(item => {-->
155	- <!--return {-->
156	- <!--value: item,-->
157	- <!--label: item-->
158	- <!--};-->
159	- <!--});-->
160	- <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
161	- <!--}, 200);-->
162	- <!--} else {-->
163	- <!--this.options2 = [];-->
164	- <!--}-->
165	- <!--}-->
166	- <!--}-->
167	- <!--}-->	119	+<!--export default {-->
		120	+<!--data () {-->
		121	+<!--return {-->
		122	+<!--model13: '',-->
		123	+<!--loading1: false,-->
		124	+<!--options1: [],-->
		125	+<!--model14: [],-->
		126	+<!--loading2: false,-->
		127	+<!--options2: [],-->
		128	+<!--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']-->
		129	+<!--}-->
		130	+<!--},-->
		131	+<!--methods: {-->
		132	+<!--remoteMethod1 (query) {-->
		133	+<!--if (query !== '') {-->
		134	+<!--this.loading1 = true;-->
		135	+<!--setTimeout(() => {-->
		136	+<!--this.loading1 = false;-->
		137	+<!--const list = this.list.map(item => {-->
		138	+<!--return {-->
		139	+<!--value: item,-->
		140	+<!--label: item-->
		141	+<!--};-->
		142	+<!--});-->
		143	+<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
		144	+<!--}, 200);-->
		145	+<!--} else {-->
		146	+<!--this.options1 = [];-->
		147	+<!--}-->
		148	+<!--},-->
		149	+<!--remoteMethod2 (query) {-->
		150	+<!--if (query !== '') {-->
		151	+<!--this.loading2 = true;-->
		152	+<!--setTimeout(() => {-->
		153	+<!--this.loading2 = false;-->
		154	+<!--const list = this.list.map(item => {-->
		155	+<!--return {-->
		156	+<!--value: item,-->
		157	+<!--label: item-->
		158	+<!--};-->
		159	+<!--});-->
		160	+<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
		161	+<!--}, 200);-->
		162	+<!--} else {-->
		163	+<!--this.options2 = [];-->
		164	+<!--}-->
		165	+<!--}-->
		166	+<!--}-->
		167	+<!--}-->
168	<!--</script>-->	168	<!--</script>-->
169		169
170	<!--<template>-->	170	<!--<template>-->
171	- <!--<div style="width: 300px">-->
172	- <!--<Select-->
173	- <!--v-model="model14"-->
174	- <!--multiple-->
175	- <!--filterable-->
176	- <!--remote-->
177	- <!--:remote-method="remoteMethod2"-->
178	- <!--:loading="loading2">-->
179	- <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
180	- <!--</Select>-->
181	- <!--</div>-->	171	+<!--<div style="width: 300px">-->
		172	+<!--<Select-->
		173	+<!--v-model="model14"-->
		174	+<!--multiple-->
		175	+<!--filterable-->
		176	+<!--remote-->
		177	+<!--:remote-method="remoteMethod2"-->
		178	+<!--:loading="loading2">-->
		179	+<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
		180	+<!--</Select>-->
		181	+<!--</div>-->
182	<!--</template>-->	182	<!--</template>-->
183	<!--<script>-->	183	<!--<script>-->
184	- <!--export default {-->
185	- <!--data () {-->
186	- <!--return {-->
187	- <!--model13: '',-->
188	- <!--loading1: false,-->
189	- <!--options1: [],-->
190	- <!--model14: [],-->
191	- <!--loading2: false,-->
192	- <!--options2: [],-->
193	- <!--list: ['a', 'b', 'c']-->
194	- <!--}-->
195	- <!--},-->
196	- <!--methods: {-->
197	- <!--remoteMethod2 (query) {-->
198	- <!--if (query !== '') {-->
199	- <!--this.loading2 = true;-->
200	- <!--setTimeout(() => {-->
201	- <!--this.loading2 = false;-->
202	- <!--const list = this.list.map(item => {-->
203	- <!--return {-->
204	- <!--value: item,-->
205	- <!--label: item-->
206	- <!--};-->
207	- <!--});-->
208	- <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
209	- <!--}, 200);-->
210	- <!--} else {-->
211	- <!--this.options2 = [];-->
212	- <!--}-->
213	- <!--}-->
214	- <!--}-->
215	- <!--}-->	184	+<!--export default {-->
		185	+<!--data () {-->
		186	+<!--return {-->
		187	+<!--model13: '',-->
		188	+<!--loading1: false,-->
		189	+<!--options1: [],-->
		190	+<!--model14: [],-->
		191	+<!--loading2: false,-->
		192	+<!--options2: [],-->
		193	+<!--list: ['a', 'b', 'c']-->
		194	+<!--}-->
		195	+<!--},-->
		196	+<!--methods: {-->
		197	+<!--remoteMethod2 (query) {-->
		198	+<!--if (query !== '') {-->
		199	+<!--this.loading2 = true;-->
		200	+<!--setTimeout(() => {-->
		201	+<!--this.loading2 = false;-->
		202	+<!--const list = this.list.map(item => {-->
		203	+<!--return {-->
		204	+<!--value: item,-->
		205	+<!--label: item-->
		206	+<!--};-->
		207	+<!--});-->
		208	+<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
		209	+<!--}, 200);-->
		210	+<!--} else {-->
		211	+<!--this.options2 = [];-->
		212	+<!--}-->
		213	+<!--}-->
		214	+<!--}-->
		215	+<!--}-->
216	<!--</script>-->	216	<!--</script>-->
217		217
218		218
		219	+<!--<template>-->
		220	+<!--<Row>-->
		221	+<!--<Col span="12" style="padding-right:10px">-->
		222	+<!--<Select-->
		223	+<!--v-model="model13"-->
		224	+<!--filterable-->
		225	+<!--remote-->
		226	+<!--:remote-method="remoteMethod1"-->
		227	+<!--:loading="loading1">-->
		228	+<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
		229	+<!--</Select>-->
		230	+<!--</Col>-->
		231	+<!--<Col span="12">-->
		232	+<!--<Select-->
		233	+<!--v-model="model14"-->
		234	+<!--multiple-->
		235	+<!--filterable-->
		236	+<!--remote-->
		237	+<!--:remote-method="remoteMethod2"-->
		238	+<!--:loading="loading2">-->
		239	+<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
		240	+<!--</Select>-->
		241	+<!--</Col>-->
		242	+<!--</Row>-->
		243	+<!--</template>-->
		244	+<!--<script>-->
		245	+<!--export default {-->
		246	+<!--data () {-->
		247	+<!--return {-->
		248	+<!--model13: '',-->
		249	+<!--loading1: false,-->
		250	+<!--options1: [],-->
		251	+<!--model14: [],-->
		252	+<!--loading2: false,-->
		253	+<!--options2: [],-->
		254	+<!--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']-->
		255	+<!--}-->
		256	+<!--},-->
		257	+<!--methods: {-->
		258	+<!--remoteMethod1 (query) {-->
		259	+<!--if (query !== '') {-->
		260	+<!--this.loading1 = true;-->
		261	+<!--setTimeout(() => {-->
		262	+<!--this.loading1 = false;-->
		263	+<!--const list = this.list.map(item => {-->
		264	+<!--return {-->
		265	+<!--value: item,-->
		266	+<!--label: item-->
		267	+<!--};-->
		268	+<!--});-->
		269	+<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
		270	+<!--}, 200);-->
		271	+<!--} else {-->
		272	+<!--this.options1 = [];-->
		273	+<!--}-->
		274	+<!--},-->
		275	+<!--remoteMethod2 (query) {-->
		276	+<!--if (query !== '') {-->
		277	+<!--this.loading2 = true;-->
		278	+<!--setTimeout(() => {-->
		279	+<!--this.loading2 = false;-->
		280	+<!--const list = this.list.map(item => {-->
		281	+<!--return {-->
		282	+<!--value: item,-->
		283	+<!--label: item-->
		284	+<!--};-->
		285	+<!--});-->
		286	+<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
		287	+<!--}, 200);-->
		288	+<!--} else {-->
		289	+<!--this.options2 = [];-->
		290	+<!--}-->
		291	+<!--}-->
		292	+<!--}-->
		293	+<!--}-->
		294	+<!--</script>-->
		295	+
219	<template>	296	<template>
220	- <Row>
221	- <Col span="12" style="padding-right:10px">
222	- <Select
223	- v-model="model13"
224	- filterable
225	- remote
226	- :remote-method="remoteMethod1"
227	- :loading="loading1">
228	- <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
229	- </Select>
230	- </Col>
231	- <Col span="12">
232	- <Select
233	- v-model="model14"
234	- multiple
235	- filterable
236	- remote
237	- :remote-method="remoteMethod2"
238	- :loading="loading2">
239	- <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
240	- </Select>
241	- </Col>
242	- </Row>	297	+ <div id="app">
		298	+ <input><br>
		299	+ <i-select
		300	+ v-model="model1"
		301	+ style="width:200px"
		302	+ >
		303	+ <i-option
		304	+ v-for="item in cityList"
		305	+ :value="item.value"
		306	+ :key="item.value"
		307	+ >{{item.label}}</i-option>
		308	+ </i-select>
		309	+ <br>
		310	+ <i-select
		311	+ v-model="model2"
		312	+ size="small"
		313	+ style="width:100px"
		314	+ >
		315	+ <i-option
		316	+ v-for="item in cityList"
		317	+ :value="item.value"
		318	+ :key="item.value"
		319	+ >{{item.label}}</i-option>
		320	+ </i-select>
		321	+ <i-select
		322	+ v-model="model3"
		323	+ style="width:100px"
		324	+ >
		325	+ <i-option
		326	+ v-for="item in cityList"
		327	+ :value="item.value"
		328	+ :key="item.value"
		329	+ >{{item.label}}</i-option>
		330	+ </i-select>
		331	+ <i-select
		332	+ v-model="model4"
		333	+ size="large"
		334	+ style="width:100px"
		335	+ >
		336	+ <i-option
		337	+ v-for="item in cityList"
		338	+ :value="item.value"
		339	+ :key="item.value"
		340	+ >{{item.label}}</i-option>
		341	+ </i-select>
		342	+ <br>
		343	+ <i-select
		344	+ v-model="model5"
		345	+ disabled
		346	+ style="width:200px"
		347	+ >
		348	+ <i-option
		349	+ v-for="item in cityList"
		350	+ :value="item.value"
		351	+ :key="item.value"
		352	+ >{{item.label}}</i-option>
		353	+ </i-select>
		354	+ <i-select
		355	+ v-model="model6"
		356	+ style="width:200px"
		357	+ >
		358	+ <i-option value="beijing">New York</i-option>
		359	+ <i-option value="shanghai" disabled>London</i-option>
		360	+ <i-option value="shenzhen">Sydney</i-option>
		361	+ </i-select>
		362	+ <br>
		363	+ <i-select
		364	+ v-model="model8"
		365	+ clearable
		366	+ style="width:200px"
		367	+ >
		368	+ <i-option
		369	+ v-for="item in cityList"
		370	+ :value="item.value"
		371	+ :key="item.value"
		372	+ >{{item.label}}</i-option>
		373	+ </i-select>
		374	+ <br>
		375	+ <i-select
		376	+ v-model="model7"
		377	+ style="width:200px"
		378	+ >
		379	+ <option-group label="Hot Cities">
		380	+ <i-option
		381	+ v-for="item in cityList1"
		382	+ :value="item.value"
		383	+ :key="item.value"
		384	+ >{{item.label}}</i-option>
		385	+ </option-group>
		386	+ <option-group label="Other Cities">
		387	+ <i-option
		388	+ v-for="item in cityList2"
		389	+ :value="item.value"
		390	+ :key="item.value"
		391	+ >{{item.label}}</i-option>
		392	+ </option-group>
		393	+ </i-select>
		394	+ <br>
		395	+ <i-select
		396	+ v-model="model9"
		397	+ style="width:200px"
		398	+ >
		399	+ <i-option value="New York" label="New York">
		400	+ <span>New York</span>
		401	+ <span style="float:right;color:#ccc">America</span>
		402	+ </i-option>
		403	+ <i-option value="London" label="London">
		404	+ <span>London</span>
		405	+ <span style="float:right;color:#ccc">U.K.</span>
		406	+ </i-option>
		407	+ <i-option value="Sydney" label="Sydney">
		408	+ <span>Sydney</span>
		409	+ <span style="float:right;color:#ccc">Australian</span>
		410	+ </i-option>
		411	+ </i-select>
		412	+ <br>
		413	+ <div>here</div>
		414	+ <i-select
		415	+ v-model="model10"
		416	+ multiple
		417	+ style="width:260px"
		418	+ >
		419	+ <i-option
		420	+ v-for="item in cityList"
		421	+ :value="item.value"
		422	+ :key="item.value"
		423	+ >{{item.label}}</i-option>
		424	+ </i-select>
		425	+ <br>
		426	+ <row>
		427	+ <i-col
		428	+ span="12"
		429	+ style="padding-right:10px"
		430	+ >
		431	+ <i-select
		432	+ v-model="model11"
		433	+ filterable
		434	+ >
		435	+ <i-option
		436	+ v-for="item in cityList"
		437	+ :value="item.value"
		438	+ :key="item.value"
		439	+ >{{item.label}}</i-option>
		440	+ </i-select>
		441	+ </i-col>
		442	+ <i-col span="12">
		443	+ <i-select
		444	+ v-model="model12"
		445	+ filterable
		446	+ multiple
		447	+ >
		448	+ <i-option
		449	+ v-for="item in cityList"
		450	+ :value="item.value"
		451	+ :key="item.value"
		452	+ >{{item.label}}</i-option>
		453	+ </i-select>
		454	+ </i-col>
		455	+ </row>
		456	+ <br>
		457	+ <row>
		458	+ <i-col
		459	+ span="12"
		460	+ style="padding-right:10px"
		461	+ >
		462	+ <i-select
		463	+ v-model="model13"
		464	+ filterable
		465	+ remote
		466	+ clearable
		467	+ :remote-method="remoteMethod1"
		468	+ :loading="loading1"
		469	+ >
		470	+ <i-option
		471	+ v-for="(option, index) in options1"
		472	+ :value="option.value"
		473	+ :key="index"
		474	+ >{{option.label}}</i-option>
		475	+ </i-select>
		476	+ </i-col>
		477	+ <i-col span="12">
		478	+ <i-select
		479	+ v-model="model14"
		480	+ multiple
		481	+ filterable
		482	+ remote
		483	+ clearable
		484	+ :remote-method="remoteMethod2"
		485	+ :loading="loading2">
		486	+ <i-option
		487	+ v-for="(option, index) in options2"
		488	+ :value="option.value"
		489	+ :key="index"
		490	+ >{{option.label}}</i-option>
		491	+ </i-select>
		492	+ </i-col>
		493	+ </row>
		494	+ </div>
243	</template>	495	</template>
		496	+
244	<script>	497	<script>
245	export default {	498	export default {
246	- data () {	499	+ data(){
247	return {	500	return {
		501	+ cityList: [
		502	+ {
		503	+ value: 'New York',
		504	+ label: 'New York',
		505	+ },
		506	+ {
		507	+ value: 'London',
		508	+ label: 'London',
		509	+ },
		510	+ {
		511	+ value: 'Sydney',
		512	+ label: 'Sydney',
		513	+ },
		514	+ {
		515	+ value: 'Ottawa',
		516	+ label: 'Ottawa',
		517	+ },
		518	+ {
		519	+ value: 'Paris',
		520	+ label: 'Paris',
		521	+ },
		522	+ {
		523	+ value: 'Canberra',
		524	+ label: 'Canberra',
		525	+ },
		526	+ ],
		527	+ cityList1: [
		528	+ {
		529	+ value: 'New York',
		530	+ label: 'New York',
		531	+ },
		532	+ {
		533	+ value: 'London',
		534	+ label: 'London',
		535	+ },
		536	+ {
		537	+ value: 'Sydney',
		538	+ label: 'Sydney',
		539	+ },
		540	+ ],
		541	+ cityList2: [
		542	+ {
		543	+ value: 'Ottawa',
		544	+ label: 'Ottawa',
		545	+ },
		546	+ {
		547	+ value: 'Paris',
		548	+ label: 'Paris',
		549	+ },
		550	+ {
		551	+ value: 'Canberra',
		552	+ label: 'Canberra',
		553	+ },
		554	+ ],
		555	+ model1: '',
		556	+ model2: '',
		557	+ model3: '',
		558	+ model4: '',
		559	+ model5: '',
		560	+ model6: '',
		561	+ model7: '',
		562	+ model8: '',
		563	+ model9: '',
		564	+ model10: [],
		565	+ model11: '',
		566	+ model12: [],
248	model13: '',	567	model13: '',
249	loading1: false,	568	loading1: false,
250	options1: [],	569	options1: [],
251	model14: [],	570	model14: [],
252	loading2: false,	571	loading2: false,
253	options2: [],	572	options2: [],
254	- 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']
255	- }	573	+ list: [
		574	+ 'Alabama',
		575	+ 'Alaska',
		576	+ 'Arizona',
		577	+ 'Arkansas',
		578	+ 'California',
		579	+ 'Colorado',
		580	+ 'Connecticut',
		581	+ 'Delaware',
		582	+ 'Florida',
		583	+ 'Georgia',
		584	+ 'Hawaii',
		585	+ 'Idaho',
		586	+ 'Illinois',
		587	+ 'Indiana',
		588	+ 'Iowa',
		589	+ 'Kansas',
		590	+ 'Kentucky',
		591	+ 'Louisiana',
		592	+ 'Maine',
		593	+ 'Maryland',
		594	+ 'Massachusetts',
		595	+ 'Michigan',
		596	+ 'Minnesota',
		597	+ 'Mississippi',
		598	+ 'Missouri',
		599	+ 'Montana',
		600	+ 'Nebraska',
		601	+ 'Nevada',
		602	+ 'New hampshire',
		603	+ 'New jersey',
		604	+ 'New mexico',
		605	+ 'New york',
		606	+ 'North carolina',
		607	+ 'North dakota',
		608	+ 'Ohio',
		609	+ 'Oklahoma',
		610	+ 'Oregon',
		611	+ 'Pennsylvania',
		612	+ 'Rhode island',
		613	+ 'South carolina',
		614	+ 'South dakota',
		615	+ 'Tennessee',
		616	+ 'Texas',
		617	+ 'Utah',
		618	+ 'Vermont',
		619	+ 'Virginia',
		620	+ 'Washington',
		621	+ 'West virginia',
		622	+ 'Wisconsin',
		623	+ 'Wyoming',
		624	+ ],
		625	+ };
256	},	626	},
		627	+
257	methods: {	628	methods: {
258	- remoteMethod1 (query) {	629	+ remoteMethod1(query){
259	if (query !== '') {	630	if (query !== '') {
260	this.loading1 = true;	631	this.loading1 = true;
		632	+
261	setTimeout(() => {	633	setTimeout(() => {
262	this.loading1 = false;	634	this.loading1 = false;
263	- const list = this.list.map(item => {
264	- return {
265	- value: item,
266	- label: item
267	- };
268	- });
269	- this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
270	- }, 200);	635	+
		636	+ const list = this.list.map(item => ({
		637	+ value: item,
		638	+ label: item,
		639	+ }));
		640	+
		641	+ this.options1 = list
		642	+ .filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
		643	+ }, 1500);
271	} else {	644	} else {
272	this.options1 = [];	645	this.options1 = [];
273	}	646	}
274	},	647	},
275	- remoteMethod2 (query) {	648	+ remoteMethod2(query){
276	if (query !== '') {	649	if (query !== '') {
277	this.loading2 = true;	650	this.loading2 = true;
		651	+
278	setTimeout(() => {	652	setTimeout(() => {
279	this.loading2 = false;	653	this.loading2 = false;
280	- const list = this.list.map(item => {
281	- return {
282	- value: item,
283	- label: item
284	- };
285	- });
286	- this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);	654	+
		655	+ const list = this.list.map(item => ({
		656	+ value: item,
		657	+ label: item,
		658	+ }));
		659	+
		660	+ this.options2 = list
		661	+ .filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
287	}, 200);	662	}, 200);
288	} else {	663	} else {
289	this.options2 = [];	664	this.options2 = [];
290	}	665	}
291	- }
292	- }
293	- }	666	+ },
		667	+ },
		668	+ };
294	</script>	669	</script>
295	-
296	-