vxe-table
Version:
A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.
1,647 lines (1,640 loc) • 1.51 MB
JavaScript
import { VxeUI } from '@vxe-ui/core';
export { VxeUI } from '@vxe-ui/core';
import XEUtils from 'xe-utils';
import DomZIndex from 'dom-zindex';
import { defineComponent, watch, reactive, h, ref, inject, createCommentVNode, onMounted, onUnmounted, provide, nextTick, TransitionGroup, computed, Teleport, resolveComponent, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
const { getConfig: getConfig$9 } = VxeUI;
function isEnableConf(conf) {
return conf && conf.enabled !== false;
}
function isEmptyValue(cellValue) {
return cellValue === null || cellValue === undefined || cellValue === '';
}
function parseFile(file) {
const name = file.name;
const tIndex = XEUtils.lastIndexOf(name, '.');
const type = name.substring(tIndex + 1, name.length).toLowerCase();
const filename = name.substring(0, tIndex);
return { filename, type };
}
function nextZIndex() {
return DomZIndex.getNext();
}
function getLastZIndex() {
return DomZIndex.getCurrent();
}
function hasChildrenList(item) {
return item && item.children && item.children.length > 0;
}
function getFuncText(content, args) {
if (XEUtils.eqNull(content)) {
return '';
}
const translate = getConfig$9().translate;
return `${translate ? translate('' + content, args) : content}`;
}
function formatText(value, placeholder) {
return '' + (isEmptyValue(value) ? (placeholder ? getConfig$9().emptyCell : '') : value);
}
/**
* 判断值为：'' | null | undefined 时都属于空值
*/
function eqEmptyValue(cellValue) {
return cellValue === '' || XEUtils.eqNull(cellValue);
}
const version$1 = "4.19.4";
VxeUI.version = version$1;
VxeUI.tableVersion = version$1;
VxeUI.setConfig({
emptyCell: ' ',
table: {
fit: true,
showHeader: true,
animat: true,
delayHover: 250,
autoResize: true,
// minHeight: null,
// keepSource: false,
// showOverflow: null,
// showHeaderOverflow: null,
// showFooterOverflow: null,
// resizeInterval: 500,
// size: null,
// zIndex: null,
// stripe: false,
// border: false,
// round: false,
// emptyText: '暂无数据',
// emptyRender: {
// name: ''
// },
// rowConfig: {
// keyField: '_X_ROW_KEY' // 行数据的唯一主键字段名
// },
resizeConfig: {
// refreshDelay: 20
},
resizableConfig: {
dragMode: 'auto',
showDragTip: true,
isSyncAutoHeight: true,
isSyncAutoWidth: true,
minHeight: 18
},
currentRowConfig: {
strict: true
},
currentColumnConfig: {
strict: true
},
radioConfig: {
// trigger: 'default'
strict: true
},
rowDragConfig: {
showIcon: true,
animation: true,
showGuidesStatus: true,
showDragTip: true
},
columnDragConfig: {
showIcon: true,
animation: true,
showGuidesStatus: true,
showDragTip: true
},
checkboxConfig: {
// trigger: 'default',
strict: true
},
tooltipConfig: {
enterable: true,
defaultPlacement: 'top'
},
headerTooltipConfig: {
enterable: true
},
footerTooltipConfig: {
enterable: true
},
validConfig: {
showErrorMessage: true,
autoClear: true,
autoPos: true,
message: 'inline',
msgMode: 'single',
theme: 'beautify'
},
columnConfig: {
autoOptions: {
isCalcHeader: true,
isCalcBody: true,
isCalcFooter: true
},
maxFixedSize: 4
},
cellConfig: {
padding: true
},
headerCellConfig: {
height: 'unset'
},
footerCellConfig: {
height: 'unset'
},
menuConfig: {
// visibleMethod () {},
// transfer: false,
destroyOnClose: true
},
customConfig: {
// enabled: false,
allowVisible: true,
allowResizable: true,
allowFixed: true,
allowSort: true,
showSortDragButton: true,
showFooter: true,
placement: 'top-right',
// storage: false,
storeOptions: {
visible: true,
resizable: true,
sort: true,
fixed: true
// rowGroup: false,
// aggFunc: false
},
// autoAggGroupValues: false,
// checkMethod () {},
modalOptions: {
showMaximize: true,
mask: true,
lockView: true,
resize: true,
escClosable: true
},
drawerOptions: {
mask: true,
lockView: true,
escClosable: true,
resize: true
}
},
sortConfig: {
// remote: false,
// trigger: 'default',
// orders: ['asc', 'desc', null],
// sortMethod: null,
showIcon: true,
allowClear: true,
allowBtn: true,
iconLayout: 'vertical'
},
filterConfig: {
// remote: false,
// filterMethod: null,
// isEvery: false,
// transfer: false,
destroyOnClose: true,
multiple: true,
showIcon: true,
maxHeight: 280
},
floatingFilterConfig: {
// enabled: false
},
aggregateConfig: {
padding: true,
placement: 'left',
rowField: 'id',
parentField: '_X_ROW_PARENT_KEY',
childrenField: '_X_ROW_CHILDREN',
mapChildrenField: '_X_ROW_CHILD_LIST',
indent: 20,
showIcon: true,
maxGroupSize: 4,
showAggFuncTitle: true
},
treeConfig: {
padding: true,
rowField: 'id',
parentField: 'parentId',
childrenField: 'children',
hasChildField: 'hasChild',
mapChildrenField: '_X_ROW_CHILD',
indent: 20,
showIcon: true,
showRootLine: true
},
expandConfig: {
// trigger: 'default',
showIcon: true,
mode: 'fixed'
},
editConfig: {
// mode: 'cell',
showIcon: true,
showAsterisk: true,
autoFocus: true
},
importConfig: {
_typeMaps: {
csv: 1,
html: 1,
xml: 1,
txt: 1
}
},
exportConfig: {
_typeMaps: {
csv: 1,
html: 1,
xml: 1,
txt: 1
}
},
printConfig: {},
mouseConfig: {
extension: true
},
keyboardConfig: {
isAll: true,
isEsc: true
},
areaConfig: {
autoClear: true,
selectCellByHeader: true,
selectCellByBody: true,
extendDirection: {
top: true,
left: true,
bottom: true,
right: true
}
},
clipConfig: {
isCopy: true,
isCut: true,
isPaste: true
},
fnrConfig: {
isFind: true,
isReplace: true
},
virtualXConfig: {
// enabled: false,
gt: 24,
preSize: 1,
oSize: 0
},
virtualYConfig: {
// enabled: false,
// mode: 'wheel',
gt: 100,
preSize: 1,
oSize: 0
},
scrollbarConfig: {
// width: 14,
// height: 14,
x: {
// position: 'bottom',
visible: true
},
y: {
// position: 'right',
visible: true
}
},
undoRedoHistoryConfig: {
stackSize: 50
}
},
grid: {
// size: null,
// zoomConfig: {
// escRestore: true
// },
formConfig: {
enabled: true
},
pagerConfig: {
enabled: true
// perfect: false
},
toolbarConfig: {
enabled: true
// perfect: false
},
proxyConfig: {
enabled: true,
autoLoad: true,
showLoading: true,
showResponseMsg: true,
showActionMsg: true,
response: {
list: 'list',
result: 'result',
total: 'page.total',
footerData: 'footerData',
message: 'message'
}
// beforeItem: null,
// beforeColumn: null,
// beforeQuery: null,
// afterQuery: null,
// beforeDelete: null,
// afterDelete: null,
// beforeSave: null,
// afterSave: null
}
},
toolbar: {
// size: null,
// import: {
// mode: 'covering'
// },
// export: {
// types: ['csv', 'html', 'xml', 'txt']
// },
// buttons: []
},
gantt: {}
});
const iconPrefix = 'vxe-table-icon-';
VxeUI.setIcon({
// table
TABLE_SORT_ASC: iconPrefix + 'caret-up',
TABLE_SORT_DESC: iconPrefix + 'caret-down',
TABLE_FILTER_NONE: iconPrefix + 'funnel',
TABLE_FILTER_MATCH: iconPrefix + 'funnel',
TABLE_EDIT: iconPrefix + 'edit',
TABLE_TITLE_PREFIX: iconPrefix + 'question-circle-fill',
TABLE_TITLE_SUFFIX: iconPrefix + 'question-circle-fill',
TABLE_TREE_LOADED: iconPrefix + 'spinner roll',
TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90',
TABLE_TREE_CLOSE: iconPrefix + 'caret-right',
TABLE_EXPAND_LOADED: iconPrefix + 'spinner roll',
TABLE_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
TABLE_EXPAND_CLOSE: iconPrefix + 'arrow-right',
TABLE_CHECKBOX_CHECKED: iconPrefix + 'checkbox-checked-fill',
TABLE_CHECKBOX_UNCHECKED: iconPrefix + 'checkbox-unchecked',
TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate-fill',
TABLE_CHECKBOX_DISABLED_UNCHECKED: iconPrefix + 'checkbox-unchecked-fill',
TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
TABLE_RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
TABLE_MENU_OPTION_LOADING: iconPrefix + 'repeat roll',
TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
TABLE_DRAG_COLUMN: iconPrefix + 'drag-handle',
TABLE_DRAG_STATUS_ROW: iconPrefix + 'sort',
TABLE_DRAG_STATUS_SUB_ROW: iconPrefix + 'add-sub',
TABLE_DRAG_STATUS_AGG_GROUP: iconPrefix + 'grouping',
TABLE_DRAG_STATUS_AGG_VALUES: iconPrefix + 'values',
TABLE_DRAG_STATUS_COLUMN: iconPrefix + 'swap',
TABLE_DRAG_DISABLED: iconPrefix + 'no-drop',
TABLE_ROW_GROUP_OPEN: iconPrefix + 'arrow-right rotate90',
TABLE_ROW_GROUP_CLOSE: iconPrefix + 'arrow-right',
TABLE_AGGREGATE_GROUPING: iconPrefix + 'grouping',
TABLE_AGGREGATE_VALUES: iconPrefix + 'values',
TABLE_AGGREGATE_SORT: iconPrefix + 'drag-handle',
TABLE_AGGREGATE_DELETE: iconPrefix + 'close',
// toolbar
TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
TOOLBAR_TOOLS_IMPORT: iconPrefix + 'upload',
TOOLBAR_TOOLS_EXPORT: iconPrefix + 'download',
TOOLBAR_TOOLS_PRINT: iconPrefix + 'print',
TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
TOOLBAR_TOOLS_FIXED_LEFT: iconPrefix + 'fixed-left',
TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE: iconPrefix + 'fixed-left-fill',
TOOLBAR_TOOLS_FIXED_RIGHT: iconPrefix + 'fixed-right',
TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE: iconPrefix + 'fixed-right-fill'
});
const setTheme = VxeUI.setTheme;
const getTheme = VxeUI.getTheme;
const setConfig = VxeUI.setConfig;
const getConfig$8 = VxeUI.getConfig;
const setIcon = VxeUI.setIcon;
const getIcon$8 = VxeUI.getIcon;
const setLanguage = VxeUI.setLanguage;
const setI18n = VxeUI.setI18n;
const getI18n$e = VxeUI.getI18n;
const globalEvents$3 = VxeUI.globalEvents;
const globalResize$1 = VxeUI.globalResize;
const renderer$c = VxeUI.renderer;
const validators$1 = VxeUI.validators;
const menus$1 = VxeUI.menus;
const formats$2 = VxeUI.formats;
const commands$2 = VxeUI.commands;
const interceptor$1 = VxeUI.interceptor;
const clipboard = VxeUI.clipboard;
const log$1 = VxeUI.log;
const hooks$8 = VxeUI.hooks;
const use = VxeUI.use;
/**
* 已废弃
* @deprecated
*/
const setup = (options) => {
return VxeUI.setConfig(options);
};
VxeUI.setup = setup;
/**
* 已废弃
* @deprecated
*/
const config = (options) => {
return VxeUI.setConfig(options);
};
VxeUI.config = config;
/**
* 已废弃
* @deprecated
*/
const t = (key, args) => {
return VxeUI.getI18n(key, args);
};
VxeUI.t = t;
/**
* 已废弃
* @deprecated
*/
const _t = (content, args) => {
return getFuncText(content, args);
};
VxeUI._t = _t;
/**
* 已废弃，兼容老版本
* @deprecated
*/
const VXETable = VxeUI;
/**
* 已废弃，兼容老版本
* @deprecated
*/
const saveFile = (options) => {
return VxeUI.saveFile(options);
};
/**
* 已废弃，兼容老版本
* @deprecated
*/
const readFile = (options) => {
return VxeUI.readFile(options);
};
/**
* 已废弃，兼容老版本
* @deprecated
*/
const print = (options) => {
return VxeUI.print(options);
};
/**
* 已废弃，兼容老版本
* @deprecated
*/
const modal = {
/**
* 已废弃，兼容老版本
* @deprecated
*/
get(id) {
return VxeUI.modal.get(id);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
close(id) {
return VxeUI.modal.close(id);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
open(options) {
return VxeUI.modal.open(options);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
alert(content, title, options) {
return VxeUI.modal.alert(content, title, options);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
confirm(content, title, options) {
return VxeUI.modal.confirm(content, title, options);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
message(content, options) {
return VxeUI.modal.message(content, options);
},
/**
* 已废弃，兼容老版本
* @deprecated
*/
notification(content, title, options) {
return VxeUI.modal.notification(content, title, options);
}
};
const defineVxeComponent = defineComponent;
const { log } = VxeUI;
const version = `table v${"4.19.4"}`;
const warnLog = log.create('warn', version);
const errLog = log.create('error', version);
const { getI18n: getI18n$d, formats: formats$1, renderer: renderer$b } = VxeUI;
class ColumnInfo {
/* eslint-disable @typescript-eslint/no-use-before-define */
constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
const tableProps = $xeTable.props;
const $xeGrid = $xeTable.xeGrid;
const $xeGantt = $xeTable.xeGantt;
const $xeGGWrapper = $xeGrid || $xeGantt;
const { field, editRender, filterRender, headerFormatter } = _vm;
const colId = _vm.colId || XEUtils.uniqueId('col_');
const formatter = _vm.formatter;
const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
const flCompConf = isEnableConf(filterRender) ? renderer$b.get(filterRender.name) : null;
const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
const filters = toFilters(_vm.filters, colId);
if (headerFormatter) {
errLog('vxe.error.notProp', ['header-formatter']);
}
const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
if (_vm.type && types.indexOf(_vm.type) === -1) {
warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
}
if (XEUtils.isBoolean(_vm.cellRender) || (_vm.cellRender && !XEUtils.isObject(_vm.cellRender))) {
warnLog('vxe.error.errProp', [`column.cell-render=${_vm.cellRender}`, 'column.cell-render={}']);
}
if (XEUtils.isBoolean(_vm.editRender) || (_vm.editRender && !XEUtils.isObject(_vm.editRender))) {
warnLog('vxe.error.errProp', [`column.edit-render=${_vm.editRender}`, 'column.edit-render={}']);
}
if (_vm.type === 'expand') {
const { treeConfig } = tableProps;
const { computeTreeOpts } = $xeTable.getComputeMaps();
const treeOpts = computeTreeOpts.value;
if (treeConfig && (treeOpts.showLine || treeOpts.line)) {
errLog('vxe.error.errConflicts', ['tree-config.showLine', 'column.type=expand']);
}
}
if (formatter) {
if (XEUtils.isString(formatter)) {
const gFormatOpts = formats$1.get(formatter) || XEUtils[formatter];
if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod)) {
errLog('vxe.error.notFormats', [formatter]);
}
}
else if (XEUtils.isArray(formatter)) {
const gFormatOpts = formats$1.get(formatter[0]) || XEUtils[formatter[0]];
if (!gFormatOpts || !XEUtils.isFunction(gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod)) {
errLog('vxe.error.notFormats', [formatter[0]]);
}
}
}
if (_vm.aggFunc) {
if (!$xeTable.handlePivotTableAggData && _vm.aggFunc !== true) {
errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true']);
}
}
if (field && editRender) {
if (editRender.startField && `${editRender.startField}`.indexOf(field) >= 0) {
errLog('vxe.error.modelConflicts', [`field=${field}`, `edit-render.startField=${editRender.startField}`]);
}
if (editRender.endField && `${editRender.endField}`.indexOf(field) >= 0) {
errLog('vxe.error.modelConflicts', [`field=${field}`, `edit-render.endField=${editRender.endField}`]);
}
}
Object.assign(this, {
// 基本属性
type: _vm.type,
property: _vm.field,
field: field,
title: _vm.title,
width: _vm.width,
minWidth: _vm.minWidth,
maxWidth: _vm.maxWidth,
resizable: _vm.resizable,
fixed: _vm.fixed,
align: _vm.align,
headerAlign: _vm.headerAlign,
footerAlign: _vm.footerAlign,
showOverflow: _vm.showOverflow,
showHeaderOverflow: _vm.showHeaderOverflow,
showFooterOverflow: _vm.showFooterOverflow,
className: _vm.className,
headerClassName: _vm.headerClassName,
footerClassName: _vm.footerClassName,
formatter: formatter,
headerFormatter: _vm.headerFormatter,
footerFormatter: _vm.footerFormatter,
padding: _vm.padding,
verticalAlign: _vm.verticalAlign,
sortable: _vm.sortable,
sortBy: _vm.sortBy,
sortType: _vm.sortType,
filters: filters,
filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
filterMethod: _vm.filterMethod,
filterResetMethod: _vm.filterResetMethod,
filterRecoverMethod: _vm.filterRecoverMethod,
filterRender: filterRender,
floatingFilters: _vm.floatingFilters,
rules: _vm.rules,
rowGroupNode: _vm.rowGroupNode,
treeNode: _vm.treeNode,
dragSort: _vm.dragSort,
rowResize: _vm.rowResize,
cellType: _vm.cellType,
cellRender: _vm.cellRender,
editRender: editRender,
contentRender: _vm.contentRender,
headerExportMethod: _vm.headerExportMethod,
exportMethod: _vm.exportMethod,
footerExportMethod: _vm.footerExportMethod,
titleHelp: _vm.titleHelp,
titlePrefix: _vm.titlePrefix,
titleSuffix: _vm.titleSuffix,
aggFunc: _vm.aggFunc,
copyMethod: _vm.copyMethod,
cutMethod: _vm.cutMethod,
pasteMethod: _vm.pasteMethod,
// 自定义参数
params: _vm.params,
// 渲染属性
id: colId,
parentId: null,
visible,
// 内部属性（一旦被使用，将导致不可升级版本）
defaultParentId: null,
halfVisible: false,
defaultVisible: visible,
defaultFixed: _vm.fixed,
defaultAggGroup: _vm.aggGroup,
defaultAggFunc: _vm.aggFunc,
checked: false,
halfChecked: false,
disabled: false,
// 分组层级
level: 1,
// 跨行
rowSpan: 1,
// 跨列
colSpan: 1,
// 数据排序
order: null,
sortTime: 0,
// 列排序
sortNumber: 0,
renderSortNumber: 0,
renderAggFn: '',
renderAggDigits: null,
renderAggFormat: null,
renderFixed: '',
renderVisible: false,
renderWidth: 0,
renderHeight: 0,
renderResizeWidth: 0,
renderAutoWidth: 0,
resizeWidth: 0,
renderLeft: 0,
renderArgs: [],
model: {},
renderHeader: renderHeader || _vm.renderHeader,
renderCell: renderCell || _vm.renderCell,
renderFooter: renderFooter || _vm.renderFooter,
renderData: renderData,
// 单元格插槽，只对 grid 有效
slots: _vm.slots
});
if (ctFilterOptions && (!filters || !filters.length)) {
this.filters = toFilters(ctFilterOptions({ $table: $xeTable, column: this }), colId);
}
if ($xeGGWrapper) {
const { computeProxyOpts } = $xeGGWrapper.getComputeMaps();
const proxyOpts = computeProxyOpts.value;
if (proxyOpts.beforeColumn) {
proxyOpts.beforeColumn({ $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, column: this });
}
}
}
getTitle() {
return getFuncText(this.title || (this.type === 'seq' ? getI18n$d('vxe.table.seqTitle') : ''));
}
getKey() {
const { type } = this;
return this.field || (type ? `type=${type}` : null);
}
update(name, value) {
// 不支持直接修改的属性
if (name !== 'filters') {
if (name === 'field') {
// 兼容旧属性
this.property = value;
}
this[name] = value;
}
}
}
const reClsMap = {};
let tpImgEl;
function initTpImg() {
if (!tpImgEl) {
tpImgEl = new Image();
tpImgEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
}
return tpImgEl;
}
function getTpImg() {
if (!tpImgEl) {
return initTpImg();
}
return tpImgEl;
}
function getPropClass(property, params) {
return property ? XEUtils.isFunction(property) ? property(params) : property : '';
}
function getClsRE(cls) {
if (!reClsMap[cls]) {
reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
}
return reClsMap[cls];
}
function isPx(val) {
return val && /^\d+(\.\d+)?(px)?$/.test(val);
}
function isScale(val) {
return val && /^\d+(\.\d+)?%$/.test(val);
}
function hasClass(elem, cls) {
return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
}
function removeClass(elem, cls) {
if (elem && hasClass(elem, cls)) {
elem.className = elem.className.replace(getClsRE(cls), '');
}
}
function addClass(elem, cls) {
if (elem && !hasClass(elem, cls)) {
removeClass(elem, cls);
elem.className = `${elem.className} ${cls}`;
}
}
function hasControlKey(evnt) {
return evnt.ctrlKey || evnt.metaKey;
}
function toCssUnit(val, unit = 'px') {
if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
return `${val}${unit}`;
}
return `${val || ''}`;
}
function queryElement(elem, selector) {
if (elem) {
return elem.querySelector(selector);
}
return null;
}
function getDomNode() {
const documentElement = document.documentElement;
const bodyElem = document.body;
return {
scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
};
}
function getOffsetHeight(elem) {
return elem ? elem.offsetHeight : 0;
}
function getPaddingTopBottomSize(elem) {
if (elem) {
const computedStyle = getComputedStyle(elem);
const paddingTop = XEUtils.toNumber(computedStyle.paddingTop);
const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom);
return paddingTop + paddingBottom;
}
return 0;
}
function setScrollTop(elem, scrollTop) {
if (elem) {
elem.scrollTop = scrollTop;
}
}
function setScrollLeft(elem, scrollLeft) {
if (elem) {
elem.scrollLeft = scrollLeft;
}
}
// export function setScrollLeftAndTop (elem: HTMLElement | null, scrollLeft: number, scrollTop: number) {
// if (elem) {
// elem.scrollLeft = scrollLeft
// elem.scrollTop = scrollTop
// }
// }
function updateCellTitle(overflowElem, column) {
const content = column.type === 'html' ? overflowElem.innerText : overflowElem.textContent;
if (overflowElem.getAttribute('title') !== content) {
overflowElem.setAttribute('title', content);
}
}
function checkTargetElement(target, exEls, endEl) {
let targetEl = target;
if (!exEls || !exEls.length) {
return false;
}
const [exEl1, exEl2, exEl3] = exEls;
while (targetEl) {
if (exEl1 === targetEl || (exEl2 && targetEl === exEl2) || (exEl3 && targetEl === exEl3)) {
return true;
}
if (endEl && targetEl === endEl) {
return false;
}
targetEl = targetEl.parentElement;
}
return false;
}
/**
* 检查触发源是否属于目标节点
*/
function getEventTargetNode(evnt, container, queryCls, queryMethod) {
let targetElem;
let target = (evnt.target.shadowRoot && evnt.composed) ? (evnt.composedPath()[0] || evnt.target) : evnt.target;
while (target && target.nodeType && target !== document) {
if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
targetElem = target;
}
else if (target === container) {
return { flag: queryCls ? !!targetElem : true, container, targetElem: targetElem };
}
target = target.parentNode;
}
return { flag: false };
}
function getAbsolutePos(elem) {
const bounding = elem.getBoundingClientRect();
const boundingTop = bounding.top;
const boundingLeft = bounding.left;
const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth };
}
function hasEventInputTarget(target) {
const tagName = target ? target.tagName : '';
return tagName && ['input', 'textarea'].includes((tagName.toLowerCase()));
}
const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded';
const scrollIntoView = 'scrollIntoView';
function scrollToView(elem) {
if (elem) {
if (elem[scrollIntoViewIfNeeded]) {
elem[scrollIntoViewIfNeeded]();
}
else if (elem[scrollIntoView]) {
elem[scrollIntoView]();
}
}
}
function triggerEvent(targetElem, type) {
if (targetElem) {
targetElem.dispatchEvent(new Event(type));
}
}
let wtlFrame;
function wheelScrollLeftTo(scrollLeft, cb) {
if (wtlFrame) {
cancelAnimationFrame(wtlFrame);
}
wtlFrame = requestAnimationFrame(() => {
cb(scrollLeft);
wtlFrame = null;
});
}
let wtaFrame;
function wheelScrollTopTo(diffNum, cb) {
if (wtaFrame) {
cancelAnimationFrame(wtaFrame);
}
wtaFrame = requestAnimationFrame(() => {
const offsetTop = diffNum;
cb(offsetTop);
wtaFrame = null;
});
}
function createInternalData$3() {
return {
tZindex: 0,
currKeyField: '',
isCurrDeepKey: false,
elemStore: {},
// 存放横向 X 虚拟滚动相关的信息
scrollXStore: {
preloadSize: 0,
offsetSize: 0,
visibleSize: 0,
visibleStartIndex: 0,
visibleEndIndex: 0,
startIndex: 0,
endIndex: 0
},
// 存放纵向 Y 虚拟滚动相关信息
scrollYStore: {
preloadSize: 0,
offsetSize: 0,
visibleSize: 0,
visibleStartIndex: 0,
visibleEndIndex: 0,
startIndex: 0,
endIndex: 0
},
// 表格宽度
tableWidth: 0,
// 表格高度
tableHeight: 0,
customHeight: 0,
customMinHeight: 0,
customMaxHeight: 0,
// 当前 hover 行
hoverRow: null,
// 最后滚动位置
lastScrollLeft: 0,
lastScrollTop: 0,
// 单选框属性，已选中保留的行
radioReserveRow: null,
// 复选框属性，已选中保留的行集合
checkboxReserveRowMap: {},
// 行数据，已展开保留的行集合
rowExpandedReserveRowMap: {},
// 树结构数据，已展开保留的行集合
treeExpandedReserveRowMap: {},
// 树结构数据，不确定状态的集合
treeIndeterminateRowMaps: {},
// 列表完整数据、条件处理后
tableFullData: [],
afterFullData: [],
afterTreeFullData: [],
afterGroupFullData: [],
// 列表条件处理后数据集合
afterFullRowMaps: {},
// 树结构完整数据、条件处理后
tableFullTreeData: [],
// 行分组全量数据、条件处理后
tableFullGroupData: [],
tableSynchData: [],
tableSourceData: [],
// 收集的列配置（带分组）
collectColumn: [],
// 完整所有列（不带分组）
tableFullColumn: [],
// 渲染所有列
visibleColumn: [],
// 全量数据集（包括当前和已删除）
fullAllDataRowIdData: {},
// 数据集（仅当前）
fullDataRowIdData: {},
// 数据集（仅可视）
visibleDataRowIdData: {},
keepUpdateFieldMaps: {},
footerFullDataRowData: {},
// 渲染中缓存数据
sourceDataRowIdData: {},
fullColumnIdData: {},
fullColumnFieldData: {},
// 当前行
currentRow: null,
// 合并表头单元格的数据
mergeHeaderList: [],
mergeHeaderMaps: {},
// 已合并单元格数据集合
mergeHeaderCellMaps: {},
mergeHeaderRowMaps: {},
mergeHeaderColMaps: {},
// 合并单元格的数据
mergeBodyList: [],
mergeBodyMaps: {},
// 已合并单元格数据集合
mergeBodyCellMaps: {},
mergeBodyRowMaps: {},
mergeBodyColMaps: {},
// 合并表尾的数据
mergeFooterList: [],
mergeFooterMaps: {},
// 已合并表尾数据集合
mergeFooterCellMaps: {},
mergeFooterRowMaps: {},
mergeFooterColMaps: {},
// 已展开的行集合
rowExpandedMaps: {},
// 懒加载中的展开行的集合
rowExpandLazyLoadedMaps: {},
// 已展开的分组行
rowGroupExpandedMaps: {},
// 已展开树节点集合
treeExpandedMaps: {},
// 懒加载中的树节点的集合
treeExpandLazyLoadedMaps: {},
// 复选框属性，已选中的行集合
selectCheckboxMaps: {},
// 已标记的对象集
pendingRowMaps: {},
// 已新增的临时行
insertRowMaps: {},
// 已删除行
removeRowMaps: {},
cvCacheMaps: {},
// 表头高度
tHeaderHeight: 0,
// 表体高度
tBodyHeight: 0,
// 表尾高度
tFooterHeight: 0,
stackHistoryStore: {
undoStacks: [],
redoStacks: []
},
teleportToWrapperElem: null,
popupToWrapperElem: null,
customPopupToElem: null,
lastSTime: 0,
// isCustomDragStatus: false,
inited: false,
tooltipTimeout: null,
initStatus: false,
isActivated: false
// _sToTime: null
};
}
function createReactData$2() {
return {
updateColFlag: 0,
// 低性能的静态列
staticColumns: [],
// 渲染的列分组
tableGroupColumn: [],
// 可视区渲染的列
tableColumn: [],
// 渲染中的数据
tableData: [],
// 是否启用了横向 X 可视渲染方式加载
scrollXLoad: false,
// 是否启用了纵向 Y 可视渲染方式加载
scrollYLoad: false,
// 是否存在纵向滚动条
overflowY: true,
// 是否存在横向滚动条
overflowX: false,
// 纵向滚动条的宽度
scrollbarWidth: 0,
// 横向滚动条的高度
scrollbarHeight: 0,
// 行高
rowHeight: 0,
// 表格父容器的高度
parentHeight: 0,
// 是否使用分组表头
isGroup: false,
isAllOverflow: false,
// 复选框属性，是否全选
isAllSelected: false,
// 复选框属性，有选中且非全选状态
isIndeterminate: false,
// 单选框属性，选中列
currentColumn: null,
// 单选框属性，选中行
selectRadioRow: null,
// 表尾合计数据
footerTableData: [],
// 行分组列信息
rowGroupColumn: null,
// 展开列信息
expandColumn: null,
checkboxColumn: null,
radioColumn: null,
// 树节点列信息
treeNodeColumn: null,
hasFixedColumn: false,
// 刷新列标识，当列筛选被改变时，触发表格刷新数据
upDataFlag: 0,
// 刷新列标识，当列的特定属性被改变时，触发表格刷新列
reColumnFlag: 0,
// 初始化标识
initStore: {
filter: false,
import: false,
export: false,
custom: false
},
// 自定义列相关的信息
customStore: {
btnEl: null,
isAll: false,
isIndeterminate: false,
activeBtn: false,
activeWrapper: false,
visible: false,
maxHeight: null,
popupStyle: {},
oldSortMaps: {},
oldFixedMaps: {},
oldVisibleMaps: {}
},
customColumnList: [],
// 当前选中的筛选列
filterStore: {
isAllSelected: false,
isIndeterminate: false,
style: null,
column: null,
visible: false,
maxHeight: null
},
// 存放列相关的信息
columnStore: {
leftList: [],
centerList: [],
rightList: [],
resizeList: [],
pxList: [],
pxMinList: [],
autoMinList: [],
scaleList: [],
scaleMinList: [],
autoList: [],
remainList: []
},
// 存放快捷菜单的信息
ctxMenuStore: {
selected: null,
visible: false,
showChild: false,
selectChild: null,
list: [],
style: null
},
// 存放可编辑相关信息
editStore: {
indexs: {
columns: []
},
titles: {
columns: []
},
// 选中源
selected: {
row: null,
column: null
},
// 已复制源
copyed: {
cut: false,
rows: [],
columns: []
},
// 激活
actived: {
row: null,
column: null
},
// 当前被强制聚焦单元格，只会在鼠标点击后算聚焦
focused: {
row: null,
column: null
}
},
// 存放 tooltip 相关信息
tooltipStore: {
row: null,
column: null,
content: '',
visible: false,
type: null,
currOpts: {}
},
// 存放数据校验相关信息
validStore: {
visible: false
},
validErrorMaps: {},
// 导入相关信息
importStore: {
inited: false,
file: null,
type: '',
modeList: [],
typeList: [],
filename: '',
visible: false
},
importParams: {
mode: '',
types: null,
message: true
},
// 导出相关信息
exportStore: {
inited: false,
name: '',
modeList: [],
typeList: [],
columns: [],
isPrint: false,
hasFooter: false,
hasMerge: false,
hasTree: false,
hasRowGroup: false,
hasColgroup: false,
visible: false
},
exportParams: {
filename: '',
sheetName: '',
mode: '',
type: '',
isColgroup: false,
isMerge: false,
isTreeAllExpanded: false,
isRowGroupAllExpanded: false,
useStyle: false,
original: false,
message: true,
isHeader: false,
isTitle: false,
isFooter: false
},
visiblwRowsFlag: 1,
isRowGroupStatus: false,
rowGroupList: [],
aggHandleFields: [],
aggHandleAggColumns: [],
rowGroupExpandedFlag: 1,
rowExpandedFlag: 1,
treeExpandedFlag: 1,
updateCheckboxFlag: 1,
pendingRowFlag: 1,
insertRowFlag: 1,
removeRowFlag: 1,
mergeHeadFlag: 1,
mergeBodyFlag: 1,
mergeFootFlag: 1,
rowHeightStore: {
large: 52,
default: 48,
medium: 44,
small: 40,
mini: 36
},
scrollVMLoading: false,
scrollYHeight: 0,
scrollYTop: 0,
isScrollYBig: false,
scrollXLeft: 0,
scrollXWidth: 0,
isScrollXBig: false,
lazScrollLoading: false,
rowExpandHeightFlag: 1,
calcCellHeightFlag: 1,
resizeHeightFlag: 1,
resizeWidthFlag: 1,
isCustomStatus: false,
isCustomDragStatus: true,
ctPopupFlag: 1,
isCrossDragRow: false,
dragRow: null,
isCrossDragCol: false,
dragCol: null,
dragTipText: '',
isDragResize: false,
isRowLoading: false,
isColLoading: false
};
}
const getAllConvertColumns = (columns, parentColumn) => {
const result = [];
columns.forEach((column) => {
column.parentId = parentColumn ? parentColumn.id : null;
if (column.visible) {
if (column.children && column.children.length && column.children.some((column) => column.visible)) {
result.push(column);
result.push(...getAllConvertColumns(column.children, column));
}
else {
result.push(column);
}
}
});
return result;
};
const convertHeaderColumnToRows = (originColumns) => {
let maxLevel = 1;
const traverse = (column, parent) => {
if (parent) {
column.level = parent.level + 1;
if (maxLevel < column.level) {
maxLevel = column.level;
}
}
if (column.children && column.children.length && column.children.some((column) => column.visible)) {
let colSpan = 0;
column.children.forEach((subColumn) => {
if (subColumn.visible) {
traverse(subColumn, column);
colSpan += subColumn.colSpan;
}
});
column.colSpan = colSpan;
}
else {
column.colSpan = 1;
}
};
originColumns.forEach((column) => {
column.level = 1;
traverse(column);
});
const rows = [];
for (let i = 0; i < maxLevel; i++) {
rows.push([]);
}
const allColumns = getAllConvertColumns(originColumns);
allColumns.forEach((column) => {
if (column.children && column.children.length && column.children.some((column) => column.visible)) {
column.rowSpan = 1;
}
else {
column.rowSpan = maxLevel - column.level + 1;
}
rows[column.level - 1].push(column);
});
return rows;
};
function convertHeaderToGridRows(spanColumns) {
const rSize = spanColumns.length;
const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0);
const occupiedRows = [];
const fullRows = [];
for (let rIndex = 0; rIndex < rSize; rIndex++) {
const oCols = [];
const dCols = [];
for (let cIndex = 0; cIndex < cSize; cIndex++) {
oCols.push(false);
dCols.push('');
}
occupiedRows.push(oCols);
fullRows.push(dCols);
}
for (let rIndex = 0; rIndex < rSize; rIndex++) {
let currColIndex = 0;
for (const column of spanColumns[rIndex]) {
const { colSpan, rowSpan } = column;
let startColIndex = -1;
for (let ccIndex = currColIndex; ccIndex <= cSize - colSpan; ccIndex++) {
let oFlag = true;
for (let csIndex = 0; csIndex < colSpan; csIndex++) {
if (occupiedRows[rIndex][ccIndex + csIndex]) {
oFlag = false;
break;
}
}
if (oFlag) {
startColIndex = ccIndex;
break;
}
}
if (startColIndex === -1) {
for (let j = 0; j <= cSize - colSpan; j++) {
let oFlag = true;
for (let k = 0; k < colSpan; k++) {
if (occupiedRows[rIndex][j + k]) {
oFlag = false;
break;
}
}
if (oFlag) {
startColIndex = j;
break;
}
}
if (startColIndex === -1) {
// error
break;
}
}
for (let srIndex = rIndex; srIndex < rIndex + rowSpan; srIndex++) {
for (let scIndex = startColIndex; scIndex < startColIndex + colSpan; scIndex++) {
occupiedRows[srIndex][scIndex] = true;
fullRows[srIndex][scIndex] = column;
}
}
currColIndex = startColIndex + colSpan;
}
}
return fullRows;
}
function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
const internalData = $xeTable.internalData;
if (scrollLeft || scrollTop) {
internalData.intoRunScroll = false;
internalData.inVirtualScroll = false;
internalData.inWheelScroll = false;
internalData.inHeaderScroll = false;
internalData.inBodyScroll = false;
internalData.inFooterScroll = false;
internalData.scrollRenderType = '';
// 还原滚动状态
return $xeTable.scrollTo(scrollLeft, scrollTop);
}
return $xeTable.clearScroll();
}
function getRowUniqueId() {
return XEUtils.uniqueId('row_');
}
/**
* 生成行的唯一主键
*/
function createRowId(rowOpts, row, keyField) {
const { createKeyMethod } = rowOpts;
if (createKeyMethod) {
return createKeyMethod({ row, keyField });
}
return getRowUniqueId();
}
function hasDeepKey(rowKey) {
return rowKey.indexOf('.') > -1;
}
// 行主键 key
function getRowkey($xeTable) {
const { currKeyField } = $xeTable.internalData;
return currKeyField;
}
// 行主键 value
function getRowid($xeTable, row) {
const internalData = $xeTable.internalData;
const { isCurrDeepKey, currKeyField } = internalData;
return row ? encodeRowid((isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey)(row, currKeyField)) : '';
}
function createHandleUpdateRowId($xeTable) {
const internalData = $xeTable.internalData;
const { isCurrDeepKey, currKeyField } = internalData;
const { computeRowOpts } = $xeTable.getComputeMaps();
const rowOpts = computeRowOpts.value;
const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey;
return {
rowKey: currKeyField,
handleUpdateRowId(row) {
return row ? updateRId(rowOpts, row, currKeyField) : '';
}
};
}
function createHandleGetRowId($xeTable) {
const internalData = $xeTable.internalData;
const { isCurrDeepKey, currKeyField } = internalData;
const getRId = isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey;
return {
rowKey: currKeyField,
handleGetRowId(row) {
return row ? encodeRowid(getRId(row, currKeyField)) : '';
}
};
}
// 编码行主键
function encodeRowid(rowVal) {
return XEUtils.eqNull(rowVal) ? '' : encodeURIComponent(rowVal);
}
function getDeepRowIdByKey(row, rowKey) {
return XEUtils.get(row, rowKey);
}
function updateDeepRowKey(rowOpts, row, rowKey) {
let rowid = encodeRowid(getDeepRowIdByKey(row, rowKey));
if (eqEmptyValue(rowid)) {
const newRowid = createRowId(rowOpts, row, rowKey);
rowid = '' + newRowid;
XEUtils.set(row, rowKey, rowid);
}
return rowid;
}
function getFastRowIdByKey(row, rowKey) {
return row[rowKey];
}
function updateFastRowKey(rowOpts, row, rowKey) {
let rowid = encodeRowid(getFastRowIdByKey(row, rowKey));
if (eqEmptyValue(rowid)) {
const newRowid = createRowId(rowOpts, row, rowKey);
rowid = '' + newRowid;
row[rowKey] = newRowid;
}
return rowid;
}
function handleFieldOrColumn($xeTable, fieldOrColumn) {
if (fieldOrColumn) {
return XEUtils.isString(fieldOrColumn) || XEUtils.isNumber(fieldOrColumn) ? $xeTable.getColumnByField(`${fieldOrColumn}`) : fieldOrColumn;
}
return null;
}
function handleRowidOrRow($xeTable, rowidOrRow) {
if (rowidOrRow) {
const rowid = XEUtils.isString(rowidOrRow) || XEUtils.isNumber(rowidOrRow) ? rowidOrRow : getRowid($xeTable, rowidOrRow);
return $xeTable.getRowById(rowid);
}
return null;
}
function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
}
function getPaddingLeftRightSize(elem) {
if (elem) {
const computedStyle = getComputedStyle(elem);
const paddingLeft = XEUtils.toNumber(computedStyle.paddingLeft);
const paddingRight = XEUtils.toNumber(computedStyle.paddingRight);
return paddingLeft + paddingRight;
}
return 0;
}
function getElementMarginAndWidth(elem) {
if (elem) {
const computedStyle = getComputedStyle(elem);
const marginLeft = XEUtils.toNumber(computedStyle.marginLeft);
const marginRight = XEUtils.toNumber(computedStyle.marginRight);
return elem.offsetWidth + marginLeft + marginRight;
}
return 0;
}
function toFilters(filters, colid) {
if (filters) {
if (XEUtils.isArray(filters)) {
return filters.map(({ label, value, data, resetValue, checked }) => {
return { label, value, data, resetValue, checked: !!checked, _checked: !!checked, _colId: colid };
});
}
return [];
}
return filters;
}
function toTreePathSeq(path) {
return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('');
}
function getCellValue(row, column) {
if (column) {
return XEUtils.get(row, column.field);
}
return null;
}
function setCellValue(row, column, value) {
if (column) {
XEUtils.set(row, column.field, value);
}
}
function getRefElem(refEl) {
if (refEl) {
const rest = refEl.value;
if (rest) {
return (rest.$el || rest);
}
}
return null;
}
function getCalcHeight(height) {
if (height === 'unset') {
return 0;
}
return height || 0;
}
/**
* 列宽拖动最小宽度
* @param params
* @returns
*/
function getColReMinWidth(params) {
const { $table, column, cell } = params;
const tableProps = $table.props;
const internalData = $table.internalData;
const { computeResizableOpts } = $table.getComputeMaps();
const resizableOpts = computeResizableOpts.value;
const { minWidth: reMinWidth } = resizableOpts;
// 如果自定义调整宽度逻辑
if (reMinWidth) {
const customMinWidth = XEUtils.isFunction(reMinWidth) ? reMinWidth(params) : reMinWidth;
if (customMinWidth !== 'auto') {
return Math.max(1, XEUtils.toNumber(customMinWidth));
}
}
const { elemStore } = internalData;
const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
const { showHeaderOverflow, minWidth: colMinWidth } = column;
const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
const showEllipsis = headOverflow === 'ellipsis';
const showTitle = headOverflow === 'title';
const showTooltip = headOverflow