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
package.json
  Show/Hide comments   View file @f2a051a
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.9-rc-5",
  3 + "version": "0.9.9-rc-6",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/table/table.vue
  Show/Hide comments   View file @f2a051a
... ... @@ -92,7 +92,7 @@
92 92 },
93 93 size: {
94 94 validator (value) {
95   - return oneOf(value, ['small', 'large']);
  95 + return oneOf(value, ['small', 'large', 'default']);
96 96 }
97 97 },
98 98 width: {
... ... @@ -341,6 +341,8 @@
341 341 const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
342 342 this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
343 343 })
  344 + } else {
  345 + this.bodyHeight = 0;
344 346 }
345 347 },
346 348 hideColumnFilter () {
... ... @@ -542,6 +544,7 @@
542 544 },
543 545 columns: {
544 546 handler () {
  547 + // todo 这里有性能问题，可能是左右固定计算属性影响的
545 548 this.cloneColumns = this.makeColumns();
546 549 this.rebuildData = this.makeDataWithSortAndFilter();
547 550 this.handleResize();
... ...
test/routers/table.vue
  Show/Hide comments   View file @f2a051a
1 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 16 </template>
4 17 <script>
5 18 export default {
6 19 data () {
7 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 150 </script>
... ...