Commit a000231ec2eb1fe81b68f117680bc51ca32ac016
1 parent
5f6e94bd
update Table sort style
Showing
2 changed files
with
33 additions
and
127 deletions
Show diff stats
examples/routers/table.vue
| 1 | 1 | <template> |
| 2 | - <div> | |
| 3 | - <Table :data="tableData1" :columns="tableColumns1" stripe></Table> | |
| 4 | - <div style="margin: 10px;overflow: hidden"> | |
| 5 | - <div style="float: right;"> | |
| 6 | - <Page :total="100" :current="1" @on-change="changePage"></Page> | |
| 7 | - </div> | |
| 8 | - </div> | |
| 9 | - </div> | |
| 2 | + <Table border :columns="columns5" :data="data5"></Table> | |
| 10 | 3 | </template> |
| 11 | 4 | <script> |
| 12 | 5 | export default { |
| 13 | 6 | data () { |
| 14 | 7 | return { |
| 15 | - tableData1: this.mockTableData1(), | |
| 16 | - tableColumns1: [ | |
| 8 | + columns5: [ | |
| 9 | + { | |
| 10 | + title: 'Date', | |
| 11 | + key: 'date', | |
| 12 | + sortable: true | |
| 13 | + }, | |
| 17 | 14 | { |
| 18 | 15 | title: 'Name', |
| 19 | 16 | key: 'name' |
| 20 | 17 | }, |
| 21 | 18 | { |
| 22 | - title: 'Status', | |
| 23 | - key: 'status', | |
| 24 | - render: (h, params) => { | |
| 25 | - const row = params.row; | |
| 26 | - const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red'; | |
| 27 | - const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail'; | |
| 28 | - | |
| 29 | - return h('Tag', { | |
| 30 | - props: { | |
| 31 | - type: 'dot', | |
| 32 | - color: color | |
| 33 | - } | |
| 34 | - }, text); | |
| 35 | - } | |
| 19 | + title: 'Age', | |
| 20 | + key: 'age', | |
| 21 | + sortable: true | |
| 36 | 22 | }, |
| 37 | 23 | { |
| 38 | - title: 'Portrayal', | |
| 39 | - key: 'portrayal', | |
| 40 | - render: (h, params) => { | |
| 41 | - return h('Poptip', { | |
| 42 | - props: { | |
| 43 | - trigger: 'hover', | |
| 44 | - title: params.row.portrayal.length + 'portrayals', | |
| 45 | - placement: 'bottom' | |
| 46 | - } | |
| 47 | - }, [ | |
| 48 | - h('Tag', params.row.portrayal.length), | |
| 49 | - h('div', { | |
| 50 | - slot: 'content' | |
| 51 | - }, [ | |
| 52 | - h('ul', this.tableData1[params.index].portrayal.map(item => { | |
| 53 | - return h('li', { | |
| 54 | - style: { | |
| 55 | - textAlign: 'center', | |
| 56 | - padding: '4px' | |
| 57 | - } | |
| 58 | - }, item) | |
| 59 | - })) | |
| 60 | - ]) | |
| 61 | - ]); | |
| 62 | - } | |
| 24 | + title: 'Address', | |
| 25 | + key: 'address' | |
| 26 | + } | |
| 27 | + ], | |
| 28 | + data5: [ | |
| 29 | + { | |
| 30 | + name: 'John Brown', | |
| 31 | + age: 18, | |
| 32 | + address: 'New York No. 1 Lake Park', | |
| 33 | + date: '2016-10-03' | |
| 63 | 34 | }, |
| 64 | 35 | { |
| 65 | - title: 'People', | |
| 66 | - key: 'people', | |
| 67 | - render: (h, params) => { | |
| 68 | - return h('Poptip', { | |
| 69 | - props: { | |
| 70 | - trigger: 'hover', | |
| 71 | - title: params.row.people.length + 'customers', | |
| 72 | - placement: 'bottom' | |
| 73 | - } | |
| 74 | - }, [ | |
| 75 | - h('Tag', params.row.people.length), | |
| 76 | - h('div', { | |
| 77 | - slot: 'content' | |
| 78 | - }, [ | |
| 79 | - h('ul', this.tableData1[params.index].people.map(item => { | |
| 80 | - return h('li', { | |
| 81 | - style: { | |
| 82 | - textAlign: 'center', | |
| 83 | - padding: '4px' | |
| 84 | - } | |
| 85 | - }, item.n + '：' + item.c + 'People') | |
| 86 | - })) | |
| 87 | - ]) | |
| 88 | - ]); | |
| 89 | - } | |
| 36 | + name: 'Jim Green', | |
| 37 | + age: 24, | |
| 38 | + address: 'London No. 1 Lake Park', | |
| 39 | + date: '2016-10-01' | |
| 90 | 40 | }, |
| 91 | 41 | { |
| 92 | - title: 'Sampling Time', | |
| 93 | - key: 'time', | |
| 94 | - render: (h, params) => { | |
| 95 | - return h('div', 'Almost' + params.row.time + 'days'); | |
| 96 | - } | |
| 42 | + name: 'Joe Black', | |
| 43 | + age: 30, | |
| 44 | + address: 'Sydney No. 1 Lake Park', | |
| 45 | + date: '2016-10-02' | |
| 97 | 46 | }, |
| 98 | 47 | { |
| 99 | - title: 'Updated Time', | |
| 100 | - key: 'update', | |
| 101 | - render: (h, params) => { | |
| 102 | - return h('div', this.formatDate(this.tableData1[params.index].update)); | |
| 103 | - } | |
| 48 | + name: 'Jon Snow', | |
| 49 | + age: 26, | |
| 50 | + address: 'Ottawa No. 2 Lake Park', | |
| 51 | + date: '2016-10-04' | |
| 104 | 52 | } |
| 105 | 53 | ] |
| 106 | 54 | } |
| 107 | - }, | |
| 108 | - methods: { | |
| 109 | - mockTableData1 () { | |
| 110 | - let data = []; | |
| 111 | - for (let i = 0; i < 10; i++) { | |
| 112 | - data.push({ | |
| 113 | - name: 'Business' + Math.floor(Math.random () * 100 + 1), | |
| 114 | - status: Math.floor(Math.random () * 3 + 1), | |
| 115 | - portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'], | |
| 116 | - people: [ | |
| 117 | - { | |
| 118 | - n: 'People' + Math.floor(Math.random () * 100 + 1), | |
| 119 | - c: Math.floor(Math.random () * 1000000 + 100000) | |
| 120 | - }, | |
| 121 | - { | |
| 122 | - n: 'People' + Math.floor(Math.random () * 100 + 1), | |
| 123 | - c: Math.floor(Math.random () * 1000000 + 100000) | |
| 124 | - }, | |
| 125 | - { | |
| 126 | - n: 'People' + Math.floor(Math.random () * 100 + 1), | |
| 127 | - c: Math.floor(Math.random () * 1000000 + 100000) | |
| 128 | - } | |
| 129 | - ], | |
| 130 | - time: Math.floor(Math.random () * 7 + 1), | |
| 131 | - update: new Date() | |
| 132 | - }) | |
| 133 | - } | |
| 134 | - return data; | |
| 135 | - }, | |
| 136 | - formatDate (date) { | |
| 137 | - const y = date.getFullYear(); | |
| 138 | - let m = date.getMonth() + 1; | |
| 139 | - m = m < 10 ? '0' + m : m; | |
| 140 | - let d = date.getDate(); | |
| 141 | - d = d < 10 ? ('0' + d) : d; | |
| 142 | - return y + '-' + m + '-' + d; | |
| 143 | - }, | |
| 144 | - changePage () { | |
| 145 | - // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server | |
| 146 | - this.tableData1 = this.mockTableData1(); | |
| 147 | - } | |
| 148 | 55 | } |
| 149 | 56 | } |
| 150 | 57 | </script> | ... | ... |