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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2017-03-09 14:11:22 +08:00
parent b2012015da
commit 486d4fda19
9 changed files with 132 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,22 @@
<template>
<div :class="wrapClasses" :style="styles">
<div :class="classes">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" ref="title"><slot name="header"></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
<table-head
:prefix-cls="prefixCls"
:style="tableStyle"
:styleObject="tableStyle"
:columns="cloneColumns"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"
<div :class="[prefixCls + '-body']" :style="bodyStyle" ref="body" @scroll="handleBodyScroll"
v-show="!((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table-body
v-ref:tbody
ref="tbody"
:prefix-cls="prefixCls"
:style="tableStyle"
:styleObject="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:columns-width="columnsWidth"
@ -24,12 +24,13 @@
</div>
<div
:class="[prefixCls + '-tip']"
v-else>
v-show="((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td :style="{ 'height': bodyStyle.height }">
{{{!data || data.length === 0 ? noDataText : noFilteredDataText}}}
<span v-html="noDataText" v-if="!data || data.length === 0"></span>
<span v-html="noFilteredDataText" v-else></span>
</td>
</tr>
</tbody>
@ -40,17 +41,17 @@
<table-head
fixed="left"
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
<table-body
fixed="left"
:prefix-cls="prefixCls"
:style="fixedTableStyle"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:columns-width="columnsWidth"
@ -62,24 +63,24 @@
<table-head
fixed="right"
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
<table-body
fixed="right"
:prefix-cls="prefixCls"
:style="fixedRightTableStyle"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
</div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
</div>
</div>
</template>
@ -93,6 +94,7 @@
const prefixCls = 'ivu-table';
export default {
name: 'Table',
components: { tableHead, tableBody },
props: {
data: {
@ -170,7 +172,8 @@
showSlotFooter: true,
bodyHeight: 0,
bodyRealHeight: 0,
scrollBarWidth: getScrollBarSize()
scrollBarWidth: getScrollBarSize(),
currentContent: this.content
};
},
computed: {
@ -415,9 +418,9 @@
fixedHeader () {
if (this.height) {
this.$nextTick(() => {
const titleHeight = parseInt(getStyle(this.$els.title, 'height')) || 0;
const headerHeight = parseInt(getStyle(this.$els.header, 'height')) || 0;
const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
const titleHeight = parseInt(getStyle(this.$refs.title, 'height')) || 0;
const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
});
} else {
@ -428,14 +431,14 @@
this.cloneColumns.forEach((col) => col._filterVisible = false);
},
handleBodyScroll (event) {
if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
if (this.isLeftFixed) this.$els.fixedBody.scrollTop = event.target.scrollTop;
if (this.isRightFixed) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
if (this.showHeader) this.$refs.header.scrollLeft = event.target.scrollLeft;
if (this.isLeftFixed) this.$refs.fixedBody.scrollTop = event.target.scrollTop;
if (this.isRightFixed) this.$refs.fixedRightBody.scrollTop = event.target.scrollTop;
this.hideColumnFilter();
},
handleMouseWheel (event) {
const deltaX = event.deltaX;
const $body = this.$els.body;
const $body = this.$refs.body;
if (deltaX > 0) {
$body.scrollLeft = $body.scrollLeft + 10;
@ -639,13 +642,13 @@
ExportCsv.download(params.filename, data);
}
},
compiled () {
if (!this.content) this.content = this.$parent;
this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
created () {
if (!this.content) this.currentContent = this.$parent;
this.showSlotHeader = this.$refs.title !== undefined;
this.showSlotFooter = this.$refs.footer !== undefined;
this.rebuildData = this.makeDataWithSortAndFilter();
},
ready () {
mounted () {
this.handleResize();
this.fixedHeader();
this.$nextTick(() => this.ready = true);