other / mew-iview

Commit ceeb9361fd0cf3fbd4130688c52594acd842948f

Authored by 梁灏
1 parent 504f8c52

fixed Table bug in Vue 2.5.13

Showing 4 changed files with 52 additions and 890 deletions   Show diff stats
Inline Side-by-side
build/webpack.base.config.js
  Show/Hide comments   View file @ceeb936
... ... @@ -63,7 +63,7 @@ module.exports = {
63 63 resolve: {
64 64 extensions: ['.js', '.vue'],
65 65 alias: {
66   - 'vue': 'vue/dist/vue.esm.js',
  66 + 'vue': 'vue/dist/vue.runtime.js',
67 67 '@': resolve('src')
68 68 }
69 69 },
... ...
build/webpack.dev.config.js
  Show/Hide comments   View file @ceeb936
... ... @@ -27,8 +27,8 @@ module.exports = merge(webpackBaseConfig, {
27 27 resolve: {
28 28 alias: {
29 29 iview: '../../src/index',
30   - vue: 'vue/dist/vue.esm.js'
31   - // vue: 'vue/dist/vue.runtime.js'
  30 + // vue: 'vue/dist/vue.esm.js'
  31 + vue: 'vue/dist/vue.runtime.js'
32 32 }
33 33 },
34 34 plugins: [
... ...
examples/routers/table.vue
  Show/Hide comments   View file @ceeb936
1   -<!--<template>-->
2   - <!--<div>-->
3   - <!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->
4   - <!--<div slot="loading">-->
5   - <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
6   - <!--<div>Loading</div>-->
7   - <!--</div>-->
8   - <!--</Table>-->
9   - <!--<br><br>-->
10   - <!--<Button @click="handleClear">clear</Button>-->
11   - <!--<Button @click="loading = !loading">Loading</Button>-->
12   - <!--</div>-->
13   -<!--</template>-->
14   -<!--<script>-->
15   - <!--export default {-->
16   - <!--data () {-->
17   - <!--return {-->
18   - <!--loading: false,-->
19   - <!--columns3: [-->
20   - <!--{-->
21   - <!--title: '姓名',-->
22   - <!--key: 'name',-->
23   - <!--width: 100,-->
24   - <!--fixed: 'left'-->
25   - <!--},-->
26   - <!--{-->
27   - <!--title: '年龄',-->
28   - <!--key: 'age',-->
29   - <!--width: 100-->
30   - <!--},-->
31   - <!--{-->
32   - <!--title: '省份',-->
33   - <!--key: 'province',-->
34   - <!--width: 100-->
35   - <!--},-->
36   - <!--{-->
37   - <!--title: '市区',-->
38   - <!--key: 'city',-->
39   - <!--width: 100-->
40   - <!--},-->
41   - <!--{-->
42   - <!--title: '地址',-->
43   - <!--key: 'address',-->
44   - <!--width: 200-->
45   - <!--},-->
46   - <!--{-->
47   - <!--title: '邮编',-->
48   - <!--key: 'zip',-->
49   - <!--width: 100-->
50   - <!--},-->
51   - <!--{-->
52   - <!--title: '操作',-->
53   - <!--key: 'action',-->
54   - <!--fixed: 'right',-->
55   - <!--width: 120,-->
56   - <!--render: (h, params) => {-->
57   - <!--return h('div', [-->
58   - <!--h('Button', {-->
59   - <!--props: {-->
60   - <!--type: 'text',-->
61   - <!--size: 'small'-->
62   - <!--}-->
63   - <!--}, '查看'),-->
64   - <!--h('Button', {-->
65   - <!--props: {-->
66   - <!--type: 'text',-->
67   - <!--size: 'small'-->
68   - <!--}-->
69   - <!--}, '编辑')-->
70   - <!--]);-->
71   - <!--}-->
72   - <!--}-->
73   - <!--],-->
74   - <!--data1: [-->
75   - <!--{-->
76   - <!--name: '王小明',-->
77   - <!--age: 18,-->
78   - <!--address: '北京市朝阳区芍药居'-->
79   - <!--},-->
80   - <!--{-->
81   - <!--name: '张小刚',-->
82   - <!--age: 25,-->
83   - <!--address: '北京市海淀区西二旗'-->
84   - <!--},-->
85   - <!--{-->
86   - <!--name: '李小红',-->
87   - <!--age: 30,-->
88   - <!--address: '上海市浦东新区世纪大道'-->
89   - <!--},-->
90   - <!--{-->
91   - <!--name: '周小伟',-->
92   - <!--age: 26,-->
93   - <!--address: '深圳市南山区深南大道'-->
94   - <!--}-->
95   - <!--]-->
96   - <!--}-->
97   - <!--},-->
98   - <!--methods: {-->
99   - <!--handleClear () {-->
100   - <!--this.$refs.table.clearCurrentRow();-->
101   - <!--},-->
102   - <!--handleChange (newData, oldData) {-->
103   -<!--// console.log(newData, oldData)-->
104   - <!--},-->
105   - <!--rc (data, index) {-->
106   - <!--console.log(data, index);-->
107   - <!--}-->
108   - <!--}-->
109   - <!--}-->
110   -<!--</script>-->
111   -
112   -<!--<style scoped>-->
113   - <!--.layout{-->
114   - <!--border: 1px solid #d7dde4;-->
115   - <!--background: #f5f7f9;-->
116   - <!--position: relative;-->
117   - <!--border-radius: 4px;-->
118   - <!--overflow: hidden;-->
119   - <!--}-->
120   - <!--.layout-breadcrumb{-->
121   - <!--padding: 10px 15px 0;-->
122   - <!--}-->
123   - <!--.layout-content{-->
124   - <!--min-height: 200px;-->
125   - <!--margin: 15px;-->
126   - <!--overflow: hidden;-->
127   - <!--background: #fff;-->
128   - <!--border-radius: 4px;-->
129   - <!--}-->
130   - <!--.layout-content-main{-->
131   - <!--padding: 10px;-->
132   - <!--}-->
133   - <!--.layout-copy{-->
134   - <!--text-align: center;-->
135   - <!--padding: 10px 0 20px;-->
136   - <!--color: #9ea7b4;-->
137   - <!--}-->
138   - <!--.layout-menu-left{-->
139   - <!--background: #464c5b;-->
140   - <!--}-->
141   - <!--.layout-header{-->
142   - <!--height: 60px;-->
143   - <!--background: #fff;-->
144   - <!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
145   - <!--}-->
146   - <!--.layout-logo-left{-->
147   - <!--width: 90%;-->
148   - <!--height: 30px;-->
149   - <!--background: #5b6270;-->
150   - <!--border-radius: 3px;-->
151   - <!--margin: 15px auto;-->
152   - <!--}-->
153   - <!--.layout-ceiling-main a{-->
154   - <!--color: #9ba7b5;-->
155   - <!--}-->
156   - <!--.layout-hide-text .layout-text{-->
157   - <!--display: none;-->
158   - <!--}-->
159   - <!--.ivu-col{-->
160   - <!--/*transition: width .2s ease-in-out;*/-->
161   - <!--}-->
162   -<!--</style>-->
163   -<!--<template>-->
164   - <!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->
165   - <!--<Row type="flex">-->
166   - <!--<Col :span="spanLeft" class="layout-menu-left">-->
167   - <!--<Menu active-name="1" theme="dark" width="auto">-->
168   - <!--<div class="layout-logo-left"></div>-->
169   - <!--<MenuItem name="1">-->
170   - <!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->
171   - <!--<span class="layout-text">选项 1</span>-->
172   - <!--</MenuItem>-->
173   - <!--<MenuItem name="2">-->
174   - <!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->
175   - <!--<span class="layout-text">选项 2</span>-->
176   - <!--</MenuItem>-->
177   - <!--<MenuItem name="3">-->
178   - <!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->
179   - <!--<span class="layout-text">选项 3</span>-->
180   - <!--</MenuItem>-->
181   - <!--</Menu>-->
182   - <!--</Col>-->
183   - <!--<Col :span="spanRight">-->
184   - <!--<div class="layout-header">-->
185   - <!--<Button type="text" @click="toggleClick">-->
186   - <!--<Icon type="navicon" size="32"></Icon>-->
187   - <!--</Button>-->
188   - <!--</div>-->
189   - <!--<div class="layout-breadcrumb">-->
190   - <!--<Breadcrumb>-->
191   - <!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->
192   - <!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->
193   - <!--<BreadcrumbItem>某应用</BreadcrumbItem>-->
194   - <!--</Breadcrumb>-->
195   - <!--</div>-->
196   - <!--<div class="layout-content">-->
197   - <!--<div class="layout-content-main">-->
198   - <!--<Table stripe :columns="columns1" :data="data1"></Table>-->
199   - <!--</div>-->
200   - <!--<hr style="margin: 10px 0;" />-->
201   - <!--<div class="layout-content-main">-->
202   - <!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->
203   - <!--<i-button type="primary" size="large" @click="exportCSV">-->
204   - <!--<icon type="ios-download-outline"></icon> Export to CSV-->
205   - <!--</i-button>-->
206   - <!--</div>-->
207   - <!--</div>-->
208   - <!--</Col>-->
209   - <!--</Row>-->
210   - <!--</div>-->
211   -<!--</template>-->
212   -<!--<script>-->
213   - <!--export default {-->
214   - <!--data () {-->
215   - <!--return {-->
216   - <!--spanLeft: 5,-->
217   - <!--spanRight: 19,-->
218   - <!--columns1: [-->
219   - <!--{-->
220   - <!--title: '姓名',-->
221   - <!--key: 'name'-->
222   - <!--},-->
223   - <!--{-->
224   - <!--title: '年龄',-->
225   - <!--key: 'age'-->
226   - <!--},-->
227   - <!--{-->
228   - <!--title: '地址',-->
229   - <!--key: 'address'-->
230   - <!--},-->
231   - <!--{-->
232   - <!--title: '姓名',-->
233   - <!--key: 'name'-->
234   - <!--},-->
235   - <!--{-->
236   - <!--title: '年龄',-->
237   - <!--key: 'age'-->
238   - <!--},-->
239   - <!--{-->
240   - <!--title: '地址',-->
241   - <!--key: 'address'-->
242   - <!--},-->
243   - <!--{-->
244   - <!--title: '姓名',-->
245   - <!--key: 'name'-->
246   - <!--},-->
247   - <!--{-->
248   - <!--title: '年龄',-->
249   - <!--key: 'age'-->
250   - <!--},-->
251   - <!--{-->
252   - <!--title: '地址',-->
253   - <!--key: 'address'-->
254   - <!--}-->
255   - <!--],-->
256   - <!--data1: [-->
257   - <!--{-->
258   - <!--name: '王小明',-->
259   - <!--age: 18,-->
260   - <!--address: '北京市朝阳区芍药居'-->
261   - <!--},-->
262   - <!--{-->
263   - <!--name: '张小刚',-->
264   - <!--age: 25,-->
265   - <!--address: '北京市海淀区西二旗'-->
266   - <!--},-->
267   - <!--{-->
268   - <!--name: '李小红',-->
269   - <!--age: 30,-->
270   - <!--address: '上海市浦东新区世纪大道'-->
271   - <!--},-->
272   - <!--{-->
273   - <!--name: '周小伟',-->
274   - <!--age: 26,-->
275   - <!--address: '深圳市南山区深南大道'-->
276   - <!--},-->
277   - <!--{-->
278   - <!--name: '王小明',-->
279   - <!--age: 18,-->
280   - <!--address: '北京市朝阳区芍药居'-->
281   - <!--},-->
282   - <!--{-->
283   - <!--name: '张小刚',-->
284   - <!--age: 25,-->
285   - <!--address: '北京市海淀区西二旗'-->
286   - <!--},-->
287   - <!--{-->
288   - <!--name: '李小红',-->
289   - <!--age: 30,-->
290   - <!--address: '上海市浦东新区世纪大道'-->
291   - <!--},-->
292   - <!--{-->
293   - <!--name: '周小伟',-->
294   - <!--age: 26,-->
295   - <!--address: '深圳市南山区深南大道'-->
296   - <!--},-->
297   - <!--{-->
298   - <!--name: '王小明',-->
299   - <!--age: 18,-->
300   - <!--address: '北京市朝阳区芍药居'-->
301   - <!--},-->
302   - <!--{-->
303   - <!--name: '张小刚',-->
304   - <!--age: 25,-->
305   - <!--address: '北京市海淀区西二旗'-->
306   - <!--},-->
307   - <!--{-->
308   - <!--name: '李小红',-->
309   - <!--age: 30,-->
310   - <!--address: '上海市浦东新区世纪大道'-->
311   - <!--},-->
312   - <!--{-->
313   - <!--name: '周小伟',-->
314   - <!--age: 26,-->
315   - <!--address: '深圳市南山区深南大道'-->
316   - <!--},-->
317   - <!--{-->
318   - <!--name: '王小明',-->
319   - <!--age: 18,-->
320   - <!--address: '北京市朝阳区芍药居'-->
321   - <!--},-->
322   - <!--{-->
323   - <!--name: '张小刚',-->
324   - <!--age: 25,-->
325   - <!--address: '北京市海淀区西二旗'-->
326   - <!--},-->
327   - <!--{-->
328   - <!--name: '李小红',-->
329   - <!--age: 30,-->
330   - <!--address: '上海市浦东新区世纪大道'-->
331   - <!--},-->
332   - <!--{-->
333   - <!--name: '周小伟',-->
334   - <!--age: 26,-->
335   - <!--address: '深圳市南山区深南大道'-->
336   - <!--}-->
337   - <!--],-->
338   - <!--columns2: [-->
339   - <!--{-->
340   - <!--title: '姓名',-->
341   - <!--key: 'name'-->
342   - <!--},-->
343   - <!--{-->
344   - <!--title: '年龄',-->
345   - <!--key: 'age'-->
346   - <!--},-->
347   - <!--{-->
348   - <!--title: '地址',-->
349   - <!--key: 'address',-->
350   - <!--render: (h) => {-->
351   - <!--return h('Button', {-->
352   - <!--nativeOn: {-->
353   - <!--click: (event) => {-->
354   - <!--console.log(2)-->
355   - <!--event.stopPropagation();-->
356   - <!--}-->
357   - <!--}-->
358   - <!--}, 'click')-->
359   - <!--}-->
360   - <!--}-->
361   - <!--],-->
362   - <!--data2: [-->
363   - <!--{-->
364   - <!--name: '王小明',-->
365   - <!--age: 18,-->
366   - <!--address: '北京市朝\n阳区芍药居'-->
367   - <!--},-->
368   - <!--{-->
369   - <!--name: '张小刚',-->
370   - <!--age: 25,-->
371   - <!--address: '北京市海,淀区西二旗'-->
372   - <!--},-->
373   - <!--{-->
374   - <!--name: '李小红',-->
375   - <!--age: 30,-->
376   - <!--address: '上海市浦东\r新区世纪大道'-->
377   - <!--},-->
378   - <!--{-->
379   - <!--name: '周小伟',-->
380   - <!--age: 26,-->
381   - <!--address: '深圳市南山区深南大道'-->
382   - <!--}-->
383   - <!--]-->
384   - <!--};-->
385   - <!--},-->
386   - <!--computed: {-->
387   - <!--iconSize () {-->
388   - <!--return this.spanLeft === 5 ? 14 : 24;-->
389   - <!--}-->
390   - <!--},-->
391   - <!--methods: {-->
392   - <!--toggleClick () {-->
393   - <!--if (this.spanLeft === 5) {-->
394   - <!--this.spanLeft = 2;-->
395   - <!--this.spanRight = 22;-->
396   - <!--} else {-->
397   - <!--this.spanLeft = 5;-->
398   - <!--this.spanRight = 19;-->
399   - <!--}-->
400   - <!--},-->
401   - <!--exportCSV () {-->
402   - <!--this.$refs.csvTable.exportCsv({-->
403   - <!--filename: '原始数据',-->
404   - <!--separator: ';',-->
405   - <!--quoted: true-->
406   - <!--});-->
407   - <!--},-->
408   - <!--cc () {-->
409   - <!--console.log(1)-->
410   - <!--}-->
411   - <!--}-->
412   - <!--};-->
413   -<!--</script>-->
414   -
415   -<!--<template>-->
416   - <!--<div>-->
417   - <!--<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>-->
418   - <!--<br>-->
419   - <!--<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>-->
420   - <!--<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>-->
421   - <!--<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>-->
422   - <!--</div>-->
423   -<!--</template>-->
424   -<!--<script>-->
425   - <!--export default {-->
426   - <!--data () {-->
427   - <!--return {-->
428   - <!--columns8: [-->
429   - <!--{-->
430   - <!--"title": "名称",-->
431   - <!--"key": "name",-->
432   - <!--"fixed": "left",-->
433   - <!--"width": 200-->
434   - <!--},-->
435   - <!--{-->
436   - <!--"title": "展示",-->
437   - <!--"key": "show",-->
438   - <!--"width": 150,-->
439   - <!--"sortable": true,-->
440   - <!--filters: [-->
441   - <!--{-->
442   - <!--label: '大于4000',-->
443   - <!--value: 1-->
444   - <!--},-->
445   - <!--{-->
446   - <!--label: '小于4000',-->
447   - <!--value: 2-->
448   - <!--}-->
449   - <!--],-->
450   - <!--filterMultiple: false,-->
451   - <!--filterMethod (value, row) {-->
452   - <!--if (value === 1) {-->
453   - <!--return row.show > 4000;-->
454   - <!--} else if (value === 2) {-->
455   - <!--return row.show < 4000;-->
456   - <!--}-->
457   - <!--}-->
458   - <!--},-->
459   - <!--{-->
460   - <!--"title": "唤醒",-->
461   - <!--"key": "weak",-->
462   - <!--"width": 150,-->
463   - <!--"sortable": true-->
464   - <!--},-->
465   - <!--{-->
466   - <!--"title": "登录",-->
467   - <!--"key": "signin",-->
468   - <!--"width": 150,-->
469   - <!--"sortable": true-->
470   - <!--},-->
471   - <!--{-->
472   - <!--"title": "点击",-->
473   - <!--"key": "click",-->
474   - <!--"width": 150,-->
475   - <!--"sortable": true-->
476   - <!--},-->
477   - <!--{-->
478   - <!--"title": "激活",-->
479   - <!--"key": "active",-->
480   - <!--"width": 150,-->
481   - <!--"sortable": true-->
482   - <!--},-->
483   - <!--{-->
484   - <!--"title": "7日留存",-->
485   - <!--"key": "day7",-->
486   - <!--"width": 150,-->
487   - <!--"sortable": true-->
488   - <!--},-->
489   - <!--{-->
490   - <!--"title": "30日留存",-->
491   - <!--"key": "day30",-->
492   - <!--"width": 150,-->
493   - <!--"sortable": true-->
494   - <!--},-->
495   - <!--{-->
496   - <!--"title": "次日留存",-->
497   - <!--"key": "tomorrow",-->
498   - <!--"width": 150,-->
499   - <!--"sortable": true-->
500   - <!--},-->
501   - <!--{-->
502   - <!--"title": "日活跃",-->
503   - <!--"key": "day",-->
504   - <!--"width": 150,-->
505   - <!--"sortable": true-->
506   - <!--},-->
507   - <!--{-->
508   - <!--"title": "周活跃",-->
509   - <!--"key": "week",-->
510   - <!--"width": 150,-->
511   - <!--"sortable": true-->
512   - <!--},-->
513   - <!--{-->
514   - <!--"title": "月活跃",-->
515   - <!--"key": "month",-->
516   - <!--"width": 150,-->
517   - <!--"sortable": true-->
518   - <!--}-->
519   - <!--],-->
520   - <!--data7: [-->
521   - <!--{-->
522   - <!--"name": "推广名称1",-->
523   - <!--"fav": 0,-->
524   - <!--"show": 7302,-->
525   - <!--"weak": 5627,-->
526   - <!--"signin": 1563,-->
527   - <!--"click": 4254,-->
528   - <!--"active": 1438,-->
529   - <!--"day7": 274,-->
530   - <!--"day30": 285,-->
531   - <!--"tomorrow": 1727,-->
532   - <!--"day": 558,-->
533   - <!--"week": 4440,-->
534   - <!--"month": 5610-->
535   - <!--},-->
536   - <!--{-->
537   - <!--"name": "推广名称2",-->
538   - <!--"fav": 0,-->
539   - <!--"show": 4720,-->
540   - <!--"weak": 4086,-->
541   - <!--"signin": 3792,-->
542   - <!--"click": 8690,-->
543   - <!--"active": 8470,-->
544   - <!--"day7": 8172,-->
545   - <!--"day30": 5197,-->
546   - <!--"tomorrow": 1684,-->
547   - <!--"day": 2593,-->
548   - <!--"week": 2507,-->
549   - <!--"month": 1537-->
550   - <!--},-->
551   - <!--{-->
552   - <!--"name": "推广名称3",-->
553   - <!--"fav": 0,-->
554   - <!--"show": 7181,-->
555   - <!--"weak": 8007,-->
556   - <!--"signin": 8477,-->
557   - <!--"click": 1879,-->
558   - <!--"active": 16,-->
559   - <!--"day7": 2249,-->
560   - <!--"day30": 3450,-->
561   - <!--"tomorrow": 377,-->
562   - <!--"day": 1561,-->
563   - <!--"week": 3219,-->
564   - <!--"month": 1588-->
565   - <!--},-->
566   - <!--{-->
567   - <!--"name": "推广名称4",-->
568   - <!--"fav": 0,-->
569   - <!--"show": 9911,-->
570   - <!--"weak": 8976,-->
571   - <!--"signin": 8807,-->
572   - <!--"click": 8050,-->
573   - <!--"active": 7668,-->
574   - <!--"day7": 1547,-->
575   - <!--"day30": 2357,-->
576   - <!--"tomorrow": 7278,-->
577   - <!--"day": 5309,-->
578   - <!--"week": 1655,-->
579   - <!--"month": 9043-->
580   - <!--},-->
581   - <!--{-->
582   - <!--"name": "推广名称5",-->
583   - <!--"fav": 0,-->
584   - <!--"show": 934,-->
585   - <!--"weak": 1394,-->
586   - <!--"signin": 6463,-->
587   - <!--"click": 5278,-->
588   - <!--"active": 9256,-->
589   - <!--"day7": 209,-->
590   - <!--"day30": 3563,-->
591   - <!--"tomorrow": 8285,-->
592   - <!--"day": 1230,-->
593   - <!--"week": 4840,-->
594   - <!--"month": 9908-->
595   - <!--},-->
596   - <!--{-->
597   - <!--"name": "推广名称6",-->
598   - <!--"fav": 0,-->
599   - <!--"show": 6856,-->
600   - <!--"weak": 1608,-->
601   - <!--"signin": 457,-->
602   - <!--"click": 4949,-->
603   - <!--"active": 2909,-->
604   - <!--"day7": 4525,-->
605   - <!--"day30": 6171,-->
606   - <!--"tomorrow": 1920,-->
607   - <!--"day": 1966,-->
608   - <!--"week": 904,-->
609   - <!--"month": 6851-->
610   - <!--},-->
611   - <!--{-->
612   - <!--"name": "推广名称7",-->
613   - <!--"fav": 0,-->
614   - <!--"show": 5107,-->
615   - <!--"weak": 6407,-->
616   - <!--"signin": 4166,-->
617   - <!--"click": 7970,-->
618   - <!--"active": 1002,-->
619   - <!--"day7": 8701,-->
620   - <!--"day30": 9040,-->
621   - <!--"tomorrow": 7632,-->
622   - <!--"day": 4061,-->
623   - <!--"week": 4359,-->
624   - <!--"month": 3676-->
625   - <!--},-->
626   - <!--{-->
627   - <!--"name": "推广名称8",-->
628   - <!--"fav": 0,-->
629   - <!--"show": 862,-->
630   - <!--"weak": 6520,-->
631   - <!--"signin": 6696,-->
632   - <!--"click": 3209,-->
633   - <!--"active": 6801,-->
634   - <!--"day7": 6364,-->
635   - <!--"day30": 6850,-->
636   - <!--"tomorrow": 9408,-->
637   - <!--"day": 2481,-->
638   - <!--"week": 1479,-->
639   - <!--"month": 2346-->
640   - <!--},-->
641   - <!--{-->
642   - <!--"name": "推广名称9",-->
643   - <!--"fav": 0,-->
644   - <!--"show": 567,-->
645   - <!--"weak": 5859,-->
646   - <!--"signin": 128,-->
647   - <!--"click": 6593,-->
648   - <!--"active": 1971,-->
649   - <!--"day7": 7596,-->
650   - <!--"day30": 3546,-->
651   - <!--"tomorrow": 6641,-->
652   - <!--"day": 1611,-->
653   - <!--"week": 5534,-->
654   - <!--"month": 3190-->
655   - <!--},-->
656   - <!--{-->
657   - <!--"name": "推广名称10",-->
658   - <!--"fav": 0,-->
659   - <!--"show": 3651,-->
660   - <!--"weak": 1819,-->
661   - <!--"signin": 4595,-->
662   - <!--"click": 7499,-->
663   - <!--"active": 7405,-->
664   - <!--"day7": 8710,-->
665   - <!--"day30": 5518,-->
666   - <!--"tomorrow": 428,-->
667   - <!--"day": 9768,-->
668   - <!--"week": 2864,-->
669   - <!--"month": 5811-->
670   - <!--}-->
671   - <!--]-->
672   - <!--}-->
673   - <!--},-->
674   - <!--methods: {-->
675   - <!--exportData (type) {-->
676   - <!--if (type === 1) {-->
677   - <!--this.$refs.table.exportCsv({-->
678   - <!--filename: '原始数据',-->
679   - <!--separator: ';',-->
680   - <!--quoted: true,-->
681   - <!--callback (data) {-->
682   - <!--console.log(data);-->
683   - <!--}-->
684   - <!--});-->
685   - <!--} else if (type === 2) {-->
686   - <!--this.$refs.table.exportCsv({-->
687   - <!--filename: '排序和过滤后的数据',-->
688   - <!--original: false-->
689   - <!--});-->
690   - <!--} else if (type === 3) {-->
691   - <!--this.$refs.table.exportCsv({-->
692   - <!--filename: '自定义数据',-->
693   - <!--columns: this.columns8.filter((col, index) => index < 4),-->
694   - <!--data: this.data7.filter((data, index) => index < 4)-->
695   - <!--});-->
696   - <!--}-->
697   - <!--}-->
698   - <!--}-->
699   - <!--}-->
700   -<!--</script>-->
701   -
702   -<!--<template>-->
703   - <!--<Table :columns="columns10" :data="data9"></Table>-->
704   -<!--</template>-->
705   -<!--<script>-->
706   - <!--import expandRow from '../components/tableExpand.vue';-->
707   - <!--export default {-->
708   - <!--components: { expandRow },-->
709   - <!--data () {-->
710   - <!--return {-->
711   - <!--columns10: [-->
712   - <!--{-->
713   - <!--type: 'expand',-->
714   - <!--width: 50,-->
715   - <!--render: (h, params) => {-->
716   - <!--return h(expandRow, {-->
717   - <!--props: {-->
718   - <!--row: params.row-->
719   - <!--}-->
720   - <!--})-->
721   - <!--}-->
722   - <!--},-->
723   - <!--{-->
724   - <!--title: 'Name',-->
725   - <!--key: 'name'-->
726   - <!--},-->
727   - <!--{-->
728   - <!--title: 'Age',-->
729   - <!--key: 'age',-->
730   - <!--fixed: 'right'-->
731   - <!--},-->
732   - <!--{-->
733   - <!--title: 'Address',-->
734   - <!--key: 'address',-->
735   - <!--fixed: 'right'-->
736   - <!--}-->
737   - <!--],-->
738   - <!--data9: [-->
739   - <!--{-->
740   - <!--name: 'John Brown',-->
741   - <!--age: 18,-->
742   - <!--address: 'New York No. 1 Lake Park',-->
743   - <!--job: 'Data engineer',-->
744   - <!--interest: 'badminton',-->
745   - <!--birthday: '1991-05-14',-->
746   - <!--book: 'Steve Jobs',-->
747   - <!--movie: 'The Prestige',-->
748   - <!--music: 'I Cry'-->
749   - <!--},-->
750   - <!--{-->
751   - <!--name: 'Jim Green',-->
752   - <!--age: 25,-->
753   - <!--address: 'London No. 1 Lake Park',-->
754   - <!--job: 'Data Scientist',-->
755   - <!--interest: 'volleyball',-->
756   - <!--birthday: '1989-03-18',-->
757   - <!--book: 'My Struggle',-->
758   - <!--movie: 'Roman Holiday',-->
759   - <!--music: 'My Heart Will Go On'-->
760   - <!--},-->
761   - <!--{-->
762   - <!--name: 'Joe Black',-->
763   - <!--age: 30,-->
764   - <!--address: 'Sydney No. 1 Lake Park',-->
765   - <!--job: 'Data Product Manager',-->
766   - <!--interest: 'tennis',-->
767   - <!--birthday: '1992-01-31',-->
768   - <!--book: 'Win',-->
769   - <!--movie: 'Jobs',-->
770   - <!--music: 'Don’t Cry'-->
771   - <!--},-->
772   - <!--{-->
773   - <!--name: 'Jon Snow',-->
774   - <!--age: 26,-->
775   - <!--address: 'Ottawa No. 2 Lake Park',-->
776   - <!--job: 'Data Analyst',-->
777   - <!--interest: 'snooker',-->
778   - <!--birthday: '1988-7-25',-->
779   - <!--book: 'A Dream in Red Mansions',-->
780   - <!--movie: 'A Chinese Ghost Story',-->
781   - <!--music: 'actor'-->
782   - <!--}-->
783   - <!--]-->
784   - <!--}-->
785   - <!--}-->
786   - <!--}-->
787   -<!--</script>-->
788   -
789   -
790 1 <template>
791   - <div>
792   - <div style="width: 550px;">
793   - <Table height="200" border :columns="columns2" :data="data4"></Table>
794   - </div>
795   - <br><br><br>
796   - <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
797   - </div>
  2 + <Table border :columns="columns6" :data="data5"></Table>
798 3 </template>
799 4 <script>
800 5 export default {
801 6 data () {
802 7 return {
803   - columns2: [
  8 + columns6: [
  9 + {
  10 + title: 'Date',
  11 + key: 'date'
  12 + },
804 13 {
805 14 title: 'Name',
806   - key: 'name',
807   - width: 100,
808   -// fixed: 'left'
  15 + key: 'name'
809 16 },
810 17 {
811 18 title: 'Age',
812 19 key: 'age',
813   - width: 100
814   - },
815   - {
816   - title: 'Province',
817   - key: 'province',
818   - width: 100
819   - },
820   - {
821   - title: 'City',
822   - key: 'city',
823   - width: 100
  20 + filters: [
  21 + {
  22 + label: 'Greater than 25',
  23 + value: 1
  24 + },
  25 + {
  26 + label: 'Less than 25',
  27 + value: 2
  28 + }
  29 + ],
  30 + filterMultiple: false,
  31 + filterMethod (value, row) {
  32 + if (value === 1) {
  33 + return row.age > 25;
  34 + } else if (value === 2) {
  35 + return row.age < 25;
  36 + }
  37 + }
824 38 },
825 39 {
826 40 title: 'Address',
827 41 key: 'address',
828   - width: 200
829   - },
830   - {
831   - title: 'Postcode',
832   - key: 'zip',
833   - width: 100
834   - },
835   - {
836   - title: 'Action',
837   - key: 'action',
838   - fixed: 'right',
839   - width: 120,
840   - render: (h, params) => {
841   - return h('div', [
842   - h('Button', {
843   - props: {
844   - type: 'text',
845   - size: 'small'
846   - }
847   - }, 'View'),
848   - h('Button', {
849   - props: {
850   - type: 'text',
851   - size: 'small'
852   - }
853   - }, 'Edit')
854   - ]);
  42 + filters: [
  43 + {
  44 + label: 'New York',
  45 + value: 'New York'
  46 + },
  47 + {
  48 + label: 'London',
  49 + value: 'London'
  50 + },
  51 + {
  52 + label: 'Sydney',
  53 + value: 'Sydney'
  54 + }
  55 + ],
  56 + filterMethod (value, row) {
  57 + return row.address.indexOf(value) > -1;
855 58 }
856 59 }
857 60 ],
858   - data4: [
  61 + data5: [
859 62 {
860 63 name: 'John Brown',
861 64 age: 18,
862 65 address: 'New York No. 1 Lake Park',
863   - province: 'America',
864   - city: 'New York',
865   - zip: 100000
  66 + date: '2016-10-03'
866 67 },
867 68 {
868 69 name: 'Jim Green',
869 70 age: 24,
870   - address: 'Washington, D.C. No. 1 Lake Park',
871   - province: 'America',
872   - city: 'Washington, D.C.',
873   - zip: 100000
  71 + address: 'London No. 1 Lake Park',
  72 + date: '2016-10-01'
874 73 },
875 74 {
876 75 name: 'Joe Black',
877 76 age: 30,
878 77 address: 'Sydney No. 1 Lake Park',
879   - province: 'Australian',
880   - city: 'Sydney',
881   - zip: 100000
  78 + date: '2016-10-02'
882 79 },
883 80 {
884 81 name: 'Jon Snow',
885 82 age: 26,
886 83 address: 'Ottawa No. 2 Lake Park',
887   - province: 'Canada',
888   - city: 'Ottawa',
889   - zip: 100000
890   - },
891   - {
892   - name: 'John Brown',
893   - age: 18,
894   - address: 'New York No. 1 Lake Park',
895   - province: 'America',
896   - city: 'New York',
897   - zip: 100000
898   - },
899   - {
900   - name: 'Jim Green',
901   - age: 24,
902   - address: 'Washington, D.C. No. 1 Lake Park',
903   - province: 'America',
904   - city: 'Washington, D.C.',
905   - zip: 100000
906   - },
907   - {
908   - name: 'Joe Black',
909   - age: 30,
910   - address: 'Sydney No. 1 Lake Park',
911   - province: 'Australian',
912   - city: 'Sydney',
913   - zip: 100000
914   - },
915   - {
916   - name: 'Jon Snow',
917   - age: 26,
918   - address: 'Ottawa No. 2 Lake Park',
919   - province: 'Canada',
920   - city: 'Ottawa',
921   - zip: 100000
  84 + date: '2016-10-04'
922 85 }
923   - ]
  86 + ],
924 87 }
925 88 }
926 89 }
927 90 </script>
928   -
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @ceeb936
... ... @@ -30,7 +30,7 @@
30 30 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
31 31 <div :class="[prefixCls + '-filter-list-item']">
32 32 <checkbox-group v-model="column._filterChecked">
33   - <checkbox v-for="item in column.filters" :key="column._columnKey" :label="item.value">{{ item.label }}</checkbox>
  33 + <checkbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{ item.label }}</checkbox>
34 34 </checkbox-group>
35 35 </div>
36 36 <div :class="[prefixCls + '-filter-footer']">
... ...