other / mew-iview

Blame view

local/routers/select.vue 4.16 KB
Edit Raw Normal View History
e355dd49   梁灏   add Select Component 
1
2
3
4
5
6
 
  <template>
      <div>
          <!--<br><br><br><br><br><br><br><br><br><br><br>-->
          {{ city | json }}<br>
          <Button @click="city = 'hangzhou'">切换城市</Button>
          <br>
e4ebd304   梁灏   update Select com... 
7
 
          <i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
e355dd49   梁灏   add Select Component 
8
9
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
39
40
 
              <i-option-group label="热门城市">
                  <i-option value="beijing">北京市</i-option>
                  <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
                  <i-option value="shenzhen">深圳市</i-option>
              </i-option-group>
              <i-option-group label="二线城市">
                  <i-option value="nanjing">南京市</i-option>
                  <i-option value="hangzhou">杭州市</i-option>
              </i-option-group>
              <i-option value="heilongjiang" disabled>黑龙江市</i-option>
              <i-option-group label="热门城市">
                  <i-option value="beijing">北京市</i-option>
                  <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
                  <i-option value="shenzhen">深圳市</i-option>
              </i-option-group>
              <i-option-group label="二线城市">
                  <i-option value="nanjing">南京市</i-option>
                  <i-option value="hangzhou">杭州市</i-option>
              </i-option-group>
              <i-option value="heilongjiang" disabled>黑龙江市</i-option>
              <i-option-group label="热门城市">
                  <i-option value="beijing">北京市</i-option>
                  <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
                  <i-option value="shenzhen">深圳市</i-option>
              </i-option-group>
              <i-option-group label="二线城市">
                  <i-option value="nanjing">南京市</i-option>
                  <i-option value="hangzhou">杭州市</i-option>
              </i-option-group>
              <i-option value="heilongjiang" disabled>黑龙江市</i-option>
          </i-select>
  
          <i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
e4ebd304   梁灏   update Select com... 
41
 
              <i-option value="beijing">北京</i-option>
e355dd49   梁灏   add Select Component 
42
43
44
45
 
              <i-option value="shanghai" label="上海市">上海市</i-option>
              <i-option value="shenzhen" disabled>深圳市</i-option>
              <i-option value="guangzhou" label="广州市">广州市2</i-option>
              <i-option value="shijiazhuang" disabled>石家庄市</i-option>
e4ebd304   梁灏   update Select com... 
46
 
              <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
e355dd49   梁灏   add Select Component 
47
48
49
50
51
52
53
 
              <i-option value="a">a市</i-option>
              <i-option value="b">b市</i-option>
              <i-option value="c">c市</i-option>
              <i-option value="d">d市</i-option>
              <i-option value="e">e市</i-option>
          </i-select>
e4ebd304   梁灏   update Select com... 
54
55
 
          <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
              <i-option value="beijing" label="北京市">北京2</i-option>
e355dd49   梁灏   add Select Component 
56
57
58
59
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
94
95
96
97
98
99
100
 
              <i-option value="shanghai">上海市</i-option>
              <i-option value="shenzhen" disabled>深圳市</i-option>
              <i-option value="guangzhou">广州市</i-option>
              <i-option value="shijiazhuang">石家庄市</i-option>
              <i-option value="a">a市</i-option>
              <i-option value="b">b市</i-option>
              <i-option value="c">c市</i-option>
              <i-option value="d">d市</i-option>
              <i-option value="e">e市</i-option>
          </i-select>
  
          <br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
  </template>
  <script>
      import { iSelect, iOption, iOptionGroup, Button } from 'iview';
  
      export default {
          components: {
              iSelect,
              iOption,
              iOptionGroup,
              Button
          },
          props: {
          
          },
          data () {
              return {
                  city: '',
                  focus: '',
                  focus2: ['beijing', 'guangzhou', 'b']
  //                focus2: []
              }
          },
          computed: {
          
          },
          methods: {
              change (data) {
                  console.log(data)
              }
          }
      }
  </script>