1517 lines
64 KiB
Vue
1517 lines
64 KiB
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>
|
||
<table-summary
|
||
v-if="showSummary && (data && data.length)"
|
||
ref="summary"
|
||
:prefix-cls="prefixCls"
|
||
:styleObject="tableStyle"
|
||
:columns="cloneColumns"
|
||
:data="summaryData"
|
||
:columns-width="columnsWidth"
|
||
/>
|
||
<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>
|
||
<div :class="fixedTableClasses" :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 && (data && data.length)"
|
||
fixed="left"
|
||
:prefix-cls="prefixCls"
|
||
:styleObject="fixedTableStyle"
|
||
:columns="leftFixedColumns"
|
||
:data="summaryData"
|
||
:columns-width="columnsWidth"
|
||
:style="{ 'margin-top': showHorizontalScrollBar ? scrollBarWidth + 'px' : 0 }"
|
||
/>
|
||
</div>
|
||
<div :class="fixedRightTableClasses" :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 && (data && data.length)"
|
||
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>
|
||
<script>
|
||
import tableHead from './table-head.vue';
|
||
import tableBody from './table-body.vue';
|
||
import tableSummary from './summary.vue';
|
||
import Dropdown from '../dropdown/dropdown.vue';
|
||
import DropdownMenu from '../dropdown/dropdown-menu.vue';
|
||
import Spin from '../spin/spin.vue';
|
||
import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
|
||
import { on, off } from '../../utils/dom';
|
||
import Csv from '../../utils/csv';
|
||
import ExportCsv from './export-csv';
|
||
import Locale from '../../mixins/locale';
|
||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||
import { getAllColumns, convertToRows, convertColumnOrder, getRandomStr } from './util';
|
||
|
||
const prefixCls = 'ivu-table';
|
||
|
||
let rowKey = 1;
|
||
let columnKey = 1;
|
||
|
||
export default {
|
||
name: 'Table',
|
||
mixins: [ Locale ],
|
||
components: { tableHead, tableBody, tableSummary, Spin, Dropdown, DropdownMenu },
|
||
provide () {
|
||
return {
|
||
tableRoot: this
|
||
};
|
||
},
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
default () {
|
||
return [];
|
||
}
|
||
},
|
||
columns: {
|
||
type: Array,
|
||
default () {
|
||
return [];
|
||
}
|
||
},
|
||
size: {
|
||
validator (value) {
|
||
return oneOf(value, ['small', 'large', 'default']);
|
||
},
|
||
default () {
|
||
return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
|
||
}
|
||
},
|
||
width: {
|
||
type: [Number, String]
|
||
},
|
||
height: {
|
||
type: [Number, String]
|
||
},
|
||
// 3.4.0
|
||
maxHeight: {
|
||
type: [Number, String]
|
||
},
|
||
stripe: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
border: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
showHeader: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
highlightRow: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
rowClassName: {
|
||
type: Function,
|
||
default () {
|
||
return '';
|
||
}
|
||
},
|
||
context: {
|
||
type: Object
|
||
},
|
||
noDataText: {
|
||
type: String
|
||
},
|
||
noFilteredDataText: {
|
||
type: String
|
||
},
|
||
disabledHover: {
|
||
type: Boolean
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
draggable: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
tooltipTheme: {
|
||
validator (value) {
|
||
return oneOf(value, ['dark', 'light']);
|
||
},
|
||
default: 'dark'
|
||
},
|
||
// 4.5.0
|
||
tooltipMaxWidth: {
|
||
type: Number,
|
||
default: 300
|
||
},
|
||
// #5380 开启后，:key 强制更新，否则使用 index
|
||
// 4.1 开始支持 String，指定具体字段
|
||
rowKey: {
|
||
type: [Boolean, String],
|
||
default: false
|
||
},
|
||
// 4.0.0
|
||
spanMethod: {
|
||
type: Function
|
||
},
|
||
// 4.0.0
|
||
showSummary: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 4.0.0
|
||
summaryMethod: {
|
||
type: Function
|
||
},
|
||
// 4.0.0
|
||
sumText: {
|
||
type: String
|
||
},
|
||
// 4.1.0
|
||
indentSize: {
|
||
type: Number,
|
||
default: 16
|
||
},
|
||
// 4.1.0
|
||
loadData: {
|
||
type: Function
|
||
},
|
||
// 4.4.0
|
||
updateShowChildren: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 4.1.0
|
||
contextMenu: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 4.2.0
|
||
showContextMenu: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 4.7.0
|
||
fixedShadow: {
|
||
validator (value) {
|
||
return oneOf(value, ['auto', 'show', 'hide']);
|
||
},
|
||
default: 'show'
|
||
}
|
||
},
|
||
data () {
|
||
const colsWithId = this.makeColumnsId(this.columns);
|
||
return {
|
||
ready: false,
|
||
tableWidth: 0,
|
||
columnsWidth: {},
|
||
prefixCls: prefixCls,
|
||
compiledUids: [],
|
||
objData: this.makeObjData(), // checkbox or highlight-row
|
||
rebuildData: [], // for sort or filter
|
||
cloneColumns: this.makeColumns(colsWithId),
|
||
columnRows: this.makeColumnRows(false, colsWithId),
|
||
leftFixedColumnRows: this.makeColumnRows('left', colsWithId),
|
||
rightFixedColumnRows: this.makeColumnRows('right', colsWithId),
|
||
allColumns: getAllColumns(colsWithId), // for multiple table-head, get columns that have no children
|
||
showSlotHeader: true,
|
||
showSlotFooter: true,
|
||
bodyHeight: 0,
|
||
scrollBarWidth: getScrollBarSize(),
|
||
currentContext: this.context,
|
||
cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
|
||
showVerticalScrollBar:false,
|
||
showHorizontalScrollBar:false,
|
||
headerWidth:0,
|
||
headerHeight:0,
|
||
showResizeLine: false,
|
||
contextMenuVisible: false,
|
||
contextMenuStyles: {
|
||
top: 0,
|
||
left: 0
|
||
},
|
||
scrollOnTheLeft: false,
|
||
scrollOnTheRight: false
|
||
};
|
||
},
|
||
computed: {
|
||
localeNoDataText () {
|
||
if (this.noDataText === undefined) {
|
||
return this.t('i.table.noDataText');
|
||
} else {
|
||
return this.noDataText;
|
||
}
|
||
},
|
||
localeNoFilteredDataText () {
|
||
if (this.noFilteredDataText === undefined) {
|
||
return this.t('i.table.noFilteredDataText');
|
||
} else {
|
||
return this.noFilteredDataText;
|
||
}
|
||
},
|
||
localeSumText () {
|
||
if (this.sumText === undefined) {
|
||
return this.t('i.table.sumText');
|
||
} else {
|
||
return this.sumText;
|
||
}
|
||
},
|
||
wrapClasses () {
|
||
return [
|
||
`${prefixCls}-wrapper`,
|
||
{
|
||
[`${prefixCls}-hide`]: !this.ready,
|
||
[`${prefixCls}-with-header`]: this.showSlotHeader,
|
||
[`${prefixCls}-with-footer`]: this.showSlotFooter,
|
||
[`${prefixCls}-with-summary`]: this.showSummary,
|
||
[`${prefixCls}-wrapper-with-border`]: this.border
|
||
}
|
||
];
|
||
},
|
||
classes () {
|
||
return [
|
||
`${prefixCls}`,
|
||
{
|
||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||
[`${prefixCls}-border`]: this.border,
|
||
[`${prefixCls}-stripe`]: this.stripe,
|
||
[`${prefixCls}-with-fixed-top`]: !!this.height
|
||
}
|
||
];
|
||
},
|
||
fixedTableClasses () {
|
||
return [
|
||
`${prefixCls}-fixed`,
|
||
{
|
||
[`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheLeft)
|
||
}
|
||
];
|
||
},
|
||
fixedRightTableClasses () {
|
||
return [
|
||
`${prefixCls}-fixed-right`,
|
||
{
|
||
[`${prefixCls}-fixed-shadow`]: this.fixedShadow === 'show' || (this.fixedShadow === 'auto' && !this.scrollOnTheRight)
|
||
}
|
||
];
|
||
},
|
||
fixedHeaderClasses () {
|
||
return [
|
||
`${prefixCls}-fixed-header`,
|
||
{
|
||
[`${prefixCls}-fixed-header-with-empty`]: !this.rebuildData.length
|
||
}
|
||
];
|
||
},
|
||
styles () {
|
||
let style = {};
|
||
let summaryHeight = 0;
|
||
if (this.showSummary) {
|
||
if (this.size === 'small') summaryHeight = 40;
|
||
else if (this.size === 'large') summaryHeight = 60;
|
||
else summaryHeight = 48;
|
||
}
|
||
if (this.height) {
|
||
let height = parseInt(this.height) + summaryHeight;
|
||
style.height = `${height}px`;
|
||
}
|
||
if (this.maxHeight) {
|
||
const maxHeight = parseInt(this.maxHeight) + summaryHeight;
|
||
style.maxHeight = `${maxHeight}px`;
|
||
}
|
||
if (this.width) style.width = `${this.width}px`;
|
||
return style;
|
||
},
|
||
tableStyle () {
|
||
let style = {};
|
||
if (this.tableWidth !== 0) {
|
||
let width = '';
|
||
if (this.bodyHeight === 0) {
|
||
width = this.tableWidth;
|
||
} else {
|
||
width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||
}
|
||
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
|
||
style.width = `${width}px`;
|
||
}
|
||
return style;
|
||
},
|
||
tableHeaderStyle () {
|
||
let style = {};
|
||
if (this.tableWidth !== 0) {
|
||
let width = '';
|
||
width = this.tableWidth;
|
||
style.width = `${width}px`;
|
||
}
|
||
return style;
|
||
},
|
||
fixedTableStyle () {
|
||
let style = {};
|
||
let width = 0;
|
||
this.leftFixedColumns.forEach((col) => {
|
||
if (col.fixed && col.fixed === 'left') width += col._width;
|
||
});
|
||
style.width = `${width}px`;
|
||
return style;
|
||
},
|
||
fixedRightTableStyle () {
|
||
let style = {};
|
||
let width = 0;
|
||
this.rightFixedColumns.forEach((col) => {
|
||
if (col.fixed && col.fixed === 'right') width += col._width;
|
||
});
|
||
//width += this.scrollBarWidth;
|
||
style.width = `${width}px`;
|
||
style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
|
||
return style;
|
||
},
|
||
fixedRightHeaderStyle () {
|
||
let style = {};
|
||
let width = 0;
|
||
let height = this.headerHeight+1;
|
||
if(this.showVerticalScrollBar){
|
||
width = this.scrollBarWidth;
|
||
}
|
||
style.width = `${width}px`;
|
||
style.height = `${height}px`;
|
||
return style;
|
||
},
|
||
bodyStyle () {
|
||
let style = {};
|
||
if (this.bodyHeight !== 0) {
|
||
const height = this.bodyHeight;
|
||
if (this.height) {
|
||
style.height = `${height}px`;
|
||
} else if (this.maxHeight) {
|
||
style.maxHeight = `${height}px`;
|
||
}
|
||
}
|
||
return style;
|
||
},
|
||
fixedBodyStyle () {
|
||
let style = {};
|
||
if (this.bodyHeight !== 0) {
|
||
let height = this.bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0);
|
||
const bodyHeight = this.showHorizontalScrollBar ? `${height}px` : `${height - 1}px`;
|
||
if (this.height) style.height = bodyHeight;
|
||
else if (this.maxHeight) style.maxHeight = bodyHeight;
|
||
}
|
||
return style;
|
||
},
|
||
leftFixedColumns () {
|
||
return convertColumnOrder(this.cloneColumns, 'left');
|
||
},
|
||
rightFixedColumns () {
|
||
return convertColumnOrder(this.cloneColumns, 'right');
|
||
},
|
||
isLeftFixed () {
|
||
return this.columns.some(col => col.fixed && col.fixed === 'left');
|
||
},
|
||
isRightFixed () {
|
||
return this.columns.some(col => col.fixed && col.fixed === 'right');
|
||
},
|
||
// for summary data
|
||
summaryData () {
|
||
if (!this.showSummary) return {};
|
||
|
||
let sums = {};
|
||
if (this.summaryMethod) {
|
||
sums = this.summaryMethod({ columns: this.cloneColumns, data: this.rebuildData });
|
||
} else {
|
||
this.cloneColumns.forEach((column, index) => {
|
||
const key = column.key;
|
||
if (index === 0) {
|
||
sums[key] = {
|
||
key: column.key,
|
||
value: this.localeSumText
|
||
};
|
||
return;
|
||
}
|
||
const values = this.rebuildData.map(item => Number(item[column.key]));
|
||
const precisions = [];
|
||
let notNumber = true;
|
||
values.forEach(value => {
|
||
if (!isNaN(value)) {
|
||
notNumber = false;
|
||
let decimal = ('' + value).split('.')[1];
|
||
precisions.push(decimal ? decimal.length : 0);
|
||
}
|
||
});
|
||
const precision = Math.max.apply(null, precisions);
|
||
if (!notNumber) {
|
||
const currentValue = values.reduce((prev, curr) => {
|
||
const value = Number(curr);
|
||
if (!isNaN(value)) {
|
||
return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
|
||
} else {
|
||
return prev;
|
||
}
|
||
}, 0);
|
||
sums[key] = {
|
||
key: column.key,
|
||
value: currentValue
|
||
};
|
||
} else {
|
||
sums[key] = {
|
||
key: column.key,
|
||
value: ''
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
return sums;
|
||
}
|
||
},
|
||
methods: {
|
||
rowClsName (index) {
|
||
return this.rowClassName(this.data[index], index);
|
||
},
|
||
handleResize () {
|
||
//let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
|
||
let tableWidth = this.$el.offsetWidth - 1;
|
||
let columnsWidth = {};
|
||
let sumMinWidth = 0;
|
||
let hasWidthColumns = [];
|
||
let noWidthColumns = [];
|
||
let maxWidthColumns = [];
|
||
let noMaxWidthColumns = [];
|
||
this.cloneColumns.forEach((col) => {
|
||
if (col.width) {
|
||
hasWidthColumns.push(col);
|
||
}
|
||
else{
|
||
noWidthColumns.push(col);
|
||
if (col.minWidth) {
|
||
sumMinWidth += col.minWidth;
|
||
}
|
||
if (col.maxWidth) {
|
||
maxWidthColumns.push(col);
|
||
}
|
||
else {
|
||
noMaxWidthColumns.push(col);
|
||
}
|
||
}
|
||
col._width = null;
|
||
});
|
||
|
||
|
||
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
|
||
let usableWidth = tableWidth - unUsableWidth - sumMinWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0) - 1;
|
||
let usableLength = noWidthColumns.length;
|
||
let columnWidth = 0;
|
||
if(usableWidth > 0 && usableLength > 0){
|
||
columnWidth = parseInt(usableWidth / usableLength);
|
||
}
|
||
|
||
|
||
for (let i = 0; i < this.cloneColumns.length; i++) {
|
||
const column = this.cloneColumns[i];
|
||
let width = columnWidth + (column.minWidth?column.minWidth:0);
|
||
if(column.width){
|
||
width = column.width;
|
||
}
|
||
else{
|
||
if (column._width) {
|
||
width = column._width;
|
||
}
|
||
else {
|
||
if (column.minWidth > width){
|
||
width = column.minWidth;
|
||
}
|
||
else if (column.maxWidth < width){
|
||
width = column.maxWidth;
|
||
}
|
||
|
||
if (usableWidth>0) {
|
||
usableWidth -= width - (column.minWidth?column.minWidth:0);
|
||
usableLength--;
|
||
if (usableLength > 0) {
|
||
columnWidth = parseInt(usableWidth / usableLength);
|
||
}
|
||
else {
|
||
columnWidth = 0;
|
||
}
|
||
}
|
||
else{
|
||
columnWidth = 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
column._width = width;
|
||
|
||
columnsWidth[column._index] = {
|
||
width: width
|
||
};
|
||
|
||
}
|
||
if(usableWidth>0) {
|
||
usableLength = noMaxWidthColumns.length;
|
||
columnWidth = parseInt(usableWidth / usableLength);
|
||
for (let i = 0; i < noMaxWidthColumns.length; i++) {
|
||
const column = noMaxWidthColumns[i];
|
||
let width = column._width + columnWidth;
|
||
if (usableLength > 1) {
|
||
usableLength--;
|
||
usableWidth -= columnWidth;
|
||
columnWidth = parseInt(usableWidth / usableLength);
|
||
}
|
||
else {
|
||
columnWidth = 0;
|
||
}
|
||
|
||
column._width = width;
|
||
|
||
columnsWidth[column._index] = {
|
||
width: width
|
||
};
|
||
|
||
}
|
||
}
|
||
|
||
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0) + 1;
|
||
this.columnsWidth = columnsWidth;
|
||
this.fixedHeader();
|
||
|
||
// 4.7.0 auto fixed shadow
|
||
if (this.fixedShadow === 'auto') {
|
||
this.$nextTick(() => {
|
||
const $body = this.$refs.body;
|
||
this.scrollOnTheLeft = $body.scrollLeft === 0;
|
||
this.scrollOnTheRight = $body.scrollWidth === $body.scrollLeft + $body.clientWidth;
|
||
});
|
||
}
|
||
},
|
||
handleMouseIn (_index, rowKey) {
|
||
if (this.disabledHover) return;
|
||
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
|
||
if (objData._isHover) return;
|
||
objData._isHover = true;
|
||
},
|
||
handleMouseOut (_index, rowKey) {
|
||
if (this.disabledHover) return;
|
||
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
|
||
objData._isHover = false;
|
||
},
|
||
// 通用处理 highlightCurrentRow 和 clearCurrentRow
|
||
handleCurrentRow (type, _index, rowKey) {
|
||
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
|
||
|
||
let oldData = null;
|
||
let oldIndex = -1;
|
||
|
||
for (let i in this.objData) {
|
||
if (this.objData[i]._isHighlight) {
|
||
oldIndex = parseInt(i);
|
||
this.objData[i]._isHighlight = false;
|
||
break;
|
||
} else if (this.objData[i].children && this.objData[i].children.length) {
|
||
const resetData = this.handleResetChildrenRow(this.objData[i]);
|
||
if (resetData) oldData = JSON.parse(JSON.stringify(resetData));
|
||
}
|
||
}
|
||
if (type === 'highlight') objData._isHighlight = true;
|
||
if (oldIndex >= 0) {
|
||
oldData = JSON.parse(JSON.stringify(this.cloneData[oldIndex]));
|
||
}
|
||
const newData = type === 'highlight' ? rowKey ? JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey))) : JSON.parse(JSON.stringify(this.cloneData[_index])) : null;
|
||
this.$emit('on-current-change', newData, oldData);
|
||
},
|
||
handleResetChildrenRow (objData) {
|
||
let data = null;
|
||
if (objData.children && objData.children.length) {
|
||
for (let i = 0; i < objData.children.length; i++) {
|
||
const item = objData.children[i];
|
||
if (item._isHighlight) {
|
||
item._isHighlight = false;
|
||
data = item;
|
||
break;
|
||
} else if (item.children && item.children.length) {
|
||
data = this.handleResetChildrenRow(item);
|
||
}
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
highlightCurrentRow (_index, rowKey) {
|
||
const objData = rowKey ? this.getDataByRowKey(rowKey) : this.objData[_index];
|
||
if (!this.highlightRow || objData._isHighlight) return;
|
||
this.handleCurrentRow('highlight', _index, rowKey);
|
||
},
|
||
clearCurrentRow () {
|
||
if (!this.highlightRow) return;
|
||
this.handleCurrentRow('clear');
|
||
},
|
||
clickCurrentRow (_index, rowKey) {
|
||
this.highlightCurrentRow (_index, rowKey);
|
||
if (rowKey) {
|
||
this.$emit('on-row-click', JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey))));
|
||
} else {
|
||
this.$emit('on-row-click', JSON.parse(JSON.stringify(this.cloneData[_index])), _index);
|
||
}
|
||
},
|
||
dblclickCurrentRow (_index, rowKey) {
|
||
this.highlightCurrentRow (_index, rowKey);
|
||
if (rowKey) {
|
||
this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey))));
|
||
} else {
|
||
this.$emit('on-row-dblclick', JSON.parse(JSON.stringify(this.cloneData[_index])), _index);
|
||
}
|
||
},
|
||
contextmenuCurrentRow (_index, rowKey, event) {
|
||
if (this.contextMenuVisible) this.handleClickContextMenuOutside();
|
||
this.$nextTick(() => {
|
||
const $TableWrap = this.$refs.tableWrap;
|
||
const TableBounding = $TableWrap.getBoundingClientRect();
|
||
const position = {
|
||
left: `${event.clientX - TableBounding.left}px`,
|
||
top: `${event.clientY - TableBounding.top}px`
|
||
};
|
||
this.contextMenuStyles = position;
|
||
this.contextMenuVisible = true;
|
||
if (rowKey) {
|
||
this.$emit('on-contextmenu', JSON.parse(JSON.stringify(this.getBaseDataByRowKey(rowKey))), event, position);
|
||
} else {
|
||
this.$emit('on-contextmenu', JSON.parse(JSON.stringify(this.cloneData[_index])), event, position);
|
||
}
|
||
});
|
||
},
|
||
getSelection () {
|
||
// 分别拿根数据和子数据的已选项
|
||
let selectionIndexes = [];
|
||
let selectionRowKeys = [];
|
||
for (let i in this.objData) {
|
||
const objData = this.objData[i];
|
||
if (objData._isChecked) selectionIndexes.push(parseInt(i));
|
||
if (objData.children && objData.children.length) {
|
||
selectionRowKeys = selectionRowKeys.concat(this.getSelectionChildrenRowKeys(objData, selectionRowKeys));
|
||
}
|
||
}
|
||
|
||
// 去重的 RowKeys
|
||
selectionRowKeys = [...new Set(selectionRowKeys)];
|
||
|
||
let selection = [];
|
||
|
||
this.data.forEach((item, index) => {
|
||
if (selectionIndexes.indexOf(index) > -1) {
|
||
selection = selection.concat(item);
|
||
}
|
||
if (item.children && item.children.length && selectionRowKeys.length) {
|
||
selection = selection.concat(this.getSelectionChildren(item, selection, selectionRowKeys));
|
||
}
|
||
});
|
||
|
||
|
||
selection = [...new Set(selection)];
|
||
return JSON.parse(JSON.stringify(selection));
|
||
},
|
||
getSelectionChildrenRowKeys (objData, selectionRowKeys) {
|
||
if (objData.children && objData.children.length) {
|
||
objData.children.forEach(item => {
|
||
if (item._isChecked) selectionRowKeys.push(item._rowKey);
|
||
if (item.children && item.children.length) {
|
||
selectionRowKeys = selectionRowKeys.concat(this.getSelectionChildrenRowKeys(item, selectionRowKeys));
|
||
}
|
||
});
|
||
}
|
||
return selectionRowKeys;
|
||
},
|
||
getSelectionChildren (data, selection, selectionRowKeys) {
|
||
if (data.children && data.children.length) {
|
||
data.children.forEach(item => {
|
||
if (selectionRowKeys.indexOf(item[this.rowKey]) > -1) {
|
||
selection = selection.concat(item);
|
||
}
|
||
if (item.children && item.children.length) {
|
||
selection = selection.concat(this.getSelectionChildren(item, selection, selectionRowKeys));
|
||
}
|
||
});
|
||
}
|
||
return selection;
|
||
},
|
||
toggleSelect (_index, rowKey) {
|
||
let data = {};
|
||
|
||
if (rowKey) {
|
||
data = this.getDataByRowKey(rowKey);
|
||
} else {
|
||
for (let i in this.objData) {
|
||
if (parseInt(i) === _index) {
|
||
data = this.objData[i];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
const status = !data._isChecked;
|
||
|
||
data._isChecked = status;
|
||
const selection = this.getSelection();
|
||
const selectedData = rowKey ? this.getBaseDataByRowKey(rowKey, this.data) : this.data[_index];
|
||
this.$emit(status ? 'on-select' : 'on-select-cancel', selection, JSON.parse(JSON.stringify(selectedData)));
|
||
this.$emit('on-selection-change', selection);
|
||
},
|
||
toggleExpand (_index) {
|
||
let data = {};
|
||
|
||
for (let i in this.objData) {
|
||
if (parseInt(i) === _index) {
|
||
data = this.objData[i];
|
||
break;
|
||
}
|
||
}
|
||
const status = !data._isExpanded;
|
||
this.objData[_index]._isExpanded = status;
|
||
this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
|
||
|
||
if(this.height || this.maxHeight){
|
||
this.$nextTick(()=>this.fixedBody());
|
||
}
|
||
},
|
||
toggleTree (rowKey) {
|
||
const data = this.getDataByRowKey(rowKey);
|
||
// async loading
|
||
if ('_loading' in data && data._loading) return;
|
||
if ('_loading' in data && !data._loading && data.children.length === 0) {
|
||
const sourceData = this.getBaseDataByRowKey(rowKey, this.data);
|
||
this.$set(sourceData, '_loading', true);
|
||
this.loadData(sourceData, children => {
|
||
this.$set(sourceData, '_loading', false);
|
||
if (children.length) {
|
||
this.$set(sourceData, 'children', children);
|
||
this.$nextTick(() => {
|
||
const newData = this.getDataByRowKey(rowKey);
|
||
newData._isShowChildren = !newData._isShowChildren;
|
||
// 由于 updateDataStatus 是基于原数据修改，导致单选、多选等状态重置，所以暂不处理 _showChildren 状态，而是通过事件 @on-expand-tree
|
||
// 异步时，需设置 _showChildren，否则嵌套子集展开，会自动收起父级
|
||
this.updateDataStatus(rowKey, '_showChildren', newData._isShowChildren);
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
data._isShowChildren = !data._isShowChildren;
|
||
// 由于 updateDataStatus 是基于原数据修改，导致单选、多选等状态重置，所以暂不处理 _showChildren 状态，而是通过事件 @on-expand-tree
|
||
// #675，增加 updateShowChildren
|
||
if (this.updateShowChildren) this.updateDataStatus(rowKey, '_showChildren', data._isShowChildren);
|
||
this.$emit('on-expand-tree', rowKey, data._isShowChildren);
|
||
},
|
||
/**
|
||
* @description 当修改某内置属性，如 _isShowChildren 时，因当将原 data 对应 _showChildren 也修改，否则修改 data 时，状态会重置
|
||
* @param rowKey rowKey
|
||
* @param key 原数据对应的字段
|
||
* @param value 修改的值
|
||
* */
|
||
// todo 单选、多选等状态可能也需要更新原数据
|
||
updateDataStatus (rowKey, key, value) {
|
||
const data = this.getBaseDataByRowKey(rowKey, this.data);
|
||
this.$set(data, key, value);
|
||
},
|
||
getDataByRowKey (rowKey, objData = this.objData) {
|
||
let data = null;
|
||
for (let i in objData) {
|
||
const thisData = objData[i];
|
||
if (thisData._rowKey === rowKey) {
|
||
data = thisData;
|
||
break;
|
||
} else if (thisData.children && thisData.children.length) {
|
||
data = this.getChildrenByRowKey(rowKey, thisData);
|
||
if (data) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
getChildrenByRowKey (rowKey, objData) {
|
||
let data = null;
|
||
if (objData.children && objData.children.length) {
|
||
for (let i = 0; i < objData.children.length; i++) {
|
||
const item = objData.children[i];
|
||
if (item._rowKey === rowKey) {
|
||
data = item;
|
||
break;
|
||
} else if (item.children && item.children.length) {
|
||
data = this.getChildrenByRowKey(rowKey, item);
|
||
if (data) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
getBaseDataByRowKey (rowKey, sourceData = this.cloneData) {
|
||
let data = null;
|
||
for (let i = 0; i < sourceData.length; i++) {
|
||
const thisData = sourceData[i];
|
||
if (thisData[this.rowKey] === rowKey) {
|
||
data = thisData;
|
||
break;
|
||
} else if (thisData.children && thisData.children.length) {
|
||
data = this.getChildrenDataByRowKey(rowKey, thisData);
|
||
if (data && data[this.rowKey] === rowKey) return data;
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
getChildrenDataByRowKey (rowKey, cloneData) {
|
||
let data = null;
|
||
if (cloneData.children && cloneData.children.length) {
|
||
for (let i = 0; i < cloneData.children.length; i++) {
|
||
const item = cloneData.children[i];
|
||
if (item[this.rowKey] === rowKey) {
|
||
data = item;
|
||
break;
|
||
} else if (item.children && item.children.length) {
|
||
data = this.getChildrenDataByRowKey(rowKey, item);
|
||
if (data) {
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
selectAll (status) {
|
||
// this.rebuildData.forEach((data) => {
|
||
// if(this.objData[data._index]._isDisabled){
|
||
// this.objData[data._index]._isChecked = false;
|
||
// }else{
|
||
// this.objData[data._index]._isChecked = status;
|
||
// }
|
||
|
||
// });
|
||
for (const data of this.rebuildData) {
|
||
const objData = this.objData[data._index];
|
||
if (!objData._isDisabled) {
|
||
objData._isChecked = status;
|
||
}
|
||
if (data.children && data.children.length) {
|
||
this.selectAllChildren(objData, status);
|
||
}
|
||
}
|
||
const selection = this.getSelection();
|
||
if (status) {
|
||
this.$emit('on-select-all', selection);
|
||
} else {
|
||
this.$emit('on-select-all-cancel', selection);
|
||
}
|
||
this.$emit('on-selection-change', selection);
|
||
},
|
||
selectAllChildren (data, status) {
|
||
if (data.children && data.children.length) {
|
||
data.children.map(item => {
|
||
if (!item._isDisabled) {
|
||
item._isChecked = status;
|
||
}
|
||
if (item.children && item.children.length) {
|
||
this.selectAllChildren(item, status);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
fixedHeader () {
|
||
if (this.height || this.maxHeight) {
|
||
this.$nextTick(() => {
|
||
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;
|
||
if (this.height) {
|
||
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
|
||
} else if (this.maxHeight) {
|
||
this.bodyHeight = this.maxHeight - titleHeight - headerHeight - footerHeight;
|
||
}
|
||
this.$nextTick(()=>this.fixedBody());
|
||
});
|
||
} else {
|
||
this.bodyHeight = 0;
|
||
this.$nextTick(()=>this.fixedBody());
|
||
}
|
||
},
|
||
fixedBody (){
|
||
if (this.$refs.header) {
|
||
this.headerWidth = this.$refs.header.children[0].offsetWidth;
|
||
this.headerHeight = this.$refs.header.children[0].offsetHeight;
|
||
//this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
|
||
}
|
||
|
||
if (!this.$refs.tbody || !this.data || this.data.length === 0) {
|
||
this.showVerticalScrollBar = false;
|
||
}
|
||
else{
|
||
let bodyContentEl = this.$refs.tbody.$el;
|
||
let bodyEl = bodyContentEl.parentElement;
|
||
let bodyContentHeight = bodyContentEl.offsetHeight;
|
||
let bodyHeight = bodyEl.offsetHeight;
|
||
|
||
this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
|
||
|
||
if(this.showVerticalScrollBar){
|
||
bodyEl.classList.add(this.prefixCls +'-overflowY');
|
||
}else{
|
||
bodyEl.classList.remove(this.prefixCls +'-overflowY');
|
||
}
|
||
if(this.showHorizontalScrollBar){
|
||
bodyEl.classList.add(this.prefixCls +'-overflowX');
|
||
}else{
|
||
bodyEl.classList.remove(this.prefixCls +'-overflowX');
|
||
}
|
||
}
|
||
},
|
||
|
||
hideColumnFilter () {
|
||
this.cloneColumns.forEach((col) => col._filterVisible = false);
|
||
},
|
||
handleBodyScroll (event) {
|
||
// 4.7.0
|
||
this.scrollOnTheLeft = event.target.scrollLeft === 0;
|
||
this.scrollOnTheRight = event.target.scrollWidth === event.target.scrollLeft + event.target.clientWidth;
|
||
|
||
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;
|
||
if (this.showSummary && this.$refs.summary) this.$refs.summary.$el.scrollLeft = event.target.scrollLeft;
|
||
this.hideColumnFilter();
|
||
},
|
||
handleFixedMousewheel(event) {
|
||
let deltaY = event.deltaY;
|
||
if(!deltaY && event.detail){
|
||
deltaY = event.detail * 40;
|
||
}
|
||
if(!deltaY && event.wheelDeltaY){
|
||
deltaY = -event.wheelDeltaY;
|
||
}
|
||
if(!deltaY && event.wheelDelta){
|
||
deltaY = -event.wheelDelta;
|
||
}
|
||
if(!deltaY) return;
|
||
const body = this.$refs.body;
|
||
const currentScrollTop = body.scrollTop;
|
||
if (deltaY < 0 && currentScrollTop !== 0) {
|
||
event.preventDefault();
|
||
}
|
||
if (deltaY > 0 && body.scrollHeight - body.clientHeight > currentScrollTop) {
|
||
event.preventDefault();
|
||
}
|
||
//body.scrollTop += deltaY;
|
||
let step = 0;
|
||
let timeId = setInterval(()=>{
|
||
step += 5;
|
||
if(deltaY>0){
|
||
body.scrollTop += 2;
|
||
}
|
||
else{
|
||
body.scrollTop -= 2;
|
||
}
|
||
if(step >= Math.abs(deltaY)){
|
||
clearInterval(timeId);
|
||
}
|
||
}, 5);
|
||
},
|
||
handleMouseWheel (event) {
|
||
const deltaX = event.deltaX;
|
||
const $body = this.$refs.body;
|
||
|
||
if (deltaX > 0) {
|
||
$body.scrollLeft = $body.scrollLeft + 10;
|
||
} else {
|
||
$body.scrollLeft = $body.scrollLeft - 10;
|
||
}
|
||
},
|
||
sortData (data, type, index) {
|
||
const key = this.cloneColumns[index].key;
|
||
data.sort((a, b) => {
|
||
if (this.cloneColumns[index].sortMethod) {
|
||
return this.cloneColumns[index].sortMethod(a[key], b[key], type);
|
||
} else {
|
||
if (type === 'asc') {
|
||
return a[key] > b[key] ? 1 : -1;
|
||
} else if (type === 'desc') {
|
||
return a[key] < b[key] ? 1 : -1;
|
||
}
|
||
}
|
||
});
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].children && data[i].children.length) {
|
||
data[i].children = this.sortData(data[i].children, type, index);
|
||
}
|
||
}
|
||
return data;
|
||
},
|
||
handleSort (_index, type) {
|
||
const index = this.GetOriginalIndex(_index);
|
||
this.cloneColumns.forEach((col) => col._sortType = 'normal');
|
||
|
||
const key = this.cloneColumns[index].key;
|
||
if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort
|
||
if (type === 'normal') {
|
||
this.rebuildData = this.makeDataWithFilter();
|
||
} else {
|
||
this.rebuildData = this.sortData(this.rebuildData, type, index);
|
||
}
|
||
}
|
||
this.cloneColumns[index]._sortType = type;
|
||
|
||
this.$emit('on-sort-change', {
|
||
column: JSON.parse(JSON.stringify(this.allColumns[this.cloneColumns[index]._index])),
|
||
key: key,
|
||
order: type
|
||
});
|
||
},
|
||
handleFilterHide (index) { // clear checked that not filter now
|
||
if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = [];
|
||
},
|
||
filterData (data, column) {
|
||
return data.filter((row) => {
|
||
//如果定义了远程过滤方法则忽略此方法
|
||
if (typeof column.filterRemote === 'function') return true;
|
||
|
||
let status = !column._filterChecked.length;
|
||
for (let i = 0; i < column._filterChecked.length; i++) {
|
||
status = column.filterMethod(column._filterChecked[i], row);
|
||
if (status) break;
|
||
}
|
||
return status;
|
||
});
|
||
},
|
||
filterOtherData (data, index) {
|
||
let column = this.cloneColumns[index];
|
||
if (typeof column.filterRemote === 'function') {
|
||
column.filterRemote.call(this.$parent, column._filterChecked, column.key, column);
|
||
}
|
||
|
||
this.cloneColumns.forEach((col, colIndex) => {
|
||
if (colIndex !== index) {
|
||
data = this.filterData(data, col);
|
||
}
|
||
});
|
||
return data;
|
||
},
|
||
handleFilter (index) {
|
||
const column = this.cloneColumns[index];
|
||
let filterData = this.makeDataWithSort();
|
||
|
||
// filter others first, after filter this column
|
||
filterData = this.filterOtherData(filterData, index);
|
||
this.rebuildData = this.filterData(filterData, column);
|
||
|
||
this.cloneColumns[index]._isFiltered = true;
|
||
this.cloneColumns[index]._filterVisible = false;
|
||
this.$emit('on-filter-change', column);
|
||
},
|
||
/**
|
||
* #2832
|
||
* 应该区分当前表头的 column 是左固定还是右固定
|
||
* 否则执行到 $parent 时，方法的 index 与 cloneColumns 的 index 是不对应的
|
||
* 左固定和右固定，要区分对待
|
||
* 所以，此方法用来获取正确的 index
|
||
* */
|
||
GetOriginalIndex (_index) {
|
||
return this.cloneColumns.findIndex(item => item._index === _index);
|
||
},
|
||
handleFilterSelect (_index, value) {
|
||
const index = this.GetOriginalIndex(_index);
|
||
this.cloneColumns[index]._filterChecked = [value];
|
||
this.handleFilter(index);
|
||
},
|
||
handleFilterReset (_index) {
|
||
const index = this.GetOriginalIndex(_index);
|
||
this.cloneColumns[index]._isFiltered = false;
|
||
this.cloneColumns[index]._filterVisible = false;
|
||
this.cloneColumns[index]._filterChecked = [];
|
||
|
||
let filterData = this.makeDataWithSort();
|
||
filterData = this.filterOtherData(filterData, index);
|
||
this.rebuildData = filterData;
|
||
this.$emit('on-filter-change', this.cloneColumns[index]);
|
||
},
|
||
makeData () {
|
||
let data = deepCopy(this.data);
|
||
data.forEach((row, index) => {
|
||
row._index = index;
|
||
row._rowKey = (typeof this.rowKey) === 'string' ? row[this.rowKey] : rowKey++;
|
||
if (row.children && row.children.length) {
|
||
row.children = this.makeChildrenData(row);
|
||
}
|
||
});
|
||
return data;
|
||
},
|
||
makeChildrenData (data) {
|
||
if (data.children && data.children.length) {
|
||
return data.children.map((row, index) => {
|
||
const newRow = deepCopy(row);
|
||
newRow._index = index;
|
||
newRow._rowKey = (typeof this.rowKey) === 'string' ? newRow[this.rowKey] : rowKey++;
|
||
if (newRow.children && newRow.children.length) {
|
||
newRow.children = this.makeChildrenData(newRow);
|
||
}
|
||
return newRow;
|
||
});
|
||
} else {
|
||
return data;
|
||
}
|
||
},
|
||
makeDataWithSort () {
|
||
let data = this.makeData();
|
||
let sortType = 'normal';
|
||
let sortIndex = -1;
|
||
let isCustom = false;
|
||
|
||
for (let i = 0; i < this.cloneColumns.length; i++) {
|
||
if (this.cloneColumns[i]._sortType !== 'normal') {
|
||
sortType = this.cloneColumns[i]._sortType;
|
||
sortIndex = i;
|
||
isCustom = this.cloneColumns[i].sortable === 'custom';
|
||
break;
|
||
}
|
||
}
|
||
if (sortType !== 'normal' && !isCustom) data = this.sortData(data, sortType, sortIndex);
|
||
return data;
|
||
},
|
||
makeDataWithFilter () {
|
||
let data = this.makeData();
|
||
this.cloneColumns.forEach(col => data = this.filterData(data, col));
|
||
return data;
|
||
},
|
||
makeDataWithSortAndFilter () {
|
||
let data = this.makeDataWithSort();
|
||
this.cloneColumns.forEach(col => data = this.filterData(data, col));
|
||
return data;
|
||
},
|
||
makeObjBaseData (row) {
|
||
const newRow = deepCopy(row);
|
||
if ((typeof this.rowKey) === 'string') {
|
||
newRow._rowKey = newRow[this.rowKey];
|
||
}
|
||
newRow._isHover = false;
|
||
if (newRow._disabled) {
|
||
newRow._isDisabled = newRow._disabled;
|
||
} else {
|
||
newRow._isDisabled = false;
|
||
}
|
||
if (newRow._checked) {
|
||
newRow._isChecked = newRow._checked;
|
||
} else {
|
||
newRow._isChecked = false;
|
||
}
|
||
if (newRow._expanded) {
|
||
newRow._isExpanded = newRow._expanded;
|
||
} else {
|
||
newRow._isExpanded = false;
|
||
}
|
||
if (newRow._highlight) {
|
||
newRow._isHighlight = newRow._highlight;
|
||
} else {
|
||
newRow._isHighlight = false;
|
||
}
|
||
return newRow;
|
||
},
|
||
makeObjData () {
|
||
let data = {};
|
||
this.data.forEach((row, index) => {
|
||
const newRow = this.makeObjBaseData(row);
|
||
if (newRow.children && newRow.children.length) {
|
||
if (newRow._showChildren) {
|
||
newRow._isShowChildren = newRow._showChildren;
|
||
} else {
|
||
newRow._isShowChildren = false;
|
||
}
|
||
newRow.children = this.makeChildrenObjData(newRow);
|
||
}
|
||
// else if ('_loading' in newRow && newRow.children && newRow.children.length === 0) {
|
||
// newRow._isShowChildren = false;
|
||
// }
|
||
data[index] = newRow;
|
||
});
|
||
return data;
|
||
},
|
||
makeChildrenObjData (data) {
|
||
if (data.children && data.children.length) {
|
||
return data.children.map(row => {
|
||
const newRow = this.makeObjBaseData(row);
|
||
if (newRow._showChildren) {
|
||
newRow._isShowChildren = newRow._showChildren;
|
||
} else {
|
||
newRow._isShowChildren = false;
|
||
}
|
||
if (newRow.children && newRow.children.length) {
|
||
newRow.children = this.makeChildrenObjData(newRow);
|
||
}
|
||
return newRow;
|
||
});
|
||
} else {
|
||
return data;
|
||
}
|
||
},
|
||
// 修改列，设置一个隐藏的 id，便于后面的多级表头寻找对应的列，否则找不到
|
||
makeColumnsId (columns) {
|
||
return columns.map(item => {
|
||
if ('children' in item) this.makeColumnsId(item.children);
|
||
item.__id = getRandomStr(6);
|
||
return item;
|
||
});
|
||
},
|
||
makeColumns (cols) {
|
||
// 在 data 时，this.allColumns 暂时为 undefined
|
||
let columns = deepCopy(getAllColumns(cols));
|
||
let left = [];
|
||
let right = [];
|
||
let center = [];
|
||
|
||
columns.forEach((column, index) => {
|
||
column._index = index;
|
||
column._columnKey = columnKey++;
|
||
column.width = parseInt(column.width);
|
||
column._width = column.width ? column.width : ''; // update in handleResize()
|
||
column._sortType = 'normal';
|
||
column._filterVisible = false;
|
||
column._isFiltered = false;
|
||
column._filterChecked = [];
|
||
|
||
if ('filterMultiple' in column) {
|
||
column._filterMultiple = column.filterMultiple;
|
||
} else {
|
||
column._filterMultiple = true;
|
||
}
|
||
if ('filteredValue' in column) {
|
||
column._filterChecked = column.filteredValue;
|
||
column._isFiltered = true;
|
||
}
|
||
|
||
if ('sortType' in column) {
|
||
column._sortType = column.sortType;
|
||
}
|
||
|
||
if (column.fixed && column.fixed === 'left') {
|
||
left.push(column);
|
||
} else if (column.fixed && column.fixed === 'right') {
|
||
right.push(column);
|
||
} else {
|
||
center.push(column);
|
||
}
|
||
});
|
||
return left.concat(center).concat(right);
|
||
},
|
||
// create a multiple table-head
|
||
makeColumnRows (fixedType, cols) {
|
||
return convertToRows(cols, fixedType);
|
||
},
|
||
exportCsv (params) {
|
||
if (params.filename) {
|
||
if (params.filename.indexOf('.csv') === -1) {
|
||
params.filename += '.csv';
|
||
}
|
||
} else {
|
||
params.filename = 'table.csv';
|
||
}
|
||
|
||
let columns = [];
|
||
let datas = [];
|
||
if (params.columns && params.data) {
|
||
columns = params.columns;
|
||
datas = params.data;
|
||
} else {
|
||
columns = this.allColumns;
|
||
if (!('original' in params)) params.original = true;
|
||
datas = params.original ? this.data : this.rebuildData;
|
||
}
|
||
|
||
let noHeader = false;
|
||
if ('noHeader' in params) noHeader = params.noHeader;
|
||
|
||
const data = Csv(columns, datas, params, noHeader);
|
||
if (params.callback) params.callback(data);
|
||
else ExportCsv.download(params.filename, data);
|
||
},
|
||
dragAndDrop(a,b) {
|
||
this.$emit('on-drag-drop', a,b);
|
||
},
|
||
handleClickContextMenuOutside () {
|
||
this.contextMenuVisible = false;
|
||
}
|
||
},
|
||
created () {
|
||
if (!this.context) this.currentContext = this.$parent;
|
||
this.showSlotHeader = this.$slots.header !== undefined;
|
||
this.showSlotFooter = this.$slots.footer !== undefined;
|
||
this.rebuildData = this.makeDataWithSortAndFilter();
|
||
},
|
||
mounted () {
|
||
this.handleResize();
|
||
this.$nextTick(() => this.ready = true);
|
||
|
||
on(window, 'resize', this.handleResize);
|
||
this.observer = elementResizeDetectorMaker();
|
||
this.observer.listenTo(this.$el, this.handleResize);
|
||
|
||
this.$on('on-visible-change', (val) => {
|
||
if (val) {
|
||
this.$nextTick(() => {
|
||
this.handleResize();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
beforeDestroy () {
|
||
this.$off('on-visible-change');
|
||
off(window, 'resize', this.handleResize);
|
||
this.observer.removeAllListeners(this.$el);
|
||
this.observer.uninstall(this.$el);
|
||
this.observer = null;
|
||
},
|
||
watch: {
|
||
data: {
|
||
handler () {
|
||
const oldDataLen = this.rebuildData.length;
|
||
this.objData = this.makeObjData();
|
||
this.rebuildData = this.makeDataWithSortAndFilter();
|
||
this.handleResize();
|
||
if (!oldDataLen) {
|
||
this.fixedHeader();
|
||
}
|
||
// here will trigger before clickCurrentRow, so use async
|
||
setTimeout(() => {
|
||
this.cloneData = deepCopy(this.data);
|
||
}, 0);
|
||
},
|
||
deep: true
|
||
},
|
||
columns: {
|
||
handler () {
|
||
// todo 这里有性能问题，可能是左右固定计算属性影响的
|
||
const colsWithId = this.makeColumnsId(this.columns);
|
||
this.allColumns = getAllColumns(colsWithId);
|
||
this.cloneColumns = this.makeColumns(colsWithId);
|
||
|
||
this.columnRows = this.makeColumnRows(false, colsWithId);
|
||
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
|
||
this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
|
||
this.rebuildData = this.makeDataWithSortAndFilter();
|
||
this.handleResize();
|
||
},
|
||
deep: true
|
||
},
|
||
height () {
|
||
this.handleResize();
|
||
},
|
||
maxHeight () {
|
||
this.handleResize();
|
||
},
|
||
showHorizontalScrollBar () {
|
||
this.handleResize();
|
||
},
|
||
showVerticalScrollBar () {
|
||
this.handleResize();
|
||
}
|
||
}
|
||
};
|
||
</script>
|