chenhaodong / mew-iview

Commit f23d6ba1ac8cda868ad2f73130f1574bb075cd8e

Authored by Aresn
Committed by GitHub
2 parents ba3a2f1e cf7887ba

Merge pull request #168 from rijn/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 @f23d6ba
... ... @@ -65,6 +65,19 @@
65 65 :obj-data="objData"></table-body>
66 66 </div>
67 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 81 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
69 82 </div>
70 83 </div>
... ... @@ -127,6 +140,14 @@
127 140 },
128 141 content: {
129 142 type: Object
  143 + },
  144 + noDataText: {
  145 + type: String,
  146 + default: '无数据'
  147 + },
  148 + noFilteredDataText: {
  149 + type: String,
  150 + default: '无筛选结果'
130 151 }
131 152 },
132 153 data () {
... ...
src/styles/components/table.less
  Show/Hide comments   View file @f23d6ba
... ... @@ -305,4 +305,14 @@
305 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 @f23d6ba
... ... @@ -5,6 +5,66 @@
5 5 <i-table
6 6 border
7 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 68 :data="data5"
9 69 :highlight-row="true"
10 70 @on-current-change="onCurrentChange"
... ... @@ -19,19 +79,24 @@
19 79 {
20 80 type: 'selection',
21 81 width: 60,
22   - align: 'center'
  82 + align: 'center',
  83 + width: 100
23 84 },
24 85 {
25 86 title: '日期',
26   - key: 'date'
  87 + key: 'date',
  88 + fixed: 'left',
  89 + width: 100
27 90 },
28 91 {
29 92 title: '姓名',
30   - key: 'name'
  93 + key: 'name',
  94 + width: 100
31 95 },
32 96 {
33 97 title: '年龄',
34 98 key: 'age',
  99 + width: 100,
35 100 filters: [
36 101 {
37 102 label: '大于25岁',
... ... @@ -54,6 +119,49 @@
54 119 {
55 120 title: '地址',
56 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 165 filters: [
58 166 {
59 167 label: '北京',
... ... @@ -99,13 +207,6 @@
99 207 address: '上海市浦东新区世纪大道',
100 208 date: '2016-10-02',
101 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 212 currentRow: null
... ...