根据业务需求,有时候需要在没有数据的情况下,显示合计,如图所示:
viewui-table-summary.png
ViewUI Table是不支持的,修改了源码(table.vue和summary.vue中的template内容),仅供参考
table.vue
<template>
<div :class="wrapClasses" :style="styles" ref="tableWrap">
<div :class="classes">
<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"
:styleObject="tableHeaderStyle"
:columns="cloneColumns"
:column-rows="columnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" ref="body" @scroll="handleBodyScroll"
v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table-body
ref="tbody"
:draggable="draggable"
:prefix-cls="prefixCls"
:styleObject="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:row-key="rowKey"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
<div
:class="[prefixCls + '-tip']" :style="bodyStyle" @scroll="handleBodyScroll"
v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
<span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
<span v-html="localeNoFilteredDataText" v-else></span>
</td>
</tr>
</tbody>
</table>
</div>
<table-summary
v-if="showSummary"
ref="summary"
:prefix-cls="prefixCls"
:styleObject="tableStyle"
:columns="cloneColumns"
:data="summaryData"
:columns-width="columnsWidth"
/>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed">
<div :class="fixedHeaderClasses" v-if="showHeader">
<table-head
fixed="left"
:prefix-cls="prefixCls"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
:column-rows="columnRows"
:fixed-column-rows="leftFixedColumnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
<table-body
fixed="left"
:draggable="draggable"
:prefix-cls="prefixCls"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:row-key="rowKey"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
<table-summary
v-if="showSummary"
fixed="left"
:prefix-cls="prefixCls"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
:data="summaryData"
:columns-width="columnsWidth"
:style="{ 'margin-top': showHorizontalScrollBar ? scrollBarWidth + 'px' : 0 }"
/>
</div>
<div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed">
<div :class="fixedHeaderClasses" v-if="showHeader">
<table-head
fixed="right"
:prefix-cls="prefixCls"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
:column-rows="columnRows"
:fixed-column-rows="rightFixedColumnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
<table-body
fixed="right"
:draggable="draggable"
:prefix-cls="prefixCls"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:row-key="rowKey"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
<table-summary
v-if="showSummary"
fixed="right"
:prefix-cls="prefixCls"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="summaryData"
:columns-width="columnsWidth"
:style="{ 'margin-top': showHorizontalScrollBar ? scrollBarWidth + 'px' : 0 }"
/>
</div>
<div :class="[prefixCls + '-fixed-right-header']" :style="fixedRightHeaderStyle" v-if="isRightFixed"></div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
</div>
<div class="ivu-table-resize-line" v-show="showResizeLine" ref="resizeLine"></div>
<div class="ivu-table-context-menu" :style="contextMenuStyles" v-if="showContextMenu">
<Dropdown trigger="custom" :visible="contextMenuVisible" transfer @on-clickoutside="handleClickContextMenuOutside">
<DropdownMenu slot="list">
<slot name="contextMenu"></slot>
</DropdownMenu>
</Dropdown>
</div>
<Spin fix size="large" v-if="loading">
<slot name="loading"></slot>
</Spin>
</div>
</template>
<template>
<div style="overflow:hidden;">
<table class="ivu-table-summary" cellspacing="0" cellpadding="0" border="0" :style="styleObject">
<colgroup>
<col v-for="(column, index) in columns" :width="setCellWidth(column)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr class="ivu-table-row">
<td v-for="(column, index) in columns" :class="alignCls(column)">
<div class="ivu-table-cell" :class="cellCls(column)">
<span v-if="data[column.key] != undefined">{{ data[column.key].value }}</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
网友评论