Commit 944c0dac7a475d7036e8a7569f4dbeb5f71d3ee9
1 parent
347815f7
add example for dropdown placement bug
Showing
2 changed files
with
69 additions
and
24 deletions
Show diff stats
examples/routers/page.vue
@@ -5,35 +5,24 @@ | @@ -5,35 +5,24 @@ | ||
5 | <Button type="primary" @click="subject">- 1</Button> | 5 | <Button type="primary" @click="subject">- 1</Button> |
6 | <Button type="primary" @click="change">Change</Button> | 6 | <Button type="primary" @click="change">Change</Button> |
7 | <Page :current="2" :total="50" simple></Page> | 7 | <Page :current="2" :total="50" simple></Page> |
8 | - <div style="margin:20px 0px"> | ||
9 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 8 | + |
9 | + <div style="margin:10px 0px"> | ||
10 | + <Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page> | ||
10 | </div> | 11 | </div> |
11 | - <div style="margin:20px 0px"> | ||
12 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 12 | + <div style="margin:10px 0px"> |
13 | + <Page :total="1000" show-sizer show-elevator show-total transfer :current="12"></Page> | ||
13 | </div> | 14 | </div> |
14 | - <div style="margin:20px 0px"> | ||
15 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 15 | + <div style="margin:100px 0px"> |
16 | + <Page :total="500" show-sizer show-elevator show-total transfer ></Page> | ||
16 | </div> | 17 | </div> |
17 | - <div style="margin:20px 0px"> | ||
18 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 18 | + <div style="margin:100px 0px"> |
19 | + <Page :total="500" show-sizer show-elevator transfer ></Page> | ||
19 | </div> | 20 | </div> |
20 | - <div style="margin:20px 0px"> | ||
21 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 21 | + <div style="margin:100px 0px"> |
22 | + <Page :total="500" show-sizer show-elevator transfer ></Page> | ||
22 | </div> | 23 | </div> |
23 | - <div style="margin:20px 0px"> | ||
24 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | ||
25 | - </div> | ||
26 | - <div style="margin:20px 0px"> | ||
27 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | ||
28 | - </div> | ||
29 | - <div style="margin:20px 0px"> | ||
30 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | ||
31 | - </div> | ||
32 | - <div style="margin:20px 0px"> | ||
33 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | ||
34 | - </div> | ||
35 | - <div style="margin:20px 0px"> | ||
36 | - <Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> | 24 | + <div style="margin:10px 0px"> |
25 | + <Page :total="500" show-sizer transfer ></Page> | ||
37 | </div> | 26 | </div> |
38 | </div> | 27 | </div> |
39 | </template> | 28 | </template> |
examples/routers/table.vue
@@ -5,6 +5,14 @@ | @@ -5,6 +5,14 @@ | ||
5 | <Button @click="handleClearData">Clear Data</Button> | 5 | <Button @click="handleClearData">Clear Data</Button> |
6 | <Button @click="handleSelectAll(true)">Set all selected</Button> | 6 | <Button @click="handleSelectAll(true)">Set all selected</Button> |
7 | <Button @click="handleSelectAll(false)">Cancel all selected</Button> | 7 | <Button @click="handleSelectAll(false)">Cancel all selected</Button> |
8 | + <div style="margin:20px 0px;"> | ||
9 | + <Table :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table> | ||
10 | + <div style="margin: 10px;overflow: hidden"> | ||
11 | + <div style="float: right;"> | ||
12 | + <Page :total="100" show-sizer :current="1" @on-change="changePage"></Page> | ||
13 | + </div> | ||
14 | + </div> | ||
15 | + </div> | ||
8 | </div> | 16 | </div> |
9 | </template> | 17 | </template> |
10 | <script> | 18 | <script> |
@@ -32,9 +40,40 @@ | @@ -32,9 +40,40 @@ | ||
32 | ], | 40 | ], |
33 | data1: [ | 41 | data1: [ |
34 | 42 | ||
43 | + ], | ||
44 | + | ||
45 | + tableData1: [], | ||
46 | + tableColumns1: [ | ||
47 | + { | ||
48 | + title: 'Data1', | ||
49 | + key: 'data1' | ||
50 | + }, | ||
51 | + { | ||
52 | + title: 'Data2', | ||
53 | + key: 'data2' | ||
54 | + }, | ||
55 | + { | ||
56 | + title: 'Data3', | ||
57 | + key: 'data3' | ||
58 | + }, | ||
59 | + { | ||
60 | + title: 'Data4', | ||
61 | + key: 'data4' | ||
62 | + }, | ||
63 | + { | ||
64 | + title: 'Data5', | ||
65 | + key: 'data5' | ||
66 | + }, | ||
67 | + { | ||
68 | + title: 'Data6', | ||
69 | + key: 'data6' | ||
70 | + }, | ||
35 | ] | 71 | ] |
36 | } | 72 | } |
37 | }, | 73 | }, |
74 | + mounted(){ | ||
75 | + this.refreshData(); | ||
76 | + }, | ||
38 | methods: { | 77 | methods: { |
39 | handleSelectAll (status) { | 78 | handleSelectAll (status) { |
40 | this.$refs.selection.selectAll(status); | 79 | this.$refs.selection.selectAll(status); |
@@ -69,6 +108,23 @@ | @@ -69,6 +108,23 @@ | ||
69 | }, | 108 | }, |
70 | handleClearData () { | 109 | handleClearData () { |
71 | this.data1 = []; | 110 | this.data1 = []; |
111 | + }, | ||
112 | + refreshData(){ | ||
113 | + let data = []; | ||
114 | + for (let i = 0; i < 10; i++) { | ||
115 | + data.push({ | ||
116 | + data1: Math.floor(Math.random () * 10000), | ||
117 | + data2: Math.floor(Math.random () * 1000000), | ||
118 | + data3: Math.floor(Math.random () * 100000000), | ||
119 | + data4: Math.floor(Math.random () * Math.random () * 10000), | ||
120 | + data5: Math.floor(Math.random () * Math.random () * 1000000), | ||
121 | + data6: Math.floor(Math.random () * Math.random () * 100000000), | ||
122 | + }); | ||
123 | + } | ||
124 | + this.tableData1 = data; | ||
125 | + }, | ||
126 | + changePage(){ | ||
127 | + this.refreshData(); | ||
72 | } | 128 | } |
73 | } | 129 | } |
74 | } | 130 | } |