other / mew-iview

Blame view

examples/routers/select.vue 5.66 KB
Edit Raw Normal View History
e355dd49   梁灏   add Select Component 
1
 
  <template>
e9932043   Aresn   fixed #978 
2
3
4
5
6
7
8
9
 
      <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>
      </Row>
e355dd49   梁灏   add Select Component 
10
 
  </template>
e9932043   Aresn   fixed #978 
11
e355dd49   梁灏   add Select Component 
12
 
  <script>
e355dd49   梁灏   add Select Component 
13
 
      export default {
e355dd49   梁灏   add Select Component 
14
15
 
          data () {
              return {
e9932043   Aresn   fixed #978 
16
17
18
19
 
  //                model: 'Alabama',
                  model: ['Alabama', 'Hawaii'],
                  options: [
01b54e30   梁灏   Select support re... 
20
 
                  ],
e9932043   Aresn   fixed #978 
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
                  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"]
01b54e30   梁灏   Select support re... 
40
41
 
              }
          },
e9932043   Aresn   fixed #978 
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
          mounted () {
              this.options = [
  //                {
  //                    label: '全部',
  //                    value: 0
  //                },{
  //                    label: '苹果',
  //                    value: 1
  //                },{
  //                    label: '香蕉',
  //                    value: 2
  //                },{
  //                    label: '西瓜',
  //                    value: 3
  //                }
              ];
          },
01b54e30   梁灏   Select support re... 
59
 
          methods: {
e9932043   Aresn   fixed #978 
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
              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)
e355dd49   梁灏   add Select Component 
94
 
              }
e9932043   Aresn   fixed #978 
95
96
97
98
99
100
101
102
 
          },
          mounted () {
              this.list = this.states.map(item => {
                  return {
                      value: item,
                      label: 'L ' + item
                  };
              });
e355dd49   梁灏   add Select Component 
103
104
 
          }
      }
219e5c92   梁灏   fixed #957 
105
 
  </script>
e9932043   Aresn   fixed #978 
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
  
  
  <!--<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>-->