Commit 4ad72493f6b145ea91613d2a47fac0c8b1178fff
1 parent
19c208d3
Revert Table demo
Showing
1 changed file
with
78 additions
and
11 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Table highlight-row ref="currentRowTable" :columns="columns3" :data="data1"></Table> | ||
| 4 | - <Button @click="handleClearCurrentRow">Clear</Button> | 3 | + <Table border ref="selection" :columns="columns4" :data="data1"></Table> |
| 4 | + <Button @click="handleSetData">Set Data</Button> | ||
| 5 | + <Button @click="handleClearData">Clear Data</Button> | ||
| 6 | + <Button @click="handleSelectAll(true)">Set 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> | ||
| 5 | </div> | 16 | </div> |
| 6 | </template> | 17 | </template> |
| 7 | <script> | 18 | <script> |
| 8 | export default { | 19 | export default { |
| 9 | data () { | 20 | data () { |
| 10 | return { | 21 | return { |
| 11 | - columns3: [ | 22 | + columns4: [ |
| 12 | { | 23 | { |
| 13 | - type: 'index', | 24 | + type: 'selection', |
| 14 | width: 60, | 25 | width: 60, |
| 15 | align: 'center' | 26 | align: 'center' |
| 16 | }, | 27 | }, |
| @@ -28,6 +39,47 @@ | @@ -28,6 +39,47 @@ | ||
| 28 | } | 39 | } |
| 29 | ], | 40 | ], |
| 30 | data1: [ | 41 | data1: [ |
| 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 | + }, | ||
| 71 | + ] | ||
| 72 | + } | ||
| 73 | + }, | ||
| 74 | + mounted(){ | ||
| 75 | + this.refreshData(); | ||
| 76 | + }, | ||
| 77 | + methods: { | ||
| 78 | + handleSelectAll (status) { | ||
| 79 | + this.$refs.selection.selectAll(status); | ||
| 80 | + }, | ||
| 81 | + handleSetData () { | ||
| 82 | + this.data1 = [ | ||
| 31 | { | 83 | { |
| 32 | name: 'John Brown', | 84 | name: 'John Brown', |
| 33 | age: 18, | 85 | age: 18, |
| @@ -52,13 +104,28 @@ | @@ -52,13 +104,28 @@ | ||
| 52 | address: 'Ottawa No. 2 Lake Park', | 104 | address: 'Ottawa No. 2 Lake Park', |
| 53 | date: '2016-10-04' | 105 | date: '2016-10-04' |
| 54 | } | 106 | } |
| 55 | - ] | ||
| 56 | - } | ||
| 57 | - }, | ||
| 58 | - methods: { | ||
| 59 | - handleClearCurrentRow () { | ||
| 60 | - this.$refs.currentRowTable.clearCurrentRow(); | 107 | + ]; |
| 108 | + }, | ||
| 109 | + handleClearData () { | ||
| 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(); | ||
| 61 | } | 128 | } |
| 62 | } | 129 | } |
| 63 | } | 130 | } |
| 64 | -</script> | 131 | -</script> |
| 132 | +</script> | ||
| 65 | \ No newline at end of file | 133 | \ No newline at end of file |