vxe-table-ro-test
Version:
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
1,226 lines • 343 kB
JavaScript
import { defineComponent, h, createCommentVNode, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
import XEUtils from 'xe-utils';
import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
import { VxeUI } from '../../ui';
import Cell from './cell';
import TableBodyComponent from './body';
import TableHeaderComponent from './header';
import TableFooterComponent from './footer';
import tableProps from './props';
import tableEmits from './emits';
import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, getRootColumn } from './util';
import { getSlotVNs } from '../../ui/src/vn';
import { warnLog, errLog } from '../../ui/src/log';
import TableCustomPanelComponent from '../module/custom/panel';
import TableFilterPanelComponent from '../module/filter/panel';
import TableImportPanelComponent from '../module/export/import-panel';
import TableExportPanelComponent from '../module/export/export-panel';
import TableMenuPanelComponent from '../module/menu/panel';
const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI;
const isWebkit = browse['-webkit'] && !browse.edge;
const customStorageKey = 'VXE_CUSTOM_STORE';
const delayTimeout = parseInt(localStorage.getItem('delayNoMore')) ?? 60
export default defineComponent({
name: 'VxeTable',
props: tableProps,
emits: tableEmits,
setup(props, context) {
const { slots, emit } = context;
const xID = XEUtils.uniqueId();
// 使用已安装的组件，如果未安装则不渲染
const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
const $xeTabs = inject('$xeTabs', null);
const { computeSize } = useFns.useSize(props);
const reactData = reactive({
isCalcColumn: false,
// 低性能的静态列
staticColumns: [],
// 渲染的列分组
tableGroupColumn: [],
// 可视区渲染的列
tableColumn: [],
// 渲染中的数据
tableData: [],
// 是否启用了横向 X 可视渲染方式加载
scrollXLoad: false,
// 是否启用了纵向 Y 可视渲染方式加载
scrollYLoad: false,
// 是否存在纵向滚动条
overflowY: true,
// 是否存在横向滚动条
overflowX: false,
// 纵向滚动条的宽度
scrollbarWidth: 0,
// 横向滚动条的高度
scrollbarHeight: 0,
// 最后滚动时间戳
lastScrollTime: 0,
// 行高
rowHeight: 0,
// 表格父容器的高度
parentHeight: 0,
// 是否使用分组表头
isGroup: false,
isAllOverflow: false,
// 复选框属性，是否全选
isAllSelected: false,
// 复选框属性，有选中且非全选状态
isIndeterminate: false,
// 复选框属性，已选中的行集合
selectCheckboxMaps: {},
// 当前行
currentRow: null,
// 单选框属性，选中列
currentColumn: null,
// 单选框属性，选中行
selectRadioRow: null,
// 表尾合计数据
footerTableData: [],
// 展开列信息
expandColumn: null,
// 树节点列信息
treeNodeColumn: null,
hasFixedColumn: false,
// 已展开的行集合
rowExpandedMaps: {},
// 懒加载中的展开行的集合
rowExpandLazyLoadedMaps: {},
// 已展开树节点集合
treeExpandedMaps: {},
// 懒加载中的树节点的集合
treeExpandLazyLoadedMaps: {},
// 树节点不确定状态的集合
treeIndeterminateMaps: {},
// 合并单元格的对象集
mergeList: [],
// 合并表尾数据的对象集
mergeFooterList: [],
// 刷新列标识，当列筛选被改变时，触发表格刷新数据
upDataFlag: 0,
// 刷新列标识，当列的特定属性被改变时，触发表格刷新列
reColumnFlag: 0,
// 已标记的对象集
pendingRowMaps: {},
// 已标记的行
pendingRowList: [],
// 初始化标识
initStore: {
filter: false,
import: false,
export: false,
custom: false
},
// 自定义列相关的信息
customStore: {
btnEl: null,
isAll: false,
isIndeterminate: false,
activeBtn: false,
activeWrapper: false,
visible: false,
maxHeight: 0,
oldSortMaps: {},
oldFixedMaps: {},
oldVisibleMaps: {}
},
customColumnList: [],
// 当前选中的筛选列
filterStore: {
isAllSelected: false,
isIndeterminate: false,
style: null,
options: [],
column: null,
multiple: false,
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
},
insertMaps: {},
removeMaps: {}
},
// 存放 tooltip 相关信息
tooltipStore: {
row: null,
column: null,
content: null,
visible: false,
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,
hasColgroup: false,
visible: false
},
exportParams: {
filename: '',
sheetName: '',
mode: '',
type: '',
isColgroup: false,
isMerge: false,
isAllExpand: false,
useStyle: false,
original: false,
message: true,
isHeader: false,
isFooter: false
},
scrollVMLoading: false,
_isResize: false,
_isLoading: false
});
const internalData = {
tZindex: 0,
elemStore: {},
// 存放横向 X 虚拟滚动相关的信息
scrollXStore: {
offsetSize: 0,
visibleSize: 0,
startIndex: 0,
endIndex: 0
},
// 存放纵向 Y 虚拟滚动相关信息
scrollYStore: {
rowHeight: 0,
offsetSize: 0,
visibleSize: 0,
startIndex: 0,
endIndex: 0
},
// 表格宽度
tableWidth: 0,
// 表格高度
tableHeight: 0,
// 表头高度
headerHeight: 0,
// 表尾高度
footerHeight: 0,
customHeight: 0,
customMinHeight: 0,
customMaxHeight: 0,
// 当前 hover 行
hoverRow: null,
// 最后滚动位置
lastScrollLeft: 0,
lastScrollTop: 0,
// 单选框属性，已选中保留的行
radioReserveRow: null,
// 复选框属性，已选中保留的行集合
checkboxReserveRowMap: {},
// 行数据，已展开保留的行集合
rowExpandedReserveRowMap: {},
// 树结构数据，已展开保留的行集合
treeExpandedReserveRowMap: {},
// 树结构数据，不确定状态的集合
treeIndeterminateRowMaps: {},
// 列表完整数据、条件处理后
tableFullData: [],
afterFullData: [],
afterTreeFullData: [],
// 列表条件处理后数据集合
afterFullRowMaps: {},
// 树结构完整数据、条件处理后
tableFullTreeData: [],
tableSynchData: [],
tableSourceData: [],
// 收集的列配置（带分组）
collectColumn: [],
// 完整所有列（不带分组）
tableFullColumn: [],
// 渲染所有列
visibleColumn: [],
// 总的缓存数据集
fullAllDataRowIdData: {},
// 渲染中缓存数据
sourceDataRowIdData: {},
fullDataRowIdData: {},
fullColumnIdData: {},
fullColumnFieldData: {},
// 列选取状态
columnStatusMaps: {},
// 行选取状态
rowStatusMaps: {},
inited: false,
tooltipTimeout: null,
initStatus: false,
isActivated: false
};
let tableMethods = {};
let tablePrivateMethods = {};
const refElem = ref();
const refTooltip = ref();
const refCommTooltip = ref();
const refValidTooltip = ref();
const refTableMenu = ref();
const refTableFilter = ref();
const refTableCustom = ref();
const refTableHeader = ref();
const refTableBody = ref();
const refTableFooter = ref();
const refTableLeftHeader = ref();
const refTableLeftBody = ref();
const refTableLeftFooter = ref();
const refTableRightHeader = ref();
const refTableRightBody = ref();
const refTableRightFooter = ref();
const refLeftContainer = ref();
const refRightContainer = ref();
const refCellResizeBar = ref();
const refEmptyPlaceholder = ref();
const $xeGrid = inject('$xeGrid', null);
let $xeToolbar;
const computeTableId = computed(() => {
const { id } = props;
if (id) {
if (XEUtils.isFunction(id)) {
return `${id({ $table: $xeTable, $grid: $xeGrid }) || ''}`;
}
return `${id}`;
}
return '';
});
const computeValidOpts = computed(() => {
return Object.assign({}, getConfig().table.validConfig, props.validConfig);
});
const computeSXOpts = computed(() => {
return Object.assign({}, getConfig().table.scrollX, props.scrollX);
});
const computeSYOpts = computed(() => {
return Object.assign({}, getConfig().table.scrollY, props.scrollY);
});
const computeRowHeightMaps = computed(() => {
return {
default: 48,
medium: 44,
small: 40,
mini: 36
};
});
const computeColumnOpts = computed(() => {
return Object.assign({}, getConfig().table.columnConfig, props.columnConfig);
});
const computeRowOpts = computed(() => {
return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
});
const computeResizeOpts = computed(() => {
return Object.assign({}, getConfig().table.resizeConfig, props.resizeConfig);
});
const computeResizableOpts = computed(() => {
return Object.assign({}, getConfig().table.resizableConfig, props.resizableConfig);
});
const computeSeqOpts = computed(() => {
return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, props.seqConfig);
});
const computeRadioOpts = computed(() => {
return Object.assign({}, getConfig().table.radioConfig, props.radioConfig);
});
const computeCheckboxOpts = computed(() => {
return Object.assign({}, getConfig().table.checkboxConfig, props.checkboxConfig);
});
let computeTooltipOpts = ref();
computeTooltipOpts = computed(() => {
return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
});
const computeTipConfig = computed(() => {
const tooltipOpts = computeTooltipOpts.value;
return Object.assign({}, tooltipOpts);
});
const computeValidTipOpts = computed(() => {
const tooltipOpts = computeTooltipOpts.value;
return Object.assign({ isArrow: false }, tooltipOpts);
});
const computeEditOpts = computed(() => {
return Object.assign({}, getConfig().table.editConfig, props.editConfig);
});
const computeSortOpts = computed(() => {
return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, props.sortConfig);
});
const computeFilterOpts = computed(() => {
return Object.assign({}, getConfig().table.filterConfig, props.filterConfig);
});
const computeMouseOpts = computed(() => {
return Object.assign({}, getConfig().table.mouseConfig, props.mouseConfig);
});
const computeAreaOpts = computed(() => {
return Object.assign({}, getConfig().table.areaConfig, props.areaConfig);
});
const computeKeyboardOpts = computed(() => {
return Object.assign({}, getConfig().table.keyboardConfig, props.keyboardConfig);
});
const computeClipOpts = computed(() => {
return Object.assign({}, getConfig().table.clipConfig, props.clipConfig);
});
const computeFNROpts = computed(() => {
return Object.assign({}, getConfig().table.fnrConfig, props.fnrConfig);
});
const computeMenuOpts = computed(() => {
return Object.assign({}, getConfig().table.menuConfig, props.menuConfig);
});
const computeHeaderMenu = computed(() => {
const menuOpts = computeMenuOpts.value;
const headerOpts = menuOpts.header;
return headerOpts && headerOpts.options ? headerOpts.options : [];
});
const computeBodyMenu = computed(() => {
const menuOpts = computeMenuOpts.value;
const bodyOpts = menuOpts.body;
return bodyOpts && bodyOpts.options ? bodyOpts.options : [];
});
const computeFooterMenu = computed(() => {
const menuOpts = computeMenuOpts.value;
const footerOpts = menuOpts.footer;
return footerOpts && footerOpts.options ? footerOpts.options : [];
});
const computeIsMenu = computed(() => {
const menuOpts = computeMenuOpts.value;
const headerMenu = computeHeaderMenu.value;
const bodyMenu = computeBodyMenu.value;
const footerMenu = computeFooterMenu.value;
return !!(props.menuConfig && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length));
});
const computeMenuList = computed(() => {
const { ctxMenuStore } = reactData;
const rest = [];
ctxMenuStore.list.forEach((list) => {
list.forEach((item) => {
rest.push(item);
});
});
return rest;
});
const computeExportOpts = computed(() => {
return Object.assign({}, getConfig().table.exportConfig, props.exportConfig);
});
const computeImportOpts = computed(() => {
return Object.assign({}, getConfig().table.importConfig, props.importConfig);
});
const computePrintOpts = computed(() => {
return Object.assign({}, getConfig().table.printConfig, props.printConfig);
});
const computeExpandOpts = computed(() => {
return Object.assign({}, getConfig().table.expandConfig, props.expandConfig);
});
const computeTreeOpts = computed(() => {
return Object.assign({}, getConfig().table.treeConfig, props.treeConfig);
});
const computeEmptyOpts = computed(() => {
return Object.assign({}, getConfig().table.emptyRender, props.emptyRender);
});
const computeLoadingOpts = computed(() => {
return Object.assign({}, getConfig().table.loadingConfig, props.loadingConfig);
});
const computeCellOffsetWidth = computed(() => {
return props.border ? Math.max(2, Math.ceil(reactData.scrollbarWidth / reactData.tableColumn.length)) : 1;
});
const computeCustomOpts = computed(() => {
return Object.assign({}, getConfig().table.customConfig, props.customConfig);
});
const computeAutoWidthColumnList = computed(() => {
const { visibleColumn } = internalData;
const { tableColumn } = reactData;
return tableColumn.length || visibleColumn.length ? visibleColumn.filter(column => column.width === 'auto' || column.minWidth === 'auto') : [];
});
const computeFixedColumnSize = computed(() => {
const { collectColumn } = internalData;
let fixedSize = 0;
// 只判断第一层
collectColumn.forEach((column) => {
if (column.renderFixed) {
fixedSize++;
}
});
return fixedSize;
});
const computeIsMaxFixedColumn = computed(() => {
const fixedColumnSize = computeFixedColumnSize.value;
const columnOpts = computeColumnOpts.value;
const { maxFixedSize } = columnOpts;
if (maxFixedSize) {
return fixedColumnSize >= maxFixedSize;
}
return false;
});
const computeTableBorder = computed(() => {
const { border } = props;
if (border === true) {
return 'full';
}
if (border) {
return border;
}
return 'default';
});
const computeIsAllCheckboxDisabled = computed(() => {
const { treeConfig } = props;
const { tableData } = reactData;
const { tableFullData } = internalData;
const checkboxOpts = computeCheckboxOpts.value;
const { strict, checkMethod } = checkboxOpts;
if (strict) {
if (tableData.length || tableFullData.length) {
if (checkMethod) {
if (treeConfig) {
// 暂时不支持树形结构
}
// 如果所有行都被禁用
return tableFullData.every((row) => !checkMethod({ row }));
}
return false;
}
return true;
}
return false;
});
const refMaps = {
refElem,
refTooltip,
refValidTooltip,
refTableFilter,
refTableCustom,
refTableMenu,
refTableHeader,
refTableBody,
refTableFooter,
refTableLeftHeader,
refTableLeftBody,
refTableLeftFooter,
refTableRightHeader,
refTableRightBody,
refTableRightFooter,
refLeftContainer,
refRightContainer,
refCellResizeBar
};
const computeMaps = {
computeSize,
computeTableId,
computeValidOpts,
computeSXOpts,
computeSYOpts,
computeColumnOpts,
computeRowOpts,
computeResizeOpts,
computeResizableOpts,
computeSeqOpts,
computeRadioOpts,
computeCheckboxOpts,
computeTooltipOpts,
computeEditOpts,
computeSortOpts,
computeFilterOpts,
computeMouseOpts,
computeAreaOpts,
computeKeyboardOpts,
computeClipOpts,
computeFNROpts,
computeHeaderMenu,
computeBodyMenu,
computeFooterMenu,
computeIsMenu,
computeMenuOpts,
computeExportOpts,
computeImportOpts,
computePrintOpts,
computeExpandOpts,
computeTreeOpts,
computeEmptyOpts,
computeLoadingOpts,
computeCustomOpts,
computeFixedColumnSize,
computeIsMaxFixedColumn,
computeIsAllCheckboxDisabled
};
const $xeTable = {
xID,
props: props,
context,
reactData,
internalData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps,
xegrid: $xeGrid
};
const eqCellValue = (row1, row2, field) => {
const val1 = XEUtils.get(row1, field);
const val2 = XEUtils.get(row2, field);
if (eqEmptyValue(val1) && eqEmptyValue(val2)) {
return true;
}
if (XEUtils.isString(val1) || XEUtils.isNumber(val1)) {
return ('' + val1) === ('' + val2);
}
return XEUtils.isEqual(val1, val2);
};
const getNextSortOrder = (column) => {
const sortOpts = computeSortOpts.value;
const { orders } = sortOpts;
const currOrder = column.order || null;
const oIndex = orders.indexOf(currOrder) + 1;
return orders[oIndex < orders.length ? oIndex : 0];
};
const getCustomStorageMap = (id) => {
const version = getConfig().version;
const rest = XEUtils.toStringJSON(localStorage.getItem(customStorageKey) || '');
const maps = rest && rest._v === version ? rest : { _v: version };
return (id ? maps[id] : maps) || {};
};
const setCustomStorageMap = (id, data) => {
const version = getConfig().version;
const maps = getCustomStorageMap();
maps[id] = data || undefined;
maps._v = version;
localStorage.setItem(customStorageKey, XEUtils.toJSONString(maps));
};
const getRecoverRowMaps = (keyMaps) => {
const { fullAllDataRowIdData } = internalData;
const restKeys = {};
XEUtils.each(keyMaps, (row, rowid) => {
if (fullAllDataRowIdData[rowid]) {
restKeys[rowid] = row;
}
});
return restKeys;
};
const handleReserveRow = (reserveRowMap) => {
const { fullDataRowIdData } = internalData;
const reserveList = [];
XEUtils.each(reserveRowMap, (item, rowid) => {
if (fullDataRowIdData[rowid] && $xeTable.findRowIndexOf(reserveList, fullDataRowIdData[rowid].row) === -1) {
reserveList.push(fullDataRowIdData[rowid].row);
}
});
return reserveList;
};
const computeVirtualX = () => {
const { visibleColumn } = internalData;
const tableBody = refTableBody.value;
const tableBodyElem = tableBody ? tableBody.$el : null;
if (tableBodyElem) {
const { scrollLeft, clientWidth } = tableBodyElem;
const endWidth = scrollLeft + clientWidth;
let toVisibleIndex = -1;
let cWidth = 0;
let visibleSize = 0;
for (let colIndex = 0, colLen = visibleColumn.length; colIndex < colLen; colIndex++) {
cWidth += visibleColumn[colIndex].renderWidth;
if (toVisibleIndex === -1 && scrollLeft < cWidth) {
toVisibleIndex = colIndex;
}
if (toVisibleIndex >= 0) {
visibleSize++;
if (cWidth > endWidth) {
break;
}
}
}
return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) };
}
return { toVisibleIndex: 0, visibleSize: 6 };
};
const computeVirtualY = () => {
const tableHeader = refTableHeader.value;
const tableBody = refTableBody.value;
const tableBodyElem = tableBody ? tableBody.$el : null;
const vSize = computeSize.value;
const rowHeightMaps = computeRowHeightMaps.value;
if (tableBodyElem) {
const tableHeaderElem = tableHeader ? tableHeader.$el : null;
let rowHeight = 0;
let firstTrElem;
firstTrElem = tableBodyElem.querySelector('tr');
if (!firstTrElem && tableHeaderElem) {
firstTrElem = tableHeaderElem.querySelector('tr');
}
if (firstTrElem) {
rowHeight = firstTrElem.clientHeight;
}
if (!rowHeight) {
rowHeight = rowHeightMaps[vSize || 'default'];
}
const visibleSize = Math.max(8, Math.ceil(tableBodyElem.clientHeight / rowHeight) + 2);
return { rowHeight, visibleSize };
}
return { rowHeight: 0, visibleSize: 8 };
};
const calculateMergerOffsetIndex = (list, offsetItem, type) => {
for (let mcIndex = 0, len = list.length; mcIndex < len; mcIndex++) {
const mergeItem = list[mcIndex];
const { startIndex, endIndex } = offsetItem;
const mergeStartIndex = mergeItem[type];
const mergeSpanNumber = mergeItem[type + 'span'];
const mergeEndIndex = mergeStartIndex + mergeSpanNumber;
if (mergeStartIndex < startIndex && startIndex < mergeEndIndex) {
offsetItem.startIndex = mergeStartIndex;
}
if (mergeStartIndex < endIndex && endIndex < mergeEndIndex) {
offsetItem.endIndex = mergeEndIndex;
}
if (offsetItem.startIndex !== startIndex || offsetItem.endIndex !== endIndex) {
mcIndex = -1;
}
}
};
const setMerges = (merges, mList, rowList) => {
if (merges) {
const { treeConfig } = props;
const { visibleColumn } = internalData;
if (!XEUtils.isArray(merges)) {
merges = [merges];
}
if (treeConfig && merges.length) {
errLog('vxe.error.noTree', ['merge-cells | merge-footer-items']);
}
merges.forEach((item) => {
let { row, col, rowspan, colspan } = item;
if (rowList && XEUtils.isNumber(row)) {
row = rowList[row];
}
if (XEUtils.isNumber(col)) {
col = visibleColumn[col];
}
if ((rowList ? row : XEUtils.isNumber(row)) && col && (rowspan || colspan)) {
rowspan = XEUtils.toNumber(rowspan) || 1;
colspan = XEUtils.toNumber(colspan) || 1;
if (rowspan > 1 || colspan > 1) {
const mcIndex = XEUtils.findIndexOf(mList, item => (item._row === row || getRowid($xeTable, item._row) === getRowid($xeTable, row)) && (item._col.id === col || item._col.id === col.id));
const mergeItem = mList[mcIndex];
if (mergeItem) {
mergeItem.rowspan = rowspan;
mergeItem.colspan = colspan;
mergeItem._rowspan = rowspan;
mergeItem._colspan = colspan;
}
else {
const mergeRowIndex = rowList ? $xeTable.findRowIndexOf(rowList, row) : row;
const mergeColIndex = tableMethods.getVTColumnIndex(col);
mList.push({
row: mergeRowIndex,
col: mergeColIndex,
rowspan,
colspan,
_row: row,
_col: col,
_rowspan: rowspan,
_colspan: colspan
});
}
}
}
});
}
};
const removeMerges = (merges, mList, rowList) => {
const rest = [];
if (merges) {
const { treeConfig } = props;
const { visibleColumn } = internalData;
if (!XEUtils.isArray(merges)) {
merges = [merges];
}
if (treeConfig && merges.length) {
errLog('vxe.error.noTree', ['merge-cells | merge-footer-items']);
}
merges.forEach((item) => {
let { row, col } = item;
if (rowList && XEUtils.isNumber(row)) {
row = rowList[row];
}
if (XEUtils.isNumber(col)) {
col = visibleColumn[col];
}
const mcIndex = XEUtils.findIndexOf(mList, item => (item._row === row || getRowid($xeTable, item._row) === getRowid($xeTable, row)) && (item._col.id === col || item._col.id === col.id));
if (mcIndex > -1) {
const rItems = mList.splice(mcIndex, 1);
rest.push(rItems[0]);
}
});
}
return rest;
};
const clearAllSort = () => {
const { tableFullColumn } = internalData;
tableFullColumn.forEach((column) => {
column.order = null;
});
};
const calcHeight = (key) => {
const { parentHeight } = reactData;
const val = props[key];
let num = 0;
if (val) {
if (val === '100%' || val === 'auto') {
num = parentHeight;
}
else {
const excludeHeight = $xeTable.getExcludeHeight();
if (isScale(val)) {
num = Math.floor((XEUtils.toInteger(val) || 1) / 100 * parentHeight);
}
else {
num = XEUtils.toNumber(val);
}
num = Math.max(40, num - excludeHeight);
}
}
return num;
};
const handleCustomRestore = (storeData) => {
let { collectColumn } = internalData;
const { resizableData, sortData, visibleData, fixedData } = storeData;
let hasCustomSort = false;
// 处理还原
if (resizableData || sortData || visibleData || fixedData) {
XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
const colKey = column.getKey();
// 支持一级
if (!parent) {
if (fixedData && fixedData[colKey]) {
column.fixed = fixedData[colKey];
}
if (sortData && XEUtils.isNumber(sortData[colKey])) {
hasCustomSort = true;
column.renderSortNumber = sortData[colKey];
}
}
if (resizableData && XEUtils.isNumber(resizableData[colKey])) {
column.resizeWidth = resizableData[colKey];
}
if (visibleData && XEUtils.isBoolean(visibleData[colKey])) {
column.visible = visibleData[colKey];
}
});
// 如果自定义了顺序
if (hasCustomSort) {
collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber');
internalData.collectColumn = collectColumn;
internalData.tableFullColumn = getColumnList(collectColumn);
}
}
};
/**
* 还原自定义列操作状态
*/
const restoreCustomStorage = () => {
const { customConfig } = props;
const tableId = computeTableId.value;
const customOpts = computeCustomOpts.value;
const { storage, restoreStore } = customOpts;
const isAllCustom = storage === true;
const storageOpts = isAllCustom ? {} : Object.assign({}, storage || {});
const isCustomResizable = isAllCustom || storageOpts.resizable;
const isCustomVisible = isAllCustom || storageOpts.visible;
const isCustomFixed = isAllCustom || storageOpts.fixed;
const isCustomSort = isAllCustom || storageOpts.sort;
if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
if (!tableId) {
errLog('vxe.error.reqProp', ['id']);
return;
}
const storeData = getCustomStorageMap(tableId);
if (restoreStore) {
return Promise.resolve(restoreStore({ id: tableId, type: 'restore', storeData })).then(storeData => {
if (!storeData) {
return;
}
return handleCustomRestore(storeData);
}).catch(e => e);
}
else {
return handleCustomRestore(storeData);
}
}
};
/**
* 更新数据列的 Map
* 牺牲数据组装的耗时，用来换取使用过程中的流畅
*/
const cacheColumnMap = () => {
const { tableFullColumn, collectColumn } = internalData;
const fullColumnIdData = internalData.fullColumnIdData = {};
const fullColumnFieldData = internalData.fullColumnFieldData = {};
const mouseOpts = computeMouseOpts.value;
const columnOpts = computeColumnOpts.value;
const rowOpts = computeRowOpts.value;
const isGroup = collectColumn.some(hasChildrenList);
let isAllOverflow = !!props.showOverflow;
let expandColumn;
let treeNodeColumn;
let checkboxColumn;
let radioColumn;
let htmlColumn;
let hasFixed;
const handleFunc = (column, index, items, path, parent) => {
const { id: colid, field, fixed, type, treeNode } = column;
const rest = { column, colid, index, items, parent };
if (field) {
if (process.env.NODE_ENV === 'development') {
if (fullColumnFieldData[field]) {
warnLog('vxe.error.colRepet', ['field', field]);
}
}
fullColumnFieldData[field] = rest;
}
if (!hasFixed && fixed) {
hasFixed = fixed;
}
if (!htmlColumn && type === 'html') {
htmlColumn = column;
}
if (treeNode) {
if (process.env.NODE_ENV === 'development') {
if (treeNodeColumn) {
warnLog('vxe.error.colRepet', ['tree-node', treeNode]);
}
}
if (!treeNodeColumn) {
treeNodeColumn = column;
}
}
else if (type === 'expand') {
if (process.env.NODE_ENV === 'development') {
if (expandColumn) {
warnLog('vxe.error.colRepet', ['type', type]);
}
}
if (!expandColumn) {
expandColumn = column;
}
}
if (process.env.NODE_ENV === 'development') {
if (type === 'checkbox') {
if (checkboxColumn) {
warnLog('vxe.error.colRepet', ['type', type]);
}
if (!checkboxColumn) {
checkboxColumn = column;
}
}
else if (type === 'radio') {
if (radioColumn) {
warnLog('vxe.error.colRepet', ['type', type]);
}
if (!radioColumn) {
radioColumn = column;
}
}
}
if (isAllOverflow && column.showOverflow === false) {
isAllOverflow = false;
}
if (fullColumnIdData[colid]) {
errLog('vxe.error.colRepet', ['colId', colid]);
}
fullColumnIdData[colid] = rest;
};
if (isGroup) {
XEUtils.eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
column.level = nodes.length;
handleFunc(column, index, items, path, parent);
});
}
else {
tableFullColumn.forEach(handleFunc);
}
if (process.env.NODE_ENV === 'development') {
if (expandColumn && mouseOpts.area) {
errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']);
}
}
if (process.env.NODE_ENV === 'development') {
if (htmlColumn) {
if (!columnOpts.useKey) {
errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html']);
}
if (!rowOpts.useKey) {
errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html']);
}
}
}
reactData.isGroup = isGroup;
reactData.treeNodeColumn = treeNodeColumn;
reactData.expandColumn = expandColumn;
reactData.isAllOverflow = isAllOverflow;
};
const updateHeight = () => {
internalData.customHeight = calcHeight('height');
internalData.customMinHeight = calcHeight('minHeight');
internalData.customMaxHeight = calcHeight('maxHeight');
};
const calcCellWidth = () => {
const { tableData } = reactData;
const autoWidthColumnList = computeAutoWidthColumnList.value;
if (!tableData.length || !autoWidthColumnList.length) {
reactData.isCalcColumn = false;
return nextTick();
}
reactData.isCalcColumn = true;
return nextTick().then(() => {
const el = refElem.value;
if (el) {
autoWidthColumnList.forEach(column => {
const cellElList = el.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--column.${column.id}>.vxe-cell`);
const firstCellEl = cellElList[0];
let paddingSize = 0;
if (firstCellEl) {
const cellStyle = getComputedStyle(firstCellEl);
paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2;
}
let colWidth = column.renderAutoWidth - paddingSize;
XEUtils.arrayEach(cellElList, (itemEl) => {
const cellEl = itemEl;
const thElem = cellEl.parentNode;
let titleWidth = 0;
if (`${thElem.tagName}`.toLowerCase() === 'th') {
XEUtils.arrayEach(cellEl.children, (btnEl) => {
titleWidth += btnEl.offsetWidth + 1;
});
}
else {
const labelEl = cellEl.firstChild;
if (labelEl) {
titleWidth = labelEl.offsetWidth;
}
}
if (titleWidth) {
colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4);
}
});
column.renderAutoWidth = colWidth + paddingSize;
});
tablePrivateMethods.analyColumnWidth();
}
reactData.isCalcColumn = false;
});
};
/**
* 列宽算法
* 支持 px、%、固定 混合分配
* 支持动态列表调整分配
* 支持自动分配偏移量
*/
const autoCellWidth = () => {
const tableHeader = refTableHeader.value;
const tableBody = refTableBody.value;
const tableFooter = refTableFooter.value;
const bodyElem = tableBody ? tableBody.$el : null;
const headerElem = tableHeader ? tableHeader.$el : null;
const footerElem = tableFooter ? tableFooter.$el : null;
if (!bodyElem) {
return;
}
let tableWidth = 0;
const minCellWidth = 40; // 列宽最少限制 40px
const bodyWidth = bodyElem.clientWidth - 1;
let remainWidth = bodyWidth;
let meanWidth = remainWidth / 100;
const { fit } = props;
const { columnStore } = reactData;
const { resizeList, pxMinList, autoMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore;
// 最小宽
pxMinList.forEach((column) => {
const minWidth = XEUtils.toInteger(column.minWidth);
tableWidth += minWidth;
column.renderWidth = minWidth;
});
// 最小自适应
autoMinList.forEach((column) => {
const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
tableWidth += scaleWidth;
column.renderWidth = scaleWidth;
});
// 最小百分比
scaleMinList.forEach((column) => {
const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
tableWidth += scaleWidth;
column.renderWidth = scaleWidth;
});
// 固定百分比
scaleList.forEach((column) => {
const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
tableWidth += scaleWidth;
column.renderWidth = scaleWidth;
});
// 固定宽
pxList.forEach((column) => {
const width = XEUtils.toInteger(column.width);
tableWidth += width;
column.renderWidth = width;
});
// 自适应宽
autoList.forEach((column) => {
const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
tableWidth += width;
column.renderWidth = width;
});
// 调整了列宽
resizeList.forEach((column) => {
const width = XEUtils.toInteger(column.resizeWidth);
tableWidth += width;
column.renderWidth = width;
});
remainWidth -= tableWidth;
meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0;
if (fit) {
if (remainWidth > 0) {
scaleMinList.concat(pxMinList).concat(autoMinList).forEach((column) => {
tableWidth += meanWidth;
column.renderWidth += meanWidth;
});
}
}
else {
meanWidth = minCellWidth;
}
// 剩余均分
remainList.forEach((column) => {
const width = Math.max(meanWidth, minCellWidth);
column.renderWidth = width;
tableWidth += width;
});
if (fit) {
/**
* 偏移量算法
* 如果所有列足够放的情况下，从最后动态列开始分配
*/
const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList);
let dynamicSize = dynamicList.length - 1;
if (dynamicSize > 0) {
let odiffer = bodyWidth - tableWidth;
if (odiffer > 0) {
while (odiffer > 0 && dynamicSize >= 0) {
odiffer--;
dynamicList[dynamicSize--].renderWidth++;
}
tableWidth = bodyWidth;
}
}
}
const tableHeight = bodyElem.offsetHeight;
const overflowY = bodyElem.scrollHeight > bodyElem.clientHeight;
let scrollbarWidth = 0;
if (overflowY) {
scrollbarWidth = Math.max(bodyElem.offsetWidth - bodyElem.clientWidth, 0);
}
reactData.scrollbarWidth = scrollbarWidth;
reactData.overflowY = overflowY;
internalData.tableWidth = tableWidth;
internalData.tableHeight = tableHeight;
let headerHeight = 0;
if (headerElem) {
headerHeight = headerElem.clientHeight;
nextTick(() => {
// 检测是否同步滚动
if (headerElem && bodyElem && headerElem.scrollLeft !== bodyElem.scrollLeft) {
headerElem.scrollLeft = bodyElem.scrollLeft;
}
});
}
internalData.headerHeight = headerHeight;
let overflowX = false;
let footerHeight = 0;
let scrollbarHeight = 0;
if (footerElem) {
footerHeight = footerElem.offsetHeight;
overflowX = tableWidth > footerElem.clientWidth;
scrollbarHeight = Math.max(footerHeight - footerElem.clientHeight, 0);
}
else {
overflowX = tableWidth > bodyWidth;
scrollbarHeight = Math.max(tableHeight - bodyElem.clientHeight, 0);
}
internalData.footerHeight = footerHeight;
reactData.overflowX = overflowX;
reactData.scrollbarHeight = scrollbarHeight;
updateHeight();
reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, tablePrivateMethods.getParentHeight());
if (overflowX) {
tablePrivateMethods.checkScrolling();
}
};
const getOrderField = (column) => {
const { sortBy, sortType } = column;
return (row) => {
let cellVa