chenhaodong / mew-iview

Blame view

test/routers/select.vue 3.98 KB
Edit Raw Normal View History
e355dd49   梁灏   add Select Component 
1
2
 
  <template>
      <div>
6932b4d7   梁灏   update Page compo... 
3
 
          <br><br><br><br><br><br><br><br><br><br><br>
e355dd49   梁灏   add Select Component 
4
5
6
 
          {{ city | json }}<br>
          <Button @click="city = 'hangzhou'">切换城市</Button>
          <br>
e4ce9917   梁灏   update Select com... 
7
 
          <i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
e355dd49   梁灏   add Select Component 
8
9
10
11
12
13
14
15
 
              <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>
e4ce9917   梁灏   update Select com... 
16
 
                  <i-option value="heilongjiang" disabled>黑龙江市</i-option>
e355dd49   梁灏   add Select Component 
17
 
              </i-option-group>
e4ce9917   梁灏   update Select com... 
18
19
20
21
 
              <i-option-group label="其它城市">
                  <i-option value="jyg">嘉峪关市</i-option>
                  <i-option value="lanzhou">兰州市</i-option>
                  <i-option value="beijingxi">北京西</i-option>
e355dd49   梁灏   add Select Component 
22
 
              </i-option-group>
e355dd49   梁灏   add Select Component 
23
24
 
          </i-select>
e4ce9917   梁灏   update Select com... 
25
 
          <i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
e4ebd304   梁灏   update Select com... 
26
 
              <i-option value="beijing">北京</i-option>
e355dd49   梁灏   add Select Component 
27
28
29
30
 
              <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... 
31
 
              <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
e355dd49   梁灏   add Select Component 
32
33
34
35
36
37
38
 
              <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>
e4ce9917   梁灏   update Select com... 
39
40
41
42
43
44
45
46
47
48
49
50
51
 
          <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
              <i-option value="beijing" label="北京市">北京2</i-option>
              <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">a1市</i-option>
              <i-option value="b">b2市</i-option>
              <i-option value="c">c1市</i-option>
              <i-option value="d">d2市</i-option>
              <i-option value="e">e1市</i-option>
          </i-select>
e4ebd304   梁灏   update Select com... 
52
53
 
          <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 
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
              <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: {
c67c7095   梁灏   add some component 
79
e355dd49   梁灏   add Select Component 
80
81
82
83
84
 
          },
          data () {
              return {
                  city: '',
                  focus: '',
e4ce9917   梁灏   update Select com... 
85
 
                  focus2: ['beijing']
e355dd49   梁灏   add Select Component 
86
87
88
89
 
  //                focus2: []
              }
          },
          computed: {
c67c7095   梁灏   add some component 
90
e355dd49   梁灏   add Select Component 
91
92
93
94
95
96
97
98
 
          },
          methods: {
              change (data) {
                  console.log(data)
              }
          }
      }
  </script>