other / mew-iview

Commit a000231ec2eb1fe81b68f117680bc51ca32ac016

Authored by 梁灏
1 parent 5f6e94bd

update Table sort style

Showing 2 changed files with 33 additions and 127 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @a000231
1 <template> 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 </template> 3 </template>
11 <script> 4 <script>
12 export default { 5 export default {
13 data () { 6 data () {
14 return { 7 return {
15 - tableData1: this.mockTableData1(),  
16 - tableColumns1: [ 8 + columns5: [
  9 + {
  10 + title: 'Date',
  11 + key: 'date',
  12 + sortable: true
  13 + },
17 { 14 {
18 title: 'Name', 15 title: 'Name',
19 key: 'name' 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 </script> 57 </script>
src/styles/mixins/caret.less
  Show/Hide comments   View file @a000231
1 // sortable 1 // sortable
2 .sortable() { 2 .sortable() {
3 display: inline-block; 3 display: inline-block;
4 - width: 9px; 4 + width: 14px;
5 height: 12px; 5 height: 12px;
6 - margin-left: 4px;  
7 margin-top: -1px; 6 margin-top: -1px;
8 vertical-align: middle; 7 vertical-align: middle;
9 overflow: hidden; 8 overflow: hidden;