Commit 73dc2dedfe33817ed18775c330c881fc6d588b4b
Committed by
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,7 +11,8 @@ | ||
| 11 | :columns-width="columnsWidth" | 11 | :columns-width="columnsWidth" |
| 12 | :data="rebuildData"></table-head> | 12 | :data="rebuildData"></table-head> |
| 13 | </div> | 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 | <table-body | 16 | <table-body |
| 16 | v-ref:tbody | 17 | v-ref:tbody |
| 17 | :prefix-cls="prefixCls" | 18 | :prefix-cls="prefixCls" |
| @@ -21,6 +22,19 @@ | @@ -21,6 +22,19 @@ | ||
| 21 | :columns-width="columnsWidth" | 22 | :columns-width="columnsWidth" |
| 22 | :obj-data="objData"></table-body> | 23 | :obj-data="objData"></table-body> |
| 23 | </div> | 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 | <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> | 38 | <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> |
| 25 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> | 39 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> |
| 26 | <table-head | 40 | <table-head |
| @@ -65,19 +79,6 @@ | @@ -65,19 +79,6 @@ | ||
| 65 | :obj-data="objData"></table-body> | 79 | :obj-data="objData"></table-body> |
| 66 | </div> | 80 | </div> |
| 67 | </div> | 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 | <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> | 82 | <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> |
| 82 | </div> | 83 | </div> |
| 83 | </div> | 84 | </div> |
test/routers/table.vue
| @@ -2,7 +2,15 @@ | @@ -2,7 +2,15 @@ | ||
| 2 | <!--<i-select :model.sync="model1" style="width:200px">--> | 2 | <!--<i-select :model.sync="model1" style="width:200px">--> |
| 3 | <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> | 3 | <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> |
| 4 | <!--</i-select>--> | 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 | </template> | 14 | </template> |
| 7 | <script> | 15 | <script> |
| 8 | export default { | 16 | export default { |
| @@ -86,7 +94,8 @@ | @@ -86,7 +94,8 @@ | ||
| 86 | age: 26, | 94 | age: 26, |
| 87 | address: '深圳市南山区深南大道' | 95 | address: '深圳市南山区深南大道' |
| 88 | } | 96 | } |
| 89 | - ] | 97 | + ], |
| 98 | + data7: [] | ||
| 90 | } | 99 | } |
| 91 | }, | 100 | }, |
| 92 | methods: { | 101 | methods: { |