other / mew-iview

Commit 1b639c0a19ddb31c114f2fb3131727d14ac554a7

Authored by Aresn
Committed by GitHub
2 parents ebb39159 59aac107

Merge pull request #3048 from Xotic750/add_select_examples 

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 @1b639c0
1 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 12 <!--</template>-->
13 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 54 <!--</script>-->
55 55  
56 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 63 <!--</template>-->
64 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 85 <!--</script>-->
86 86  
87 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 117 <!--</template>-->
118 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 168 <!--</script>-->
169 169  
170 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 182 <!--</template>-->
183 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 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 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 495 </template>
  496 +
244 497 <script>
245 498 export default {
246   - data () {
  499 + data(){
247 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 567 model13: '',
249 568 loading1: false,
250 569 options1: [],
251 570 model14: [],
252 571 loading2: false,
253 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 628 methods: {
258   - remoteMethod1 (query) {
  629 + remoteMethod1(query){
259 630 if (query !== '') {
260 631 this.loading1 = true;
  632 +
261 633 setTimeout(() => {
262 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 644 } else {
272 645 this.options1 = [];
273 646 }
274 647 },
275   - remoteMethod2 (query) {
  648 + remoteMethod2(query){
276 649 if (query !== '') {
277 650 this.loading2 = true;
  651 +
278 652 setTimeout(() => {
279 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 662 }, 200);
288 663 } else {
289 664 this.options2 = [];
290 665 }
291   - }
292   - }
293   - }
  666 + },
  667 + },
  668 + };
294 669 </script>
295   -
296   -
... ...