<template>
<div :data-init="dataInit">
<el-table v-if="needLoading && timestamp" ref="table"
v-loading="loading"
:data="tableData"
:height="height"
:max-height="maxHeight"
:size="size"
:fit="fit"
:show-header="showHeader"
:highlight-current-row="highlightCurrentRow"
:stripe="stripe"
:border="border"
:default-sort="defaultSort"
:default-expand-all="defaultExpandAll"
:empty-text="emptyText"
:show-summary="showSummary"
:sum-text="sumText"
:summary-method="summaryMethod"
:span-method="spanMethod"
:select-on-indeterminate="selectOnIndeterminate"
:tooltip-effect="tooltipEffect"
:header-row-class-name="headerRowClassName"
:header-row-style="headerRowStyle"
:header-cell-class-name="headerCellClassName"
:header-cell-style="headerCellStyle"
:row-class-name="rowClassName"
:row-style="rowStyle"
:row-key="rowKey"
:cell-style="cellStyle"
:cell-class-name="cellClassName"
:expand-row-keys="expandRowKeys"
:lazy="lazy"
:indent="indent"
:load="load"
:tree-props="treeProps"
:element-loading-text="elementLoadingText"
:element-loading-spinner="elementLoadingSpinner"
:element-loading-background="elementLoadingBackground"
@select="select"
@select-all="selectAll"
@selection-change="selectionChange"
@current-change="currentChange"
@cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave"
@cell-click="cellClick"
@cell-dblclick="cellDblclick"
@row-click="rowClick"
@row-dblclick="rowDblclick"
@row-contextmenu="rowContextmenu"
@header-click="headerClick"
@header-contextmenu="headerContextmenu"
@sort-change="sortChange"
@filter-change="filterChange"
@expand-change="expandChange"
@header-dragend="headerDragend">
<slot></slot>
</el-table>
<el-table v-if="!needLoading && timestamp" ref="table"
:data="tableData"
:height="height"
:max-height="maxHeight"
:size="size"
:fit="fit"
:show-header="showHeader"
:highlight-current-row="highlightCurrentRow"
:stripe="stripe"
:border="border"
:default-sort="defaultSort"
:default-expand-all="defaultExpandAll"
:empty-text="emptyText"
:show-summary="showSummary"
:sum-text="sumText"
:summary-method="summaryMethod"
:span-method="spanMethod"
:select-on-indeterminate="selectOnIndeterminate"
:tooltip-effect="tooltipEffect"
:header-row-class-name="headerRowClassName"
:header-row-style="headerRowStyle"
:header-cell-class-name="headerCellClassName"
:header-cell-style="headerCellStyle"
:row-class-name="rowClassName"
:row-style="rowStyle"
:row-key="rowKey"
:cell-style="cellStyle"
:cell-class-name="cellClassName"
:expand-row-keys="expandRowKeys"
:lazy="lazy"
:indent="indent"
:load="load"
:tree-props="treeProps"
@select="select"
@select-all="selectAll"
@selection-change="selectionChange"
@current-change="currentChange"
@cell-click="cellClick"
@cell-dblclick="cellDblclick"
@cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave"
@row-click="rowClick"
@row-dblclick="rowDblclick"
@row-contextmenu="rowContextmenu"
@header-click="headerClick"
@header-contextmenu="headerContextmenu"
@sort-change="sortChange"
@filter-change="filterChange"
@expand-change="expandChange"
@header-dragend="headerDragend">
<slot></slot>
</el-table>
<div v-show="showPagination || tableData.length !== 0" style="margin-top: 20px">
<el-pagination ref="pagination" :class="{'el-pagination__rightwrapper': rightWrapper}"
:background="background"
:small="small"
:disabled="disabled"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="pagerLayout"
:total="total"
:page-count="pagecount"
:pager-count="pagerCount"
:popper-class="popperClass"
:prev-text="prevText"
:next-text="nextText"
:hide-on-single-page="hideOnSinglePage"
@prev-click="prevClick"
@next-click="nextClick"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</template>
<script type="text/javascript">
import { initMessageKey } from '@/util/isc-common/messageManage.js'
import { Table, TableColumn, Pagination } from 'element-ui'
export default {
data () {
return {
currentTable: [],
currentPage: 1,
pageSize: 10,
total: 0,
selections: [],
firstInit: true,
sortName: '',
sortOrder: '',
message: null,
loading: false,
timestamp: new Date().getTime()
}
},
components: {
'el-table': Table,
'el-pagination': Pagination
},
mounted() {
this.tableAttrInit();
},
methods : {
tableAttrInit(currentPageflag) {
if (this.defaultSort) {
if (this.defaultSort.prop) {
this.sortName = this.defaultSort.prop;
}
if (this.defaultSort.order) {
this.sortOrder = this.defaultSort.order;
}
}
if('client' == this.pagingSide && currentPageflag) {
// 客户端分页时刷新数据使页码停留在当前位置
}else {
if (this.pagination) {
if (this.limitDefault) {
this.pageSize = this.limitDefault;
}
if (this.offsetDefault || 0 == this.offsetDefault) {
this.offset = this.offsetDefault;
} else {
this.currentPage = 1;
}
}
}
if (this.dataInit) {
this.message = initMessageKey(this.dataInit);
if ('client' === this.pagingSide && this.firstInit) {
const execBefore = this.message[2];
const execAfter = this.message[1];
if(execBefore && typeof execBefore == "string"){
this.$parentPage[execBefore+'_POIN_ORIG'] = this.$parentPage[execBefore];
this.$parentPage[this.message[2]] = (messageObj) => {
this.$parentPage[execBefore+'_POIN_ORIG'](messageObj);
// add @2019-07-31
if (!messageObj.closeFlag) {
this.beforeSendMessage(messageObj);
}
}
}
if(execAfter && typeof execAfter == "string"){
this.$parentPage[execAfter+'_POIN_ORIG'] = this.$parentPage[execAfter];
this.$parentPage[this.message[1]] = (response, responseData, messageObj, error) => {
this.$parentPage[execAfter+'_POIN_ORIG'](response, responseData, messageObj, error);
// add @2019-07-31
if (!messageObj.closeFlag) {
this.afterSendMessage(response, responseData, messageObj, error);
}
}
}
this.firstInit = false;
}
}
},
refresh(currentPageflag) {
//edit by 陆静@2021-08-23 currentPageflag:true表示刷新停留在当前页
this.timestamp = new Date().getTime();
this.tableAttrInit(currentPageflag);
// 表格绑定通讯 刷新触发请求；表格未绑定通讯，刷新如需请求后台，btnNeedReMsg须为true
if (this.dataInit || this.btnNeedReMsg) {
this.sendMessage(currentPageflag);
}
},
sendMessage(currentPageflag) {
//add by 陆静@2021-08-23 currentPageflag:true表示刷新停留在当前页
this.message[0].currentPageflag = currentPageflag || false;
//此种情况仅适用于服务端分页，客户端分页暂不设置为1
if (this.message && this.$parentPage && this.$parentPage.poin_initManage) {
this.$parentPage.poin_initManage(this.message[0],this.message[1],this.message[2]);
}
},
beforeSendMessage(messageObj) {
if (this.needLoading) {
this.loading = true;
}
},
afterSendMessage(response, responseData, messageObj, error) {
if (this.needLoading) {
this.loading = false;
}
},
checkOffset() {
if ('pageIndex' == this.offsetMeaning) {
return this.currentPage - 1;
} else if ('pageNum' == this.offsetMeaning) {
return this.currentPage;
} else {
return Math.floor((this.currentPage - 1) * this.pageSize);
}
},
handleSizeChange(val) {
//改变每页分页条数
this.pageSize = val;
if (this.message && this.pagination && 'server' === this.pagingSide && this.$parentPage && this.$parentPage.poin_initManage) {
//当每页条数改变，currentPage需重置为1（这里在通讯的拼包中实现）
//此种情况仅适用于服务端分页，客户端分页暂不设置为1
if (this.message[0].isTPaging) {
this.message[0].isTPaging = false
}
this.$parentPage.poin_initManage(this.message[0],this.message[1],this.message[2]);
}
this.timestamp = new Date().getTime();
this.$emit('size-change', val);
},
handleCurrentChange(val) {
//改变页码
this.currentPage = val;
if (this.message && this.pagination && 'server' === this.pagingSide && this.$parentPage && this.$parentPage.poin_initManage) {
//给通讯中增加isTPaging字段，并设置为true，用于服务端分页（区别点击分页按钮，还是其他情况触发的通讯）
if (!this.message[0].isTPaging) {
this.message[0].isTPaging = true
}
this.$parentPage.poin_initManage(this.message[0],this.message[1],this.message[2]);
}
this.timestamp = new Date().getTime();
this.$emit('current-page-change', val);
},
select(selection, row) {
this.$emit('select', selection, row);
},
selectAll(selection) {
this.$emit('select-all', selection);
},
selectionChange(selection) {
this.selections = selection;
this.$emit('selection-change', selection);
},
currentChange(currentRow, oldCurrentRow) {
this.$emit('current-change', currentRow, oldCurrentRow);
},
cellClick(row, column, cell, event) {
this.$emit('cell-click', row, column, cell, event);
},
cellDblclick(row, column, cell, event) {
this.$emit('cell-dblclick', row, column, cell, event);
},
cellMouseEnter(row, column, cell, event) {
this.$emit('cell-mouse-enter', row, column, cell, event);
},
cellMouseLeave(row, column, cell, event) {
this.$emit('cell-mouse-leave', row, column, cell, event);
},
rowClick(row, event, column) {
this.$emit('row-click', row, event, column);
},
rowDblclick(row, event, column) {
this.$emit('row-dblclick', row, event, column);
},
rowContextmenu(row, event) {
this.$emit('row-contextmenu', row, event);
},
headerClick(column, event) {
this.$emit('header-click', column, event);
},
headerContextmenu(column, event) {
this.$emit('header-contextmenu', column, event);
},
headerDragend(newWidth, oldWidth, column, event) {
this.$emit('header-dragend', newWidth, oldWidth, column, event);
},
sortChange({ column, prop, order }) {
this.sortName = prop;
this.sortOrder = order;
this.$emit('sort-change', { column, prop, order });
},
filterChange(filters) {
this.$emit('filter-change', filters);
},
expandChange(row, expandedRows) {
this.$emit('expand-change', row, expandedRows);
},
prevClick(currentPage) {
this.$emit('prev-change', currentPage);
},
nextClick(currentPage) {
this.$emit('next-change', currentPage);
},
clearSelection() {
this.$refs.table.clearSelection();
},
toggleRowSelection(row, selected) {
this.$refs.table.toggleRowSelection(row, selected);
},
toggleAllSelection() {
this.$refs.table.toggleAllSelection();
},
toggleRowExpansion(row, expanded) {
this.$refs.table.toggleRowExpansion(row, expanded);
},
setCurrentRow(row) {
this.$refs.table.setCurrentRow(row);
},
clearSort() {
this.$refs.table.clearSort();
},
clearFilter(columnKeys) {
this.$refs.table.clearFilter(columnKeys);
},
doLayout() {
this.$refs.table.doLayout();
},
sort(prop, order) {
this.$refs.table.sort(prop, order);
}
},
computed: {
tableData() {
if (this.pagination && 'client' === this.pagingSide){
if (this.data && this.data instanceof Array) {
this.currentTable = this.data.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);
this.total = this.data.length;
return this.currentTable;
} else {
return [];
}
} else {
if (this.data && this.data instanceof Array) {
return this.data;
} else {
return [];
}
}
},
showPagination() {
if (this.pagination) {
return this.total
}
return false
},
limit: {
get() {
return this.pageSize;
},
set(newValue) {
this.pageSize = newValue;
}
},
offset: {
get() {
if (this.pagination) {
return (1 == this.currentPage && (0 == this.offsetDefault || this.offsetDefault)) ? this.offsetDefault : this.checkOffset();
}
},
set(newValue) {
if ('pageIndex' == this.offsetMeaning) {
this.currentPage = newValue + 1;
} else if ('pageNum' == this.offsetMeaning) {
this.currentPage = newValue;
} else {
if (this.pageSize == 0) {
this.currentPage = 0;
} else {
this.currentPage = newValue/this.pageSize + 1;
}
}
}
},
pagecount: {
get() {
if (typeof this.total === 'number') {
if (this.pageSize == 0) {
return 0;
} else {
return this.total/this.pageSize;
}
} else {
return 0;
}
},
set(newValue) {
if (typeof newValue === 'number' || !isNaN(parseInt(c))) {
if (0 == this.total) {
this.total = newValue*this.pageSize;
}
} else {
this.total = 0;
}
}
},
},
props: {
data: [Array, Object],
dataInit: String,
$parentPage: null,
selfLoad: {
type: Boolean,
default: true
},
pagination: Boolean,
pagingSide: String,
offsetMeaning: String,
offsetDefault: Number,
limitDefault: Number,
rightWrapper: Boolean,
size: String,
width: [String, Number],
height: [String, Number],
maxHeight: [String, Number],
fit: {
type: Boolean,
default: true
},
stripe: Boolean,
border: Boolean,
rowKey: [String, Function],
context: {},
showHeader: {
type: Boolean,
default: true
},
showSummary: Boolean,
sumText: String,
summaryMethod: Function,
rowClassName: [String, Function],
rowStyle: [Object, Function],
cellClassName: [String, Function],
cellStyle: [Object, Function],
headerRowClassName: [String, Function],
headerRowStyle: [Object, Function],
headerCellClassName: [String, Function],
headerCellStyle: [Object, Function],
highlightCurrentRow: Boolean,
currentRowKey: [String, Number],
emptyText: String,
expandRowKeys: Array,
defaultExpandAll: Boolean,
defaultSort: Object,
tooltipEffect: String,
spanMethod: Function,
selectOnIndeterminate: {
type: Boolean,
default: true
},
treeProps: {
type: Object,
default() {
return {
hasChildren: 'hasChildren',
children: 'children'
};
}
},
pagerCount: Number,
pagerLayout: {
type: String,
default: 'prev, pager, next, total, jumper, sizes'
},
pageSizes: Array,
popperClass: String,
prevText: String,
nextText: String,
background: Boolean,
small: Boolean,
disabled: Boolean,
elementLoadingText: '',
elementLoadingSpinner: '',
elementLoadingBackground: '',
needLoading: {
type: Boolean,
default: false
},
btnNeedReMsg: {
type: Boolean,
default: false
},
indent: Number,
lazy: Boolean,
load: Function,
hideOnSinglePage: Boolean
}
}
</script>
<style type="text/css">
</style>