Blame view

examples/routers/select.vue 2.58 KB
e355dd49   梁灏   add Select Component
1
  <template>
ecaf8d51   梁灏   Date add transfer...
2
3
4
      <i-select transfer multiple v-model="m1">
          <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
      </i-select>
e355dd49   梁灏   add Select Component
5
  </template>
e355dd49   梁灏   add Select Component
6
  <script>
e355dd49   梁灏   add Select Component
7
      export default {
e355dd49   梁灏   add Select Component
8
9
          data () {
              return {
ecaf8d51   梁灏   Date add transfer...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
                  m1: [],
                  showModal: false,
                  showModal2: false,
                  options: [
                      {
                          value: 'beijing',
                          label: '北京市'
                      },
                      {
                          value: 'shanghai',
                          label: '上海市'
                      },
                      {
                          value: 'shenzhen',
                          label: '深圳市'
                      },
                      {
                          value: 'hangzhou',
                          label: '杭州市'
                      },
                      {
                          value: 'nanjing',
                          label: '南京市'
                      },
                      {
                          value: 'chongqing',
                          label: '重庆市'
                      }
                  ]
01b54e30   梁灏   Select support re...
39
40
              }
          },
01b54e30   梁灏   Select support re...
41
          methods: {
98bf25b3   梁灏   fixed #1286
42
              remoteMethod1 (query) {
e9932043   Aresn   fixed #978
43
                  if (query !== '') {
98bf25b3   梁灏   fixed #1286
44
                      this.loading1 = true;
e9932043   Aresn   fixed #978
45
                      setTimeout(() => {
98bf25b3   梁灏   fixed #1286
46
47
48
49
50
51
                          this.loading1 = false;
                          const list = this.list.map(item => {
                              return {
                                  value: item,
                                  label: item
                              };
e9932043   Aresn   fixed #978
52
                          });
98bf25b3   梁灏   fixed #1286
53
54
                          this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                      }, 200);
e9932043   Aresn   fixed #978
55
                  } else {
98bf25b3   梁灏   fixed #1286
56
                      this.options1 = [];
e9932043   Aresn   fixed #978
57
58
                  }
              },
98bf25b3   梁灏   fixed #1286
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
              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 = [];
                  }
e355dd49   梁灏   add Select Component
75
              }
e355dd49   梁灏   add Select Component
76
77
          }
      }
219e5c92   梁灏   fixed #957
78
  </script>