other / mew-iview

Commit f2a051a1001e43b6411ade92ddb83530fc633e0c

Authored by 梁灏
1 parent 728d5812

publish 0.9.9-rc-6 

Table size add default
Table height bug fixed
Showing 3 changed files with 138 additions and 75 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.9-rc-5", 3 + "version": "0.9.9-rc-6",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/table/table.vue
  Show/Hide comments   View file @f2a051a
@@ -92,7 +92,7 @@ @@ -92,7 +92,7 @@
92 }, 92 },
93 size: { 93 size: {
94 validator (value) { 94 validator (value) {
95 - return oneOf(value, ['small', 'large']); 95 + return oneOf(value, ['small', 'large', 'default']);
96 } 96 }
97 }, 97 },
98 width: { 98 width: {
@@ -341,6 +341,8 @@ @@ -341,6 +341,8 @@
341 const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0; 341 const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
342 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight; 342 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
343 }) 343 })
  344 + } else {
  345 + this.bodyHeight = 0;
344 } 346 }
345 }, 347 },
346 hideColumnFilter () { 348 hideColumnFilter () {
@@ -542,6 +544,7 @@ @@ -542,6 +544,7 @@
542 }, 544 },
543 columns: { 545 columns: {
544 handler () { 546 handler () {
  547 + // todo 这里有性能问题，可能是左右固定计算属性影响的
545 this.cloneColumns = this.makeColumns(); 548 this.cloneColumns = this.makeColumns();
546 this.rebuildData = this.makeDataWithSortAndFilter(); 549 this.rebuildData = this.makeDataWithSortAndFilter();
547 this.handleResize(); 550 this.handleResize();
test/routers/table.vue
  Show/Hide comments   View file @f2a051a
1 <template> 1 <template>
2 - <i-table border :columns="columns6" :data="data5"></i-table> 2 + <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
  3 + <checkbox value="show">展示</checkbox>
  4 + <checkbox value="weak">唤醒</checkbox>
  5 + <checkbox value="signin">登录</checkbox>
  6 + <checkbox value="click">点击</checkbox>
  7 + <checkbox value="active">激活</checkbox>
  8 + <checkbox value="day7">7日留存</checkbox>
  9 + <checkbox value="day30">30日留存</checkbox>
  10 + <checkbox value="tomorrow">次日留存</checkbox>
  11 + <checkbox value="day">日活跃</checkbox>
  12 + <checkbox value="week">周活跃</checkbox>
  13 + <checkbox value="month">月活跃</checkbox>
  14 + </checkbox-group>
  15 + <i-table :content="self" :data="tableData2" :columns="tableColumns2" border></i-table>
3 </template> 16 </template>
4 <script> 17 <script>
5 export default { 18 export default {
6 data () { 19 data () {
7 return { 20 return {
8 - columns6: [  
9 - {  
10 - title: '日期',  
11 - key: 'date' 21 + self: this,
  22 + tableData2: this.mockTableData2(),
  23 + tableColumns2: [],
  24 + tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
  25 + }
  26 + },
  27 + methods: {
  28 + mockTableData2 () {
  29 + let data = [];
  30 + function getNum() {
  31 + return Math.floor(Math.random () * 10000 + 1);
  32 + }
  33 + for (let i = 0; i < 10; i++) {
  34 + data.push({
  35 + name: '推广名称' + (i+1),
  36 + fav: 0,
  37 + show: getNum(),
  38 + weak: getNum(),
  39 + signin: getNum(),
  40 + click: getNum(),
  41 + active: getNum(),
  42 + day7: getNum(),
  43 + day30: getNum(),
  44 + tomorrow: getNum(),
  45 + day: getNum(),
  46 + week: getNum(),
  47 + month: getNum()
  48 + })
  49 + }
  50 + return data;
  51 + },
  52 + getTable2Columns () {
  53 + const table2ColumnList = {
  54 + name: {
  55 + title: '名称',
  56 + key: 'name',
  57 + fixed: 'left',
  58 + width: 200,
  59 + render (row, column, index) {
  60 + return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
  61 + <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
  62 + <span>${row.name}</span>`;
  63 + }
12 }, 64 },
13 - {  
14 - title: '姓名',  
15 - key: 'name' 65 + show: {
  66 + title: '展示',
  67 + key: 'show',
  68 + width: 150,
  69 + sortable: true
16 }, 70 },
17 - {  
18 - title: '年龄',  
19 - key: 'age',  
20 - filters: [  
21 - {  
22 - label: '大于25岁',  
23 - value: 1  
24 - },  
25 - {  
26 - label: '小于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 - } 71 + weak: {
  72 + title: '唤醒',
  73 + key: 'weak',
  74 + width: 150,
  75 + sortable: true
38 }, 76 },
39 - {  
40 - title: '地址',  
41 - key: 'address',  
42 - filters: [  
43 - {  
44 - label: '北京',  
45 - value: '北京'  
46 - },  
47 - {  
48 - label: '上海',  
49 - value: '上海'  
50 - },  
51 - {  
52 - label: '深圳',  
53 - value: '深圳'  
54 - }  
55 - ],  
56 - filterMethod (value, row) {  
57 - return row.address.indexOf(value) > -1;  
58 - }  
59 - }  
60 - ],  
61 - data5: [  
62 - {  
63 - name: '王小明',  
64 - age: 18,  
65 - address: '北京市朝阳区芍药居',  
66 - date: '2016-10-03' 77 + signin: {
  78 + title: '登录',
  79 + key: 'signin',
  80 + width: 150,
  81 + sortable: true
  82 + },
  83 + click: {
  84 + title: '点击',
  85 + key: 'click',
  86 + width: 150,
  87 + sortable: true
  88 + },
  89 + active: {
  90 + title: '激活',
  91 + key: 'active',
  92 + width: 150,
  93 + sortable: true
  94 + },
  95 + day7: {
  96 + title: '7日留存',
  97 + key: 'day7',
  98 + width: 150,
  99 + sortable: true
  100 + },
  101 + day30: {
  102 + title: '30日留存',
  103 + key: 'day30',
  104 + width: 150,
  105 + sortable: true
  106 + },
  107 + tomorrow: {
  108 + title: '次日留存',
  109 + key: 'tomorrow',
  110 + width: 150,
  111 + sortable: true
67 }, 112 },
68 - {  
69 - name: '张小刚',  
70 - age: 25,  
71 - address: '北京市海淀区西二旗',  
72 - date: '2016-10-01' 113 + day: {
  114 + title: '日活跃',
  115 + key: 'day',
  116 + width: 150,
  117 + sortable: true
73 }, 118 },
74 - {  
75 - name: '李小红',  
76 - age: 30,  
77 - address: '上海市浦东新区世纪大道',  
78 - date: '2016-10-02' 119 + week: {
  120 + title: '周活跃',
  121 + key: 'week',
  122 + width: 150,
  123 + sortable: true
79 }, 124 },
80 - {  
81 - name: '周小伟',  
82 - age: 26,  
83 - address: '深圳市南山区深南大道',  
84 - date: '2016-10-04' 125 + month: {
  126 + title: '月活跃',
  127 + key: 'month',
  128 + width: 150,
  129 + sortable: true
85 } 130 }
86 - ] 131 + };
  132 +
  133 + let data = [table2ColumnList.name];
  134 +
  135 + this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
  136 +
  137 + return data;
  138 + },
  139 + changeTableColumns () {
  140 + this.tableColumns2 = this.getTable2Columns();
  141 + },
  142 + toggleFav (index) {
  143 + this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
87 } 144 }
  145 + },
  146 + ready () {
  147 + this.changeTableColumns();
88 } 148 }
89 } 149 }
90 </script> 150 </script>