drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fade table body when there is no data

Browse source
This commit is contained in:
Rijn 2017-01-13 01:53:34 -06:00
parent e011898cc7
commit 2f7660b4cf
2 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/table/table.vue
View file

@ -11,7 +11,8 @@
:columns-width="columnsWidth" :columns-width="columnsWidth"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"
v-show="!((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table-body <table-body
v-ref:tbody v-ref:tbody
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
@ -21,6 +22,19 @@
:columns-width="columnsWidth" :columns-width="columnsWidth"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
<div
:class="[prefixCls + '-tip']"
v-else>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td :style="{ 'height': bodyStyle.height }">
{{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
</td>
</tr>
</tbody>
</table>
</div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head <table-head
@ -65,19 +79,6 @@
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
<div
:class="[prefixCls + '-tip']"
v-show="(!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0))">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
{{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
</td>
</tr>
</tbody>
</table>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
</div> </div>
</div> </div>

13
test/routers/table.vue
View file

@ -2,7 +2,15 @@
<!--<i-select :model.sync="model1" style="width:200px">--> <!--<i-select :model.sync="model1" style="width:200px">-->
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>--> <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
<!--</i-select>--> <!--</i-select>-->
<i-table border :content="self" :columns="columns7" :data="data6"></i-table> <i-button @click="data7 = data6">Dispatch</i-button>
<br/>
<i-table border :content="self" :columns="columns7" :data="data7"></i-table>
<br/>
<i-table border :content="self" :columns="columns7" :data="data7" size="small"></i-table>
<br/>
<i-table border :content="self" :columns="columns7" :data="data7" size="large"></i-table>
<br/>
<i-table border :content="self" :columns="columns7" :data="data7" height="600"></i-table>
</template> </template>
<script> <script>
export default { export default {
@ -86,7 +94,8 @@
age: 26, age: 26,
address: '深圳市南山区深南大道' address: '深圳市南山区深南大道'
} }
] ],
data7: []
} }
}, },
methods: { methods: {