vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
844 lines (843 loc) • 43.8 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { createCommentVNode, defineComponent, h, ref, inject, nextTick, onBeforeUnmount, onMounted, onUnmounted } from 'vue';
import XEUtils from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { VXETable } from '../../v-x-e-table';
import { mergeBodyMethod, getRowid, removeScrollListener, restoreScrollListener } from './util';
import { updateCellTitle, getPropClass } from '../../tools/dom';
import { isEnableConf } from '../../tools/utils';
import { getSlotVNs } from '../../tools/vn';
var renderType = 'body';
var lineOffsetSizes = {
mini: 3,
small: 2,
medium: 1
};
export default defineComponent({
name: 'VxeTableBody',
props: {
tableData: Array,
tableColumn: Array,
fixedColumn: Array,
fixedType: { type: String, default: null }
},
setup: function (props) {
var $xetable = inject('$xetable', {});
var xesize = inject('xesize', null);
var xID = $xetable.xID, tableProps = $xetable.props, tableContext = $xetable.context, tableReactData = $xetable.reactData, tableInternalData = $xetable.internalData;
var _a = $xetable.getRefMaps(), refTableHeader = _a.refTableHeader, refTableBody = _a.refTableBody, refTableFooter = _a.refTableFooter, refTableLeftBody = _a.refTableLeftBody, refTableRightBody = _a.refTableRightBody, refValidTooltip = _a.refValidTooltip;
var _b = $xetable.getComputeMaps(), computeEditOpts = _b.computeEditOpts, computeMouseOpts = _b.computeMouseOpts, computeSYOpts = _b.computeSYOpts, computeEmptyOpts = _b.computeEmptyOpts, computeKeyboardOpts = _b.computeKeyboardOpts, computeTooltipOpts = _b.computeTooltipOpts, computeRadioOpts = _b.computeRadioOpts, computeExpandOpts = _b.computeExpandOpts, computeTreeOpts = _b.computeTreeOpts, computeCheckboxOpts = _b.computeCheckboxOpts, computeValidOpts = _b.computeValidOpts, computeRowOpts = _b.computeRowOpts, computeColumnOpts = _b.computeColumnOpts;
var refElem = ref();
var refBodyTable = ref();
var refBodyColgroup = ref();
var refBodyTBody = ref();
var refBodyXSpace = ref();
var refBodyYSpace = ref();
var refBodyEmptyBlock = ref();
var getOffsetSize = function () {
if (xesize) {
var vSize = xesize.value;
if (vSize) {
return lineOffsetSizes[vSize] || 0;
}
}
return 0;
};
// 滚动、拖动过程中不需要触发
var isVMScrollProcess = function () {
var delayHover = tableProps.delayHover;
var lastScrollTime = tableReactData.lastScrollTime, _isResize = tableReactData._isResize;
return !!(_isResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
};
var countTreeExpand = function (prevRow, params) {
var count = 1;
if (!prevRow) {
return count;
}
var treeOpts = computeTreeOpts.value;
var childrenField = treeOpts.children || treeOpts.childrenField;
var rowChildren = prevRow[childrenField];
if (rowChildren && $xetable.isTreeExpandByRow(prevRow)) {
for (var index = 0; index < rowChildren.length; index++) {
count += countTreeExpand(rowChildren[index], params);
}
}
return count;
};
var calcTreeLine = function (params, items, rIndex) {
var expandSize = 1;
if (rIndex) {
expandSize = countTreeExpand(items[rIndex - 1], params);
}
return tableReactData.rowHeight * expandSize - (rIndex ? 1 : (12 - getOffsetSize()));
};
var renderLine = function (params) {
var row = params.row, column = params.column;
var treeConfig = tableProps.treeConfig;
var treeOpts = computeTreeOpts.value;
var slots = column.slots, treeNode = column.treeNode;
var fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData;
var rowid = getRowid($xetable, row);
var rest = fullAllDataRowIdData[rowid];
var rLevel = 0;
var rIndex = 0;
var items = [];
if (rest) {
rLevel = rest.level;
rIndex = rest._index;
items = rest.items;
}
if (slots && slots.line) {
return $xetable.callSlot(slots.line, params);
}
if (treeConfig && treeNode && (treeOpts.showLine || treeOpts.line)) {
return [
h('div', {
class: 'vxe-tree--line-wrapper'
}, [
h('div', {
class: 'vxe-tree--line',
style: {
height: "".concat(calcTreeLine(params, items, rIndex), "px"),
left: "".concat((rLevel * treeOpts.indent) + (rLevel ? 2 - getOffsetSize() : 0) + 16, "px")
}
})
])
];
}
return [];
};
/**
* 渲染列
*/
var renderColumn = function (seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) {
var _a;
var columnKey = tableProps.columnKey, height = tableProps.height, allColumnOverflow = tableProps.showOverflow, allCellClassName = tableProps.cellClassName, cellStyle = tableProps.cellStyle, allAlign = tableProps.align, spanMethod = tableProps.spanMethod, mouseConfig = tableProps.mouseConfig, editConfig = tableProps.editConfig, editRules = tableProps.editRules, tooltipConfig = tableProps.tooltipConfig;
var tableData = tableReactData.tableData, overflowX = tableReactData.overflowX, scrollYLoad = tableReactData.scrollYLoad, currentColumn = tableReactData.currentColumn, mergeList = tableReactData.mergeList, editStore = tableReactData.editStore, isAllOverflow = tableReactData.isAllOverflow, validErrorMaps = tableReactData.validErrorMaps;
var afterFullData = tableInternalData.afterFullData;
var validOpts = computeValidOpts.value;
var checkboxOpts = computeCheckboxOpts.value;
var editOpts = computeEditOpts.value;
var tooltipOpts = computeTooltipOpts.value;
var rowOpts = computeRowOpts.value;
var sYOpts = computeSYOpts.value;
var columnOpts = computeColumnOpts.value;
var type = column.type, cellRender = column.cellRender, editRender = column.editRender, align = column.align, showOverflow = column.showOverflow, className = column.className, treeNode = column.treeNode, slots = column.slots;
var actived = editStore.actived;
var scrollYRHeight = sYOpts.rHeight;
var rowHeight = rowOpts.height;
var renderOpts = editRender || cellRender;
var compConf = renderOpts ? VXETable.renderer.get(renderOpts.name) : null;
var compCellClassName = compConf ? compConf.cellClassName : '';
var compCellStyle = compConf ? compConf.cellStyle : '';
var showAllTip = tooltipOpts.showAll;
var columnIndex = $xetable.getColumnIndex(column);
var _columnIndex = $xetable.getVTColumnIndex(column);
var isEdit = isEnableConf(editRender);
var fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
var cellOverflow = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow;
var showEllipsis = cellOverflow === 'ellipsis';
var showTitle = cellOverflow === 'title';
var showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
var hasEllipsis = showTitle || showTooltip || showEllipsis;
var isDirty;
var tdOns = {};
var cellAlign = align || allAlign;
var errorValidItem = validErrorMaps["".concat(rowid, ":").concat(column.id)];
var showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline');
var attrs = { colid: column.id };
var params = { $table: $xetable, $grid: $xetable.xegrid, seq: seq, rowid: rowid, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex, _rowIndex: _rowIndex, column: column, columnIndex: columnIndex, $columnIndex: $columnIndex, _columnIndex: _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items: items };
// 虚拟滚动不支持动态高度
if (scrollYLoad && !hasEllipsis) {
showEllipsis = hasEllipsis = true;
}
// hover 进入事件
if (showTitle || showTooltip || showAllTip || tooltipConfig) {
tdOns.onMouseenter = function (evnt) {
if (isVMScrollProcess()) {
return;
}
if (showTitle) {
updateCellTitle(evnt.currentTarget, column);
}
else if (showTooltip || showAllTip) {
// 如果配置了显示 tooltip
$xetable.triggerBodyTooltipEvent(evnt, params);
}
$xetable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, params), evnt);
};
}
// hover 退出事件
if (showTooltip || showAllTip || tooltipConfig) {
tdOns.onMouseleave = function (evnt) {
if (isVMScrollProcess()) {
return;
}
if (showTooltip || showAllTip) {
$xetable.handleTargetLeaveEvent(evnt);
}
$xetable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, params), evnt);
};
}
// 按下事件处理
if (checkboxOpts.range || mouseConfig) {
tdOns.onMousedown = function (evnt) {
$xetable.triggerCellMousedownEvent(evnt, params);
};
}
// 点击事件处理
tdOns.onClick = function (evnt) {
$xetable.triggerCellClickEvent(evnt, params);
};
// 双击事件处理
tdOns.onDblclick = function (evnt) {
$xetable.triggerCellDblclickEvent(evnt, params);
};
// 合并行或列
if (mergeList.length) {
var spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex);
if (spanRest) {
var rowspan = spanRest.rowspan, colspan = spanRest.colspan;
if (!rowspan || !colspan) {
return null;
}
if (rowspan > 1) {
attrs.rowspan = rowspan;
}
if (colspan > 1) {
attrs.colspan = colspan;
}
}
}
else if (spanMethod) {
// 自定义合并行或列的方法
var _b = spanMethod(params) || {}, _c = _b.rowspan, rowspan = _c === void 0 ? 1 : _c, _d = _b.colspan, colspan = _d === void 0 ? 1 : _d;
if (!rowspan || !colspan) {
return null;
}
if (rowspan > 1) {
attrs.rowspan = rowspan;
}
if (colspan > 1) {
attrs.colspan = colspan;
}
}
// 如果被合并不可隐藏
if (fixedHiddenColumn && mergeList) {
if (attrs.colspan > 1 || attrs.rowspan > 1) {
fixedHiddenColumn = false;
}
}
// 如果编辑列开启显示状态
if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
isDirty = $xetable.isUpdateByRow(row, column.field);
}
var tdVNs = [];
if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
tdVNs.push(h('div', {
class: ['vxe-cell', {
'c--title': showTitle,
'c--tooltip': showTooltip,
'c--ellipsis': showEllipsis
}],
style: {
maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
}
}));
}
else {
// 渲染单元格
tdVNs.push.apply(tdVNs, __spreadArray(__spreadArray([], renderLine(params), false), [h('div', {
class: ['vxe-cell', {
'c--title': showTitle,
'c--tooltip': showTooltip,
'c--ellipsis': showEllipsis
}],
style: {
maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
},
title: showTitle ? $xetable.getCellLabel(row, column) : null
}, column.renderCell(params))], false));
if (showValidTip && errorValidItem) {
var errRule = errorValidItem.rule;
var validSlot = slots ? slots.valid : null;
var validParams = __assign(__assign({}, params), errorValidItem);
tdVNs.push(h('div', {
class: ['vxe-cell--valid-error-hint', getPropClass(validOpts.className, validParams)],
style: errRule && errRule.maxWidth ? {
width: "".concat(errRule.maxWidth, "px")
} : null
}, validSlot ? $xetable.callSlot(validSlot, validParams) : [
h('span', {
class: 'vxe-cell--valid-error-msg'
}, errorValidItem.content)
]));
}
}
return h('td', __assign(__assign(__assign({ class: [
'vxe-body--column',
column.id,
(_a = {},
_a["col--".concat(cellAlign)] = cellAlign,
_a["col--".concat(type)] = type,
_a['col--last'] = $columnIndex === columns.length - 1,
_a['col--tree-node'] = treeNode,
_a['col--edit'] = isEdit,
_a['col--ellipsis'] = hasEllipsis,
_a['fixed--hidden'] = fixedHiddenColumn,
_a['col--dirty'] = isDirty,
_a['col--active'] = editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
_a['col--valid-error'] = !!errorValidItem,
_a['col--current'] = currentColumn === column,
_a),
getPropClass(compCellClassName, params),
getPropClass(className, params),
getPropClass(allCellClassName, params)
], key: columnKey || columnOpts.useKey ? column.id : $columnIndex }, attrs), { style: Object.assign({
height: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : ''
}, XEUtils.isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, XEUtils.isFunction(cellStyle) ? cellStyle(params) : cellStyle) }), tdOns), tdVNs);
};
var renderRows = function (fixedType, tableData, tableColumn) {
var stripe = tableProps.stripe, rowKey = tableProps.rowKey, highlightHoverRow = tableProps.highlightHoverRow, rowClassName = tableProps.rowClassName, rowStyle = tableProps.rowStyle, allColumnOverflow = tableProps.showOverflow, editConfig = tableProps.editConfig, treeConfig = tableProps.treeConfig;
var hasFixedColumn = tableReactData.hasFixedColumn, treeExpandedMaps = tableReactData.treeExpandedMaps, scrollYLoad = tableReactData.scrollYLoad, rowExpandedMaps = tableReactData.rowExpandedMaps, expandColumn = tableReactData.expandColumn, selectRadioRow = tableReactData.selectRadioRow, pendingRowMaps = tableReactData.pendingRowMaps, pendingRowList = tableReactData.pendingRowList;
var fullAllDataRowIdData = tableInternalData.fullAllDataRowIdData;
var checkboxOpts = computeCheckboxOpts.value;
var radioOpts = computeRadioOpts.value;
var treeOpts = computeTreeOpts.value;
var editOpts = computeEditOpts.value;
var rowOpts = computeRowOpts.value;
var transform = treeOpts.transform;
var childrenField = treeOpts.children || treeOpts.childrenField;
var rows = [];
tableData.forEach(function (row, $rowIndex) {
var trOn = {};
var rowIndex = $rowIndex;
// 确保任何情况下 rowIndex 都精准指向真实 data 索引
rowIndex = $xetable.getRowIndex(row);
// 事件绑定
if (rowOpts.isHover || highlightHoverRow) {
trOn.onMouseenter = function (evnt) {
if (isVMScrollProcess()) {
return;
}
$xetable.triggerHoverEvent(evnt, { row: row, rowIndex: rowIndex });
};
trOn.onMouseleave = function () {
if (isVMScrollProcess()) {
return;
}
$xetable.clearHoverRow();
};
}
var rowid = getRowid($xetable, row);
var rest = fullAllDataRowIdData[rowid];
var rowLevel = 0;
var seq = -1;
var _rowIndex = 0;
if (rest) {
rowLevel = rest.level;
seq = rest.seq;
_rowIndex = rest._index;
}
var params = { $table: $xetable, seq: seq, rowid: rowid, fixed: fixedType, type: renderType, level: rowLevel, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex, _rowIndex: _rowIndex };
// 行是否被展开
var isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
// 树节点是否被展开
var isExpandTree = false;
var rowChildren = [];
// 处理新增状态
var isNewRow = false;
if (editConfig) {
isNewRow = $xetable.isInsertByRow(row);
}
if (treeConfig && !scrollYLoad && !transform) {
rowChildren = row[childrenField];
isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
}
rows.push(h('tr', __assign({ class: [
'vxe-body--row',
treeConfig ? "row--level-".concat(rowLevel) : '',
{
'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
'is--new': isNewRow,
'is--expand-row': isExpandRow,
'is--expand-tree': isExpandTree,
'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
'row--radio': radioOpts.highlight && $xetable.eqRow(selectRadioRow, row),
'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
},
getPropClass(rowClassName, params)
], rowid: rowid, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null, key: (rowKey || rowOpts.useKey) || treeConfig ? rowid : $rowIndex }, trOn), tableColumn.map(function (column, $columnIndex) {
return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
})));
// 如果行被展开了
if (isExpandRow) {
var expandOpts = computeExpandOpts.value;
var expandHeight = expandOpts.height;
var cellStyle = {};
if (expandHeight) {
cellStyle.height = "".concat(expandHeight, "px");
}
if (treeConfig) {
cellStyle.paddingLeft = "".concat((rowLevel * treeOpts.indent) + 30, "px");
}
var showOverflow = expandColumn.showOverflow;
var hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow;
var expandParams = { $table: $xetable, seq: seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex, _rowIndex: _rowIndex };
rows.push(h('tr', __assign({ class: 'vxe-body--expanded-row', key: "expand_".concat(rowid), style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) : null }, trOn), [
h('td', {
class: {
'vxe-body--expanded-column': 1,
'fixed--hidden': fixedType && !hasFixedColumn,
'col--ellipsis': hasEllipsis
},
colspan: tableColumn.length
}, [
h('div', {
class: {
'vxe-body--expanded-cell': 1,
'is--ellipsis': expandHeight
},
style: cellStyle
}, [
expandColumn.renderData(expandParams)
])
])
]));
}
// 如果是树形表格
if (isExpandTree) {
rows.push.apply(rows, renderRows(fixedType, rowChildren, tableColumn));
}
});
return rows;
};
/**
* 同步滚动条
*/
var scrollProcessTimeout;
var syncBodyScroll = function (fixedType, scrollTop, elem1, elem2) {
if (elem1 || elem2) {
if (elem1) {
removeScrollListener(elem1);
elem1.scrollTop = scrollTop;
}
if (elem2) {
removeScrollListener(elem2);
elem2.scrollTop = scrollTop;
}
clearTimeout(scrollProcessTimeout);
scrollProcessTimeout = setTimeout(function () {
// const tableBody = refTableBody.value
// const leftBody = refTableLeftBody.value
// const rightBody = refTableRightBody.value
// const bodyElem = tableBody.$el as XEBodyScrollElement
// const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
// const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
restoreScrollListener(elem1);
restoreScrollListener(elem2);
// 检查滚动条是的同步
// let targetTop = bodyElem.scrollTop
// if (fixedType === 'left') {
// if (leftElem) {
// targetTop = leftElem.scrollTop
// }
// } else if (fixedType === 'right') {
// if (rightElem) {
// targetTop = rightElem.scrollTop
// }
// }
// setScrollTop(bodyElem, targetTop)
// setScrollTop(leftElem, targetTop)
// setScrollTop(rightElem, targetTop)
tableReactData.lastScrollTime = Date.now();
}, 300);
}
};
var scrollLoadingTime = null;
/**
* 滚动处理
* 如果存在列固定左侧，同步更新滚动状态
* 如果存在列固定右侧，同步更新滚动状态
*/
var scrollEvent = function (evnt) {
var fixedType = props.fixedType;
var highlightHoverRow = tableProps.highlightHoverRow;
var scrollXLoad = tableReactData.scrollXLoad, scrollYLoad = tableReactData.scrollYLoad;
var elemStore = tableInternalData.elemStore, lastScrollTop = tableInternalData.lastScrollTop, lastScrollLeft = tableInternalData.lastScrollLeft;
var rowOpts = computeRowOpts.value;
var tableHeader = refTableHeader.value;
var tableBody = refTableBody.value;
var tableFooter = refTableFooter.value;
var leftBody = refTableLeftBody.value;
var rightBody = refTableRightBody.value;
var validTip = refValidTooltip.value;
var scrollBodyElem = refElem.value;
var headerElem = tableHeader ? tableHeader.$el : null;
var footerElem = tableFooter ? tableFooter.$el : null;
var bodyElem = tableBody.$el;
var leftElem = leftBody ? leftBody.$el : null;
var rightElem = rightBody ? rightBody.$el : null;
var bodyYRef = elemStore['main-body-ySpace'];
var bodyYElem = bodyYRef ? bodyYRef.value : null;
var bodyXRef = elemStore['main-body-xSpace'];
var bodyXElem = bodyXRef ? bodyXRef.value : null;
var bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
var bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
var scrollTop = scrollBodyElem.scrollTop;
var scrollLeft = bodyElem.scrollLeft;
var isRollX = scrollLeft !== lastScrollLeft;
var isRollY = scrollTop !== lastScrollTop;
tableInternalData.lastScrollTop = scrollTop;
tableInternalData.lastScrollLeft = scrollLeft;
tableReactData.lastScrollTime = Date.now();
if (rowOpts.isHover || highlightHoverRow) {
$xetable.clearHoverRow();
}
if (leftElem && fixedType === 'left') {
scrollTop = leftElem.scrollTop;
syncBodyScroll(fixedType, scrollTop, bodyElem, rightElem);
}
else if (rightElem && fixedType === 'right') {
scrollTop = rightElem.scrollTop;
syncBodyScroll(fixedType, scrollTop, bodyElem, leftElem);
}
else {
if (isRollX) {
if (headerElem) {
headerElem.scrollLeft = bodyElem.scrollLeft;
}
if (footerElem) {
footerElem.scrollLeft = bodyElem.scrollLeft;
}
}
if (leftElem || rightElem) {
$xetable.checkScrolling();
if (isRollY) {
syncBodyScroll(fixedType, scrollTop, leftElem, rightElem);
}
}
}
// let isLoadScroll = false
if (scrollXLoad && isRollX) {
// isLoadScroll = true
$xetable.triggerScrollXEvent(evnt);
}
if (scrollYLoad && isRollY) {
// isLoadScroll = true
$xetable.triggerScrollYEvent(evnt);
}
if (scrollLoadingTime !== null) {
clearTimeout(scrollLoadingTime);
}
// if (isLoadScroll) {
// tableReactData.scrollVMLoading = true
// scrollLoadingTime = setTimeout(() => {
// scrollLoadingTime = null
// tableReactData.scrollVMLoading = false
// }, 20)
// } else {
// tableReactData.scrollVMLoading = false
// }
if (isRollX && validTip && validTip.reactData.visible) {
validTip.updatePlacement();
}
$xetable.dispatchEvent('scroll', {
type: renderType,
fixed: fixedType,
scrollTop: scrollTop,
scrollLeft: scrollLeft,
scrollHeight: bodyElem.scrollHeight,
scrollWidth: bodyElem.scrollWidth,
bodyHeight: bodyHeight,
bodyWidth: bodyWidth,
isX: isRollX,
isY: isRollY
}, evnt);
};
var wheelTime;
var wheelYSize = 0;
var wheelYInterval = 0;
var wheelYTotal = 0;
var isPrevWheelTop = false;
var handleWheel = function (evnt, isTopWheel, deltaTop, isRollX, isRollY) {
var elemStore = tableInternalData.elemStore;
var scrollXLoad = tableReactData.scrollXLoad, scrollYLoad = tableReactData.scrollYLoad;
var tableBody = refTableBody.value;
var leftBody = refTableLeftBody.value;
var rightBody = refTableRightBody.value;
var leftElem = leftBody ? leftBody.$el : null;
var rightElem = rightBody ? rightBody.$el : null;
var bodyElem = tableBody.$el;
var bodyYRef = elemStore['main-body-ySpace'];
var bodyYElem = bodyYRef ? bodyYRef.value : null;
var bodyXRef = elemStore['main-body-xSpace'];
var bodyXElem = bodyXRef ? bodyXRef.value : null;
var bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
var bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
var remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0;
isPrevWheelTop = isTopWheel;
wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize);
wheelYInterval = 0;
wheelYTotal = 0;
clearTimeout(wheelTime);
var handleSmooth = function () {
if (wheelYTotal < wheelYSize) {
var fixedType = props.fixedType;
wheelYInterval = Math.max(5, Math.floor(wheelYInterval * 1.5));
wheelYTotal = wheelYTotal + wheelYInterval;
if (wheelYTotal > wheelYSize) {
wheelYInterval = wheelYInterval - (wheelYTotal - wheelYSize);
}
var scrollTop = bodyElem.scrollTop, clientHeight = bodyElem.clientHeight, scrollHeight = bodyElem.scrollHeight;
var targerTop = scrollTop + (wheelYInterval * (isTopWheel ? -1 : 1));
bodyElem.scrollTop = targerTop;
if (leftElem) {
leftElem.scrollTop = targerTop;
}
if (rightElem) {
rightElem.scrollTop = targerTop;
}
if (isTopWheel ? targerTop < scrollHeight - clientHeight : targerTop >= 0) {
wheelTime = setTimeout(handleSmooth, 10);
}
$xetable.dispatchEvent('scroll', {
type: renderType,
fixed: fixedType,
scrollTop: bodyElem.scrollTop,
scrollLeft: bodyElem.scrollLeft,
scrollHeight: bodyElem.scrollHeight,
scrollWidth: bodyElem.scrollWidth,
bodyHeight: bodyHeight,
bodyWidth: bodyWidth,
isX: isRollX,
isY: isRollY
}, evnt);
}
};
handleSmooth();
};
/**
* 滚轮处理
*/
var wheelEvent = function (evnt) {
var deltaY = evnt.deltaY, deltaX = evnt.deltaX;
var highlightHoverRow = tableProps.highlightHoverRow;
var scrollYLoad = tableReactData.scrollYLoad;
var lastScrollTop = tableInternalData.lastScrollTop, lastScrollLeft = tableInternalData.lastScrollLeft;
var rowOpts = computeRowOpts.value;
var tableBody = refTableBody.value;
var scrollBodyElem = refElem.value;
var bodyElem = tableBody.$el;
var deltaTop = deltaY;
var deltaLeft = deltaX;
var isTopWheel = deltaTop < 0;
// 如果滚动位置已经是顶部或底部，则不需要触发
if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {
return;
}
var scrollTop = scrollBodyElem.scrollTop + deltaTop;
var scrollLeft = bodyElem.scrollLeft + deltaLeft;
var isRollX = scrollLeft !== lastScrollLeft;
var isRollY = scrollTop !== lastScrollTop;
// 用于鼠标纵向滚轮处理
if (isRollY) {
evnt.preventDefault();
tableInternalData.lastScrollTop = scrollTop;
tableInternalData.lastScrollLeft = scrollLeft;
tableReactData.lastScrollTime = Date.now();
if (rowOpts.isHover || highlightHoverRow) {
$xetable.clearHoverRow();
}
handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY);
if (scrollYLoad) {
$xetable.triggerScrollYEvent(evnt);
}
}
};
onMounted(function () {
nextTick(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-body-");
var el = refElem.value;
elemStore["".concat(prefix, "wrapper")] = refElem;
elemStore["".concat(prefix, "table")] = refBodyTable;
elemStore["".concat(prefix, "colgroup")] = refBodyColgroup;
elemStore["".concat(prefix, "list")] = refBodyTBody;
elemStore["".concat(prefix, "xSpace")] = refBodyXSpace;
elemStore["".concat(prefix, "ySpace")] = refBodyYSpace;
elemStore["".concat(prefix, "emptyBlock")] = refBodyEmptyBlock;
if (el) {
el.onscroll = scrollEvent;
el._onscroll = scrollEvent;
}
});
});
onBeforeUnmount(function () {
var el = refElem.value;
clearTimeout(wheelTime);
if (el) {
el._onscroll = null;
el.onscroll = null;
}
});
onUnmounted(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-body-");
elemStore["".concat(prefix, "wrapper")] = null;
elemStore["".concat(prefix, "table")] = null;
elemStore["".concat(prefix, "colgroup")] = null;
elemStore["".concat(prefix, "list")] = null;
elemStore["".concat(prefix, "xSpace")] = null;
elemStore["".concat(prefix, "ySpace")] = null;
elemStore["".concat(prefix, "emptyBlock")] = null;
});
var renderVN = function () {
var fixedColumn = props.fixedColumn, fixedType = props.fixedType, tableColumn = props.tableColumn;
var keyboardConfig = tableProps.keyboardConfig, allColumnOverflow = tableProps.showOverflow, spanMethod = tableProps.spanMethod, mouseConfig = tableProps.mouseConfig;
var tableData = tableReactData.tableData, mergeList = tableReactData.mergeList, scrollYLoad = tableReactData.scrollYLoad, isAllOverflow = tableReactData.isAllOverflow;
var visibleColumn = tableInternalData.visibleColumn;
var slots = tableContext.slots;
var sYOpts = computeSYOpts.value;
var emptyOpts = computeEmptyOpts.value;
var keyboardOpts = computeKeyboardOpts.value;
var mouseOpts = computeMouseOpts.value;
// const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
// const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
// 如果是使用优化模式
if (fixedType) {
// 如果存在展开行使用全量渲染
if (!tableReactData.expandColumn && (scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
tableColumn = fixedColumn;
}
else {
tableColumn = visibleColumn;
// 检查固定列是否被合并，合并范围是否超出固定列
// if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
// tableColumn = fixedColumn
// } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
// tableColumn = fixedColumn
// } else {
// tableColumn = visibleColumn
// }
}
}
else {
tableColumn = visibleColumn;
}
}
var emptyContent;
var emptySlot = slots ? slots.empty : null;
if (emptySlot) {
emptyContent = $xetable.callSlot(emptySlot, { $table: $xetable, $grid: $xetable.xegrid });
}
else {
var compConf = emptyOpts.name ? VXETable.renderer.get(emptyOpts.name) : null;
var renderEmpty = compConf ? compConf.renderEmpty : null;
if (renderEmpty) {
emptyContent = getSlotVNs(renderEmpty(emptyOpts, { $table: $xetable }));
}
else {
emptyContent = tableProps.emptyText || GlobalConfig.i18n('vxe.table.emptyText');
}
}
return h('div', __assign({ ref: refElem, class: ['vxe-table--body-wrapper', fixedType ? "fixed-".concat(fixedType, "--wrapper") : 'body--wrapper'], xid: xID }, (sYOpts.mode === 'wheel' ? { onWheel: wheelEvent } : {})), [
fixedType ? createCommentVNode() : h('div', {
ref: refBodyXSpace,
class: 'vxe-body--x-space'
}),
h('div', {
ref: refBodyYSpace,
class: 'vxe-body--y-space'
}),
h('table', {
ref: refBodyTable,
class: 'vxe-table--body',
xid: xID,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
/**
* 列宽
*/
h('colgroup', {
ref: refBodyColgroup
}, tableColumn.map(function (column, $columnIndex) {
return h('col', {
name: column.id,
key: $columnIndex
});
})),
/**
* 内容
*/
h('tbody', {
ref: refBodyTBody
}, renderRows(fixedType, tableData, tableColumn))
]),
h('div', {
class: 'vxe-table--checkbox-range'
}),
mouseConfig && mouseOpts.area ? h('div', {
class: 'vxe-table--cell-area'
}, [
h('span', {
class: 'vxe-table--cell-main-area'
}, mouseOpts.extension ? [
h('span', {
class: 'vxe-table--cell-main-area-btn',
onMousedown: function (evnt) {
$xetable.triggerCellExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType });
}
})
] : []),
h('span', {
class: 'vxe-table--cell-copy-area'
}),
h('span', {
class: 'vxe-table--cell-extend-area'
}),
h('span', {
class: 'vxe-table--cell-multi-area'
}),
h('span', {
class: 'vxe-table--cell-active-area'
})
]) : null,
!fixedType ? h('div', {
class: 'vxe-table--empty-block',
ref: refBodyEmptyBlock
}, [
h('div', {
class: 'vxe-table--empty-content'
}, emptyContent)
]) : null
]);
};
return renderVN;
}
});