other / mew-iview

Commit 021bbec2c3cee5862ac1eb01c889d1e81b409074

Authored by 梁灏
1 parent fdcb8143

update Table Icons

Showing 4 changed files with 118 additions and 498 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @021bbec
1   -<style>
2   -table {
3   - border-collapse: collapse;
4   - border-spacing: 0;
5   -}
6   -</style>
7   -
8 1 <template>
9 2 <div>
10   - <!-- <br><br><br><br><br> -->
11   - <!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
12   - <!-- <Table border :columns="columns1" height='300'></Table> -->
13   - <!-- <br><br><br><br><br> -->
14   - <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
15   - <!--<br><br><br><br><br>-->
16   - <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
17   - <!-- <br><br><br><br><br> -->
18   - <!-- <Table border :columns="columns6" :data="data5"></Table> -->
19   - <!-- <br><br><br><br><br> -->
20   - <!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
21   - <!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
22   - <!-- <br><br><br><br><br> -->
23   - <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
24   - <!-- <Table border :columns="columns8" height="200"></Table> -->
25   - <!-- <br><br><br><br><br> -->
26   -
27   - <div class="layout-demo-con">
28   - <Button @click="change">修改Sider绑定的变量来控制收缩</Button>
29   - <Layout :style="{minHeight: '80vh'}">
30   - <Sider
31   - v-model="isCollapsed"
32   - collapsed-width="0"
33   - hide-trigger
34   - breakpoint="sm"
35   - @on-collapse="changed"
36   - collapsible
37   - ref="side"
38   - width="200">
39   - <Menu width="auto" theme="dark" active-name="1">
40   - <MenuGroup title="内容管理">
41   - <MenuItem name="1">
42   - <Icon type="document-text"></Icon>
43   - 文章管理
44   - </MenuItem>
45   - <MenuItem name="2">
46   - <Icon type="chatbubbles"></Icon>
47   - 评论管理
48   - </MenuItem>
49   - </MenuGroup>
50   - <MenuGroup title="统计分析">
51   - <MenuItem name="3">
52   - <Icon type="heart"></Icon>
53   - 用户留存
54   - </MenuItem>
55   - <MenuItem name="4">
56   - <Icon type="heart-broken"></Icon>
57   - 流失用户
58   - </MenuItem>
59   - </MenuGroup>
60   - </Menu>
61   - <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
62   - </Sider>
63   - <Layout class-name="test-class">
64   - <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
65   - <Content :style="{background:'#FFCF9E'}">
66   - <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
67   - <!-- <br> -->
68   - <!-- <Table border :columns="columns5" :data="data5"></Table> -->
69   - <Table border :columns="columns8" height="240" :data="data7"></Table>
70   - </Content>
71   - <Footer>sdfsdsdfsdfs</Footer>
72   - </Layout>
73   - </Layout>
  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>
74 8 </div>
75 9 </div>
76 10 </template>
... ... @@ -78,454 +12,139 @@ table {
78 12 export default {
79 13 data () {
80 14 return {
81   - isCollapsed: false,
82   - columns1: [
  15 + tableData1: this.mockTableData1(),
  16 + tableColumns1: [
83 17 {
84 18 title: 'Name',
85   - key: 'name',
86   - align: 'center',
87   - minWidth: 100,
88   - maxWidth: 200,
89   - fixed: 'left',
90   - filters: [
91   - {
92   - label: 'Joe',
93   - value: 1
94   - },
95   - {
96   - label: 'John',
97   - value: 2
98   - }
99   - ],
100   - filterMultiple: false,
101   - filterMethod (value, row) {
102   - if (value === 1) {
103   - return row.name === 'Joe';
104   - } else if (value === 2) {
105   - return row.name === 'John Brown';
106   - }
107   - }
108   - },
109   - {
110   - title: 'Other',
111   - align: 'center',
112   - children: [
113   - {
114   - title: 'Age',
115   - key: 'age',
116   - align: 'center',
117   - minWidth: 100,
118   - maxWidth: 200,
119   - sortable: true
120   - },
121   - {
122   - title: 'Address',
123   - align: 'center',
124   - children: [
125   - {
126   - title: 'Street',
127   - key: 'street',
128   - align: 'center',
129   - minWidth: 100,
130   - maxWidth: 200,
131   - },
132   - {
133   - title: 'Block',
134   - align: 'center',
135   - children: [
136   - {
137   - title: 'Building',
138   - key: 'building',
139   - align: 'center',
140   - minWidth: 100,
141   - maxWidth: 200,
142   - sortable: true
143   - },
144   - {
145   - title: 'Door No.',
146   - key: 'door',
147   - align: 'center',
148   - minWidth: 100,
149   - maxWidth: 200,
150   - }
151   - ]
152   - }
153   - ]
154   - }
155   - ]
156   - },
157   - {
158   - title: 'Company',
159   - align: 'center',
160   - children: [
161   - {
162   - title: 'Company Address',
163   - key: 'caddress',
164   - align: 'center',
165   - minWidth: 100,
166   - maxWidth: 200,
167   - },
168   - {
169   - title: 'Company Name',
170   - key: 'cname',
171   - align: 'center',
172   - minWidth: 100,
173   - maxWidth: 200,
174   - }
175   - ]
176   - },
177   - // {
178   - // title: 'Gender',
179   - // key: 'gender',
180   - // align: 'center',
181   - // width: 200,
182   - // fixed: 'right'
183   - // },
184   - {
185   - title: 'Gender',
186   - key: 'gender',
187   - align: 'center',
188   - minWidth: 100,
189   - maxWidth: 200,
190   - fixed: 'right'
191   - }
192   - ],
193   - columns2: [
194   - {
195   - title: 'Name',
196   - key: 'name',
197   - width: 100,
198   - fixed: 'left'
199   - },
200   - {
201   - title: 'Age',
202   - key: 'age',
203   - width: 100,
204   - fixed: 'right',
205   - sortable: true
206   - },
207   - {
208   - title: 'Province',
209   - key: 'province',
210   - width: 100
211   - },
212   - {
213   - title: 'City',
214   - key: 'city',
215   - width: 100
216   - },
217   - {
218   - title: 'Address',
219   - key: 'address',
220   - width: 200
  19 + key: 'name'
221 20 },
222 21 {
223   - title: 'Postcode',
224   - key: 'zip',
225   - width: 100
  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 + }
226 36 },
227 37 {
228   - title: 'Action',
229   - key: 'action',
230   - fixed: 'right',
231   - width: 120,
  38 + title: 'Portrayal',
  39 + key: 'portrayal',
232 40 render: (h, params) => {
233   - return h('div', [
234   - h('Button', {
235   - props: {
236   - type: 'text',
237   - size: 'small'
238   - }
239   - }, 'View'),
240   - h('Button', {
241   - props: {
242   - type: 'text',
243   - size: 'small'
244   - }
245   - }, 'Edit')
  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 + ])
246 61 ]);
247 62 }
248   - }
249   - ],
250   - data1: [],
251   - data4: [
252   - {
253   - name: 'John Brown',
254   - age: 18,
255   - address: 'New York No. 1 Lake Park',
256   - province: 'America',
257   - city: 'New York',
258   - zip: 100000
259   - },
260   - {
261   - name: 'Jim Green',
262   - age: 24,
263   - address: 'Washington, D.C. No. 1 Lake Park',
264   - province: 'America',
265   - city: 'Washington, D.C.',
266   - zip: 100000
267   - },
268   - {
269   - name: 'Joe Black',
270   - age: 30,
271   - address: 'Sydney No. 1 Lake Park',
272   - province: 'Australian',
273   - city: 'Sydney',
274   - zip: 100000
275   - },
276   - {
277   - name: 'Jon Snow',
278   - age: 26,
279   - address: 'Ottawa No. 2 Lake Park',
280   - province: 'Canada',
281   - city: 'Ottawa',
282   - zip: 100000
283   - },
284   - {
285   - name: 'John Brown',
286   - age: 18,
287   - address: 'New York No. 1 Lake Park',
288   - province: 'America',
289   - city: 'New York',
290   - zip: 100000
291   - },
292   - {
293   - name: 'Jim Green',
294   - age: 24,
295   - address: 'Washington, D.C. No. 1 Lake Park',
296   - province: 'America',
297   - city: 'Washington, D.C.',
298   - zip: 100000
299   - },
300   - {
301   - name: 'Joe Black',
302   - age: 30,
303   - address: 'Sydney No. 1 Lake Park',
304   - province: 'Australian',
305   - city: 'Sydney',
306   - zip: 100000
307   - },
308   - {
309   - name: 'Jon Snow',
310   - age: 26,
311   - address: 'Ottawa No. 2 Lake Park',
312   - province: 'Canada',
313   - city: 'Ottawa',
314   - zip: 100000
315   - }
316   - ],
317   - columns5: [
318   - {
319   - title: 'Date',
320   - key: 'date',
321   - sortable: true
322   - },
323   - {
324   - title: 'Name',
325   - key: 'name'
326   - },
327   - {
328   - title: 'Age',
329   - key: 'age',
330   - sortable: true
331   - },
332   - {
333   - title: 'Address',
334   - key: 'address'
335   - }
336   - ],
337   - data5: [
338   - {
339   - name: 'John Brown',
340   - age: 18,
341   - address: 'New York No. 1 Lake Park',
342   - date: '2016-10-03'
343   - },
344   - {
345   - name: 'Jim Green',
346   - age: 24,
347   - address: 'London No. 1 Lake Park',
348   - date: '2016-10-01'
349 63 },
350 64 {
351   - name: 'Joe Black',
352   - age: 30,
353   - address: 'Sydney No. 1 Lake Park',
354   - date: '2016-10-02'
355   - },
356   - {
357   - name: 'Jon Snow',
358   - age: 26,
359   - address: 'Ottawa No. 2 Lake Park',
360   - date: '2016-10-04'
361   - }
362   - ],
363   - columns6: [
364   - {
365   - title: 'Date',
366   - key: 'date'
367   - },
368   - {
369   - title: 'Name',
370   - key: 'name'
  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 + }
371 90 },
372 91 {
373   - title: 'Age',
374   - key: 'age',
375   - filters: [
376   - {
377   - label: 'Greater than 25',
378   - value: 1
379   - },
380   - {
381   - label: 'Less than 25',
382   - value: 2
383   - }
384   - ],
385   - filterMultiple: false,
386   - filterMethod (value, row) {
387   - if (value === 1) {
388   - return row.age > 25;
389   - } else if (value === 2) {
390   - return row.age < 25;
391   - }
  92 + title: 'Sampling Time',
  93 + key: 'time',
  94 + render: (h, params) => {
  95 + return h('div', 'Almost' + params.row.time + 'days');
392 96 }
393 97 },
394 98 {
395   - title: 'Address',
396   - key: 'address',
397   - fixed: 'right',
398   - filters: [
  99 + title: 'Updated Time',
  100 + key: 'update',
  101 + render: (h, params) => {
  102 + return h('div', this.formatDate(this.tableData1[params.index].update));
  103 + }
  104 + }
  105 + ]
  106 + }
  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: [
399 117 {
400   - label: 'New York',
401   - value: 'New York'
  118 + n: 'People' + Math.floor(Math.random () * 100 + 1),
  119 + c: Math.floor(Math.random () * 1000000 + 100000)
402 120 },
403 121 {
404   - label: 'London',
405   - value: 'London'
  122 + n: 'People' + Math.floor(Math.random () * 100 + 1),
  123 + c: Math.floor(Math.random () * 1000000 + 100000)
406 124 },
407 125 {
408   - label: 'Sydney',
409   - value: 'Sydney'
  126 + n: 'People' + Math.floor(Math.random () * 100 + 1),
  127 + c: Math.floor(Math.random () * 1000000 + 100000)
410 128 }
411 129 ],
412   - filterMethod (value, row) {
413   - return row.address.indexOf(value) > -1;
414   - }
415   - }
416   - ],
417   -
418   - columns7: [
419   - {
420   - title: 'Date',
421   - key: 'date',
422   - sortable: true,
423   - width:200,
424   - },
425   - {
426   - title: 'Name',
427   - key: 'name',
428   - width:200,
429   - },
430   - {
431   - title: 'Age',
432   - key: 'age',
433   - width:200,
434   - },
435   - {
436   - title: 'Address',
437   - key: 'address',
438   - width:200,
439   - }
440   - ],
441   - data7: [
442   - {
443   - name: 'John Brown',
444   - age: 18,
445   - address: 'New York No. 1 Lake Park',
446   - date: '2016-10-03'
447   - },
448   - {
449   - name: 'Jim Green',
450   - age: 24,
451   - address: 'London No. 1 Lake Park',
452   - date: '2016-10-01'
453   - },
454   - {
455   - name: 'Joe Black',
456   - age: 30,
457   - address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
458   - date: '2016-10-02'
459   - },
460   - {
461   - name: 'Jon Snow',
462   - age: 26,
463   - address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
464   - date: '2016-10-04'
465   - }
466   - ],
467   -
468   - columns8: [
469   - {
470   - title: 'Address',
471   - key: 'address',
472   - minWidth:200,
473   - //maxWidth:300,
474   - },
475   - {
476   - title: 'Date',
477   - key: 'date',
478   - sortable: true,
479   - minWidth:100,
480   - maxWidth:150,
481   - },
482   - {
483   - title: 'Name',
484   - key: 'name',
485   - minWidth:100,
486   - maxWidth:200,
487   - },
488   - {
489   - title: 'Age',
490   - key: 'age',
491   - minWidth:60,
492   - maxWidth:100,
493   - },
494   - ],
495   - }
496   - },
497   - mounted () {
498   - const data = [];
499   - for (let i = 0; i < 20; i++) {
500   - data.push({
501   - key: i,
502   - name: 'John Brown',
503   - age: i + 1,
504   - street: 'Lake Park',
505   - building: 'C',
506   - door: 2035,
507   - caddress: 'Lake Street 42',
508   - cname: 'SoftLake Co',
509   - gender: 'M',
510   - });
511   - }
512   - this.data1 = data;
513   - },
514   - methods: {
515   - toggleCollapse () {
516   - this.$refs.side.toggleCollapse();
  130 + time: Math.floor(Math.random () * 7 + 1),
  131 + update: new Date()
  132 + })
  133 + }
  134 + return data;
517 135 },
518   - change () {
519   - this.isCollapsed = !this.isCollapsed;
  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;
520 143 },
521   - changed (res) {
522   - console.log(res)
523   - }
524   - },
525   - watch: {
526   - isCollapsed (val) {
527   - // console.log(val)
  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();
528 147 }
529 148 }
530 149 }
531   -</script>
532 150 \ No newline at end of file
  151 +</script>
... ...
src/components/table/cell.vue
  Show/Hide comments   View file @021bbec
... ... @@ -8,7 +8,7 @@
8 8 <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
9 9 <template v-if="renderType === 'expand' && !row._disableExpand">
10 10 <div :class="expandCls" @click="toggleExpand">
11   - <Icon type="ios-arrow-right"></Icon>
  11 + <Icon type="ios-arrow-forward"></Icon>
12 12 </div>
13 13 </template>
14 14 <Cell
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @021bbec
... ... @@ -21,8 +21,8 @@
21 21 <span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
22 22 <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
23 23 <span :class="[prefixCls + '-sort']" v-if="column.sortable">
24   - <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
25   - <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
  24 + <i class="ivu-icon ivu-icon-md-arrow-dropup" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
  25 + <i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
26 26 </span>
27 27 <Poptip
28 28 v-if="isPopperShow(column)"
... ... @@ -32,7 +32,7 @@
32 32 transfer
33 33 @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
34 34 <span :class="[prefixCls + '-filter']">
35   - <i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
  35 + <i class="ivu-icon ivu-icon-ios-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
36 36 </span>
37 37  
38 38 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
... ...
src/styles/mixins/caret.less
  Show/Hide comments   View file @021bbec
... ... @@ -18,6 +18,7 @@
18 18 position: absolute;
19 19 color: @btn-disable-color;
20 20 transition: color @transition-time @ease-in-out;
  21 + font-size: @font-size-large;
21 22  
22 23 &:hover{
23 24 color: inherit;
... ...