Commit 73dc2dedfe33817ed18775c330c881fc6d588b4b
Committed by
GitHub
GitHub
Merge pull request #200 from rijn/194
Fade table body when there is no data
Showing
2 changed files
with
26 additions
and
16 deletions
Show diff stats
src/components/table/table.vue
| ... | ... | @@ -11,7 +11,8 @@ |
| 11 | 11 | :columns-width="columnsWidth" |
| 12 | 12 | :data="rebuildData"></table-head> |
| 13 | 13 | </div> |
| 14 | - <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> | |
| 14 | + <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll" | |
| 15 | + v-show="!((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))"> | |
| 15 | 16 | <table-body |
| 16 | 17 | v-ref:tbody |
| 17 | 18 | :prefix-cls="prefixCls" |
| ... | ... | @@ -21,6 +22,19 @@ |
| 21 | 22 | :columns-width="columnsWidth" |
| 22 | 23 | :obj-data="objData"></table-body> |
| 23 | 24 | </div> |
| 25 | + <div | |
| 26 | + :class="[prefixCls + '-tip']" | |
| 27 | + v-else> | |
| 28 | + <table cellspacing="0" cellpadding="0" border="0"> | |
| 29 | + <tbody> | |
| 30 | + <tr> | |
| 31 | + <td :style="{ 'height': bodyStyle.height }"> | |
| 32 | + {{{!data || data.length === 0 ? noDataText : noFilteredDataText}}} | |
| 33 | + </td> | |
| 34 | + </tr> | |
| 35 | + </tbody> | |
| 36 | + </table> | |
| 37 | + </div> | |
| 24 | 38 | <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> |
| 25 | 39 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> |
| 26 | 40 | <table-head |
| ... | ... | @@ -65,19 +79,6 @@ |
| 65 | 79 | :obj-data="objData"></table-body> |
| 66 | 80 | </div> |
| 67 | 81 | </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> | |
| 81 | 82 | <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> |
| 82 | 83 | </div> |
| 83 | 84 | </div> | ... | ... |
test/routers/table.vue
| ... | ... | @@ -2,7 +2,15 @@ |
| 2 | 2 | <!--<i-select :model.sync="model1" style="width:200px">--> |
| 3 | 3 | <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> |
| 4 | 4 | <!--</i-select>--> |
| 5 | - <i-table border :content="self" :columns="columns7" :data="data6"></i-table> | |
| 5 | + <i-button @click="data7 = data6">Dispatch</i-button> | |
| 6 | + <br/> | |
| 7 | + <i-table border :content="self" :columns="columns7" :data="data7"></i-table> | |
| 8 | + <br/> | |
| 9 | + <i-table border :content="self" :columns="columns7" :data="data7" size="small"></i-table> | |
| 10 | + <br/> | |
| 11 | + <i-table border :content="self" :columns="columns7" :data="data7" size="large"></i-table> | |
| 12 | + <br/> | |
| 13 | + <i-table border :content="self" :columns="columns7" :data="data7" height="600"></i-table> | |
| 6 | 14 | </template> |
| 7 | 15 | <script> |
| 8 | 16 | export default { |
| ... | ... | @@ -86,7 +94,8 @@ |
| 86 | 94 | age: 26, |
| 87 | 95 | address: '深圳市南山区深南大道' |
| 88 | 96 | } |
| 89 | - ] | |
| 97 | + ], | |
| 98 | + data7: [] | |
| 90 | 99 | } |
| 91 | 100 | }, |
| 92 | 101 | methods: { | ... | ... |