chenhaodong / mew-iview

Commit cf7887ba61be1d741c6e2ae73260b58ee842ed18

Authored by Rijn
1 parent ba3a2f1e

Fixed #151 

Added no-data and no-filtered-data properties to the component Table
Showing 3 changed files with 142 additions and 10 deletions   Show diff stats
Inline Side-by-side
src/components/table/table.vue
  Show/Hide comments   View file @cf7887b
@@ -65,6 +65,19 @@ @@ -65,6 +65,19 @@
65 :obj-data="objData"></table-body> 65 :obj-data="objData"></table-body>
66 </div> 66 </div>
67 </div> 67 </div>
  68 + <div
  69 + :class="[prefixCls + '-tip']"
  70 + v-show="(!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0))">
  71 + <table cellspacing="0" cellpadding="0" border="0">
  72 + <tbody>
  73 + <tr>
  74 + <td>
  75 + {{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
  76 + </td>
  77 + </tr>
  78 + </tbody>
  79 + </table>
  80 + </div>
68 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> 81 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
69 </div> 82 </div>
70 </div> 83 </div>
@@ -127,6 +140,14 @@ @@ -127,6 +140,14 @@
127 }, 140 },
128 content: { 141 content: {
129 type: Object 142 type: Object
  143 + },
  144 + noDataText: {
  145 + type: String,
  146 + default: '无数据'
  147 + },
  148 + noFilteredDataText: {
  149 + type: String,
  150 + default: '无筛选结果'
130 } 151 }
131 }, 152 },
132 data () { 153 data () {
src/styles/components/table.less
  Show/Hide comments   View file @cf7887b
@@ -305,4 +305,14 @@ @@ -305,4 +305,14 @@
305 padding: 0; 305 padding: 0;
306 } 306 }
307 } 307 }
  308 +
  309 + &-tip {
  310 + table {
  311 + width: 100%;
  312 +
  313 + td {
  314 + text-align: center;
  315 + }
  316 + }
  317 + }
308 } 318 }
test/routers/table.vue
  Show/Hide comments   View file @cf7887b
@@ -5,6 +5,66 @@ @@ -5,6 +5,66 @@
5 <i-table 5 <i-table
6 border 6 border
7 :columns="columns6" 7 :columns="columns6"
  8 + width="500"
  9 + :data="[]"
  10 + :highlight-row="true"
  11 + @on-current-change="onCurrentChange"
  12 + @on-dblclick="onDblclick">
  13 + </i-table>
  14 +
  15 + <br/>
  16 +
  17 + <i-table
  18 + border
  19 + :columns="columns7"
  20 + :data="[]"
  21 + no-data-text="No Data"
  22 + :highlight-row="true"
  23 + @on-current-change="onCurrentChange"
  24 + @on-dblclick="onDblclick">
  25 + </i-table>
  26 +
  27 + <br/>
  28 +
  29 + <i-table
  30 + border
  31 + :columns="columns7"
  32 + :data="[]"
  33 + size="small"
  34 + :highlight-row="true"
  35 + @on-current-change="onCurrentChange"
  36 + @on-dblclick="onDblclick">
  37 + </i-table>
  38 +
  39 + <br/>
  40 +
  41 + <i-table
  42 + border
  43 + :columns="columns7"
  44 + :data="[]"
  45 + size="large"
  46 + :highlight-row="true"
  47 + @on-current-change="onCurrentChange"
  48 + @on-dblclick="onDblclick">
  49 + </i-table>
  50 +
  51 + <br/>
  52 +
  53 + <i-table
  54 + border
  55 + :columns="columns7"
  56 + :data="data5"
  57 + :highlight-row="true"
  58 + @on-current-change="onCurrentChange"
  59 + @on-dblclick="onDblclick">
  60 + </i-table>
  61 +
  62 + <br/>
  63 +
  64 + <i-table
  65 + border
  66 + :columns="columns6"
  67 + width="500"
8 :data="data5" 68 :data="data5"
9 :highlight-row="true" 69 :highlight-row="true"
10 @on-current-change="onCurrentChange" 70 @on-current-change="onCurrentChange"
@@ -19,19 +79,24 @@ @@ -19,19 +79,24 @@
19 { 79 {
20 type: 'selection', 80 type: 'selection',
21 width: 60, 81 width: 60,
22 - align: 'center' 82 + align: 'center',
  83 + width: 100
23 }, 84 },
24 { 85 {
25 title: '日期', 86 title: '日期',
26 - key: 'date' 87 + key: 'date',
  88 + fixed: 'left',
  89 + width: 100
27 }, 90 },
28 { 91 {
29 title: '姓名', 92 title: '姓名',
30 - key: 'name' 93 + key: 'name',
  94 + width: 100
31 }, 95 },
32 { 96 {
33 title: '年龄', 97 title: '年龄',
34 key: 'age', 98 key: 'age',
  99 + width: 100,
35 filters: [ 100 filters: [
36 { 101 {
37 label: '大于25岁', 102 label: '大于25岁',
@@ -54,6 +119,49 @@ @@ -54,6 +119,49 @@
54 { 119 {
55 title: '地址', 120 title: '地址',
56 key: 'address', 121 key: 'address',
  122 + width: 100,
  123 + filters: [
  124 + {
  125 + label: '北京',
  126 + value: '北京'
  127 + },
  128 + {
  129 + label: '上海',
  130 + value: '上海'
  131 + },
  132 + {
  133 + label: '深圳',
  134 + value: '深圳'
  135 + }
  136 + ],
  137 + filterMethod (value, row) {
  138 + return row.address.indexOf(value) > -1;
  139 + }
  140 + },
  141 + {
  142 + title: '长文本',
  143 + key: 'longText',
  144 + width: 100,
  145 + ellipsis: false
  146 + }
  147 + ],
  148 + columns7: [
  149 + {
  150 + type: 'selection',
  151 + width: 60,
  152 + align: 'center'
  153 + },
  154 + {
  155 + title: '日期',
  156 + key: 'date'
  157 + },
  158 + {
  159 + title: '姓名',
  160 + key: 'name'
  161 + },
  162 + {
  163 + title: '地址',
  164 + key: 'address',
57 filters: [ 165 filters: [
58 { 166 {
59 label: '北京', 167 label: '北京',
@@ -99,13 +207,6 @@ @@ -99,13 +207,6 @@
99 address: '上海市浦东新区世纪大道', 207 address: '上海市浦东新区世纪大道',
100 date: '2016-10-02', 208 date: '2016-10-02',
101 longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 209 longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
102 - },  
103 - {  
104 - name: '周小伟',  
105 - age: 26,  
106 - address: '深圳市南山区深南大道',  
107 - date: '2016-10-04',  
108 - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'  
109 } 210 }
110 ], 211 ],
111 currentRow: null 212 currentRow: null