Blame view

examples/routers/transfer.vue 5.04 KB
5b19b5f5   梁灏   support Transfer
1
2
3
4
5
6
7
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
41
42
43
44
45
46
47
48
49
50
  <!--<template>-->
      <!--<div>-->
          <!--<Transfer-->
              <!--:data="data1"-->
              <!--filterable-->
              <!--:target-keys="targetKeys1"-->
              <!--:render-format="render1"-->
              <!--@on-change="handleChange1"></Transfer>-->
      <!--</div>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--data1: this.getMockData(),-->
                  <!--targetKeys1: this.getTargetKeys()-->
              <!--}-->
          <!--},-->
          <!--methods: {-->
              <!--getMockData () {-->
                  <!--let mockData = [];-->
                  <!--for (let i = 1; i <= 20; i++) {-->
                      <!--mockData.push({-->
                          <!--key: i.toString(),-->
                          <!--label: '内容' + i,-->
                          <!--description: '内容' + i + '的描述信息',-->
                          <!--disabled: Math.random() * 3 < 1-->
                      <!--});-->
                  <!--}-->
                  <!--return mockData;-->
              <!--},-->
              <!--getTargetKeys () {-->
                  <!--return this.getMockData()-->
                      <!--.filter(() => Math.random() * 2 > 1)-->
                      <!--.map(item => item.key);-->
              <!--},-->
              <!--render1 (item) {-->
                  <!--return item.label;-->
              <!--},-->
              <!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
                  <!--console.log(newTargetKeys);-->
                  <!--console.log(direction);-->
                  <!--console.log(moveKeys);-->
                  <!--this.targetKeys1 = newTargetKeys;-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->
  
  
77f7bb95   梁灏   add Transfer comp...
51
  <template>
9084eb18   梁灏   fixed #92
52
      <Transfer
16a87cde   jingsam   fix transfer
53
54
55
56
57
58
59
          :data="data3"
          :target-keys="targetKeys3"
          :list-style="listStyle"
          :render-format="render3"
          :operations="['向左移动','向右移动']"
          filterable
          @on-change="handleChange3">
5b19b5f5   梁灏   support Transfer
60
61
62
63
          <div :style="{float: 'right', margin: '5px'}">
              <Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
          </div>
      </Transfer>
77f7bb95   梁灏   add Transfer comp...
64
65
  </template>
  <script>
77f7bb95   梁灏   add Transfer comp...
66
      export default {
77f7bb95   梁灏   add Transfer comp...
67
68
          data () {
              return {
5b19b5f5   梁灏   support Transfer
69
70
71
72
73
74
                  data3: this.getMockData(),
                  targetKeys3: this.getTargetKeys(),
                  listStyle: {
                      width: '250px',
                      height: '300px'
                  }
77f7bb95   梁灏   add Transfer comp...
75
76
              }
          },
77f7bb95   梁灏   add Transfer comp...
77
          methods: {
9084eb18   梁灏   fixed #92
78
79
80
81
82
83
84
85
86
87
88
              getMockData () {
                  let mockData = [];
                  for (let i = 1; i <= 20; i++) {
                      mockData.push({
                          key: i.toString(),
                          label: '内容' + i,
                          description: '内容' + i + '的描述信息',
                          disabled: Math.random() * 3 < 1
                      });
                  }
                  return mockData;
37ee1535   梁灏   update Transfer
89
              },
9084eb18   梁灏   fixed #92
90
91
              getTargetKeys () {
                  return this.getMockData()
5b19b5f5   梁灏   support Transfer
92
93
                      .filter(() => Math.random() * 2 > 1)
                      .map(item => item.key);
9084eb18   梁灏   fixed #92
94
              },
5b19b5f5   梁灏   support Transfer
95
96
              handleChange3 (newTargetKeys) {
                  this.targetKeys3 = newTargetKeys;
122e69ee   梁灏   update Transfer
97
              },
5b19b5f5   梁灏   support Transfer
98
99
              render3 (item) {
                  return item.label + ' - ' + item.description;
3fd97880   梁灏   Transfer renderFo...
100
              },
5b19b5f5   梁灏   support Transfer
101
102
103
              reloadMockData () {
                  this.data3 = this.getMockData();
                  this.targetKeys3 = this.getTargetKeys();
77f7bb95   梁灏   add Transfer comp...
104
105
106
              }
          }
      }
9084eb18   梁灏   fixed #92
107
  </script>
5b19b5f5   梁灏   support Transfer
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
  
  <!--<template>-->
      <!--<Transfer-->
              <!--:data="data4"-->
              <!--:target-keys="targetKeys4"-->
              <!--:render-format="render4"-->
              <!--@on-change="handleChange4"></Transfer>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--data4: this.getMockData(),-->
                  <!--targetKeys4: this.getTargetKeys()-->
              <!--}-->
          <!--},-->
          <!--methods: {-->
              <!--getMockData () {-->
                  <!--let mockData = [];-->
                  <!--for (let i = 1; i <= 20; i++) {-->
                      <!--mockData.push({-->
                          <!--key: i.toString(),-->
                          <!--label: '内容' + i,-->
                          <!--description: '内容' + i + '的描述信息',-->
                          <!--disabled: Math.random() * 3 < 1-->
                      <!--});-->
                  <!--}-->
                  <!--return mockData;-->
              <!--},-->
              <!--getTargetKeys () {-->
                  <!--return this.getMockData()-->
                      <!--.filter(() => Math.random() * 2 > 1)-->
                      <!--.map(item => item.key);-->
              <!--},-->
              <!--handleChange4 (newTargetKeys) {-->
                  <!--this.targetKeys4 = newTargetKeys;-->
              <!--},-->
              <!--render4 (item) {-->
                  <!--return item.label + ' - ' + item.description;-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->