vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
359 lines (358 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _dom = require("../../tools/dom");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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 renderType = 'footer';
function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
for (var mIndex = 0; mIndex < mergeFooterList.length; mIndex++) {
var _a = mergeFooterList[mIndex],
mergeRowIndex = _a.row,
mergeColIndex = _a.col,
mergeRowspan = _a.rowspan,
mergeColspan = _a.colspan;
if (mergeColIndex > -1 && mergeRowIndex > -1 && mergeRowspan && mergeColspan) {
if (mergeRowIndex === _rowIndex && mergeColIndex === _columnIndex) {
return {
rowspan: mergeRowspan,
colspan: mergeColspan
};
}
if (_rowIndex >= mergeRowIndex && _rowIndex < mergeRowIndex + mergeRowspan && _columnIndex >= mergeColIndex && _columnIndex < mergeColIndex + mergeColspan) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
var _default = (0, _vue.defineComponent)({
name: 'VxeTableFooter',
props: {
footerTableData: {
type: Array,
default: function () {
return [];
}
},
tableColumn: {
type: Array,
default: function () {
return [];
}
},
fixedColumn: {
type: Array,
default: function () {
return [];
}
},
fixedType: {
type: String,
default: null
}
},
setup: function (props) {
var $xetable = (0, _vue.inject)('$xetable', {});
var xID = $xetable.xID,
tableProps = $xetable.props,
tableReactData = $xetable.reactData,
tableInternalData = $xetable.internalData;
var _a = $xetable.getRefMaps(),
refTableHeader = _a.refTableHeader,
refTableBody = _a.refTableBody,
refValidTooltip = _a.refValidTooltip;
var _b = $xetable.getComputeMaps(),
computeTooltipOpts = _b.computeTooltipOpts,
computeColumnOpts = _b.computeColumnOpts;
var refElem = (0, _vue.ref)();
var refFooterTable = (0, _vue.ref)();
var refFooterColgroup = (0, _vue.ref)();
var refFooterTFoot = (0, _vue.ref)();
var refFooterXSpace = (0, _vue.ref)();
/**
* 滚动处理
* 如果存在列固定左侧，同步更新滚动状态
* 如果存在列固定右侧，同步更新滚动状态
*/
var scrollEvent = function (evnt) {
var fixedType = props.fixedType;
var scrollXLoad = tableReactData.scrollXLoad;
var lastScrollLeft = tableInternalData.lastScrollLeft;
var validTip = refValidTooltip.value;
var tableHeader = refTableHeader.value;
var tableBody = refTableBody.value;
var headerElem = tableHeader ? tableHeader.$el : null;
var footerElem = refElem.value;
var bodyElem = tableBody.$el;
var scrollLeft = footerElem.scrollLeft;
var isX = scrollLeft !== lastScrollLeft;
tableInternalData.lastScrollLeft = scrollLeft;
tableReactData.lastScrollTime = Date.now();
if (headerElem) {
headerElem.scrollLeft = scrollLeft;
}
if (bodyElem) {
bodyElem.scrollLeft = scrollLeft;
}
if (scrollXLoad && isX) {
$xetable.triggerScrollXEvent(evnt);
}
if (isX && validTip && validTip.reactData.visible) {
validTip.updatePlacement();
}
$xetable.dispatchEvent('scroll', {
type: renderType,
fixed: fixedType,
scrollTop: bodyElem.scrollTop,
scrollLeft: scrollLeft,
isX: isX,
isY: false
}, evnt);
};
(0, _vue.onMounted)(function () {
(0, _vue.nextTick)(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-footer-");
elemStore["".concat(prefix, "wrapper")] = refElem;
elemStore["".concat(prefix, "table")] = refFooterTable;
elemStore["".concat(prefix, "colgroup")] = refFooterColgroup;
elemStore["".concat(prefix, "list")] = refFooterTFoot;
elemStore["".concat(prefix, "xSpace")] = refFooterXSpace;
});
});
(0, _vue.onUnmounted)(function () {
var fixedType = props.fixedType;
var elemStore = tableInternalData.elemStore;
var prefix = "".concat(fixedType || 'main', "-footer-");
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;
});
var renderVN = function () {
var fixedType = props.fixedType,
fixedColumn = props.fixedColumn,
tableColumn = props.tableColumn,
footerTableData = props.footerTableData;
var footerRowClassName = tableProps.footerRowClassName,
footerCellClassName = tableProps.footerCellClassName,
footerRowStyle = tableProps.footerRowStyle,
footerCellStyle = tableProps.footerCellStyle,
allFooterAlign = tableProps.footerAlign,
footerSpanMethod = tableProps.footerSpanMethod,
allAlign = tableProps.align,
columnKey = tableProps.columnKey,
allColumnFooterOverflow = tableProps.showFooterOverflow;
var visibleColumn = tableInternalData.visibleColumn;
var scrollXLoad = tableReactData.scrollXLoad,
overflowX = tableReactData.overflowX,
scrollbarWidth = tableReactData.scrollbarWidth,
currentColumn = tableReactData.currentColumn,
mergeFooterList = tableReactData.mergeFooterList;
var tooltipOpts = computeTooltipOpts.value;
var columnOpts = computeColumnOpts.value;
// 如果是使用优化模式
if (fixedType) {
// 如果存在展开行使用全量渲染
if (!tableReactData.expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
if (!mergeFooterList.length || !footerSpanMethod) {
tableColumn = fixedColumn;
} else {
tableColumn = visibleColumn;
}
} else {
tableColumn = visibleColumn;
}
}
return (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-table--footer-wrapper', fixedType ? "fixed-".concat(fixedType, "--wrapper") : 'body--wrapper'],
xid: xID,
onScroll: scrollEvent
}, [fixedType ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
ref: refFooterXSpace,
class: 'vxe-body--x-space'
}), (0, _vue.h)('table', {
ref: refFooterTable,
class: 'vxe-table--footer',
xid: xID,
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
/**
* 列宽
*/
(0, _vue.h)('colgroup', {
ref: refFooterColgroup
}, tableColumn.map(function (column, $columnIndex) {
return (0, _vue.h)('col', {
name: column.id,
key: $columnIndex
});
}).concat(scrollbarWidth ? [(0, _vue.h)('col', {
name: 'col_gutter'
})] : [])),
/**
* 底部
*/
(0, _vue.h)('tfoot', {
ref: refFooterTFoot
}, footerTableData.map(function (list, _rowIndex) {
var $rowIndex = _rowIndex;
return (0, _vue.h)('tr', {
class: ['vxe-footer--row', footerRowClassName ? _xeUtils.default.isFunction(footerRowClassName) ? footerRowClassName({
$table: $xetable,
_rowIndex: _rowIndex,
$rowIndex: $rowIndex,
fixed: fixedType,
type: renderType
}) : footerRowClassName : ''],
style: footerRowStyle ? _xeUtils.default.isFunction(footerRowStyle) ? footerRowStyle({
$table: $xetable,
_rowIndex: _rowIndex,
$rowIndex: $rowIndex,
fixed: fixedType,
type: renderType
}) : footerRowStyle : null
}, tableColumn.map(function (column, $columnIndex) {
var _a;
var type = column.type,
showFooterOverflow = column.showFooterOverflow,
footerAlign = column.footerAlign,
align = column.align,
footerClassName = column.footerClassName;
var showAllTip = tooltipOpts.showAll;
var isColGroup = column.children && column.children.length;
var fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
var footOverflow = _xeUtils.default.isUndefined(showFooterOverflow) || _xeUtils.default.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
var footAlign = footerAlign || align || allFooterAlign || allAlign;
var showEllipsis = footOverflow === 'ellipsis';
var showTitle = footOverflow === 'title';
var showTooltip = footOverflow === true || footOverflow === 'tooltip';
var hasEllipsis = showTitle || showTooltip || showEllipsis;
var attrs = {
colid: column.id
};
var tfOns = {};
var columnIndex = $xetable.getColumnIndex(column);
var _columnIndex = $xetable.getVTColumnIndex(column);
var itemIndex = _columnIndex;
var params = {
$table: $xetable,
$grid: $xetable.xegrid,
_rowIndex: _rowIndex,
$rowIndex: $rowIndex,
column: column,
columnIndex: columnIndex,
$columnIndex: $columnIndex,
_columnIndex: _columnIndex,
itemIndex: itemIndex,
items: list,
fixed: fixedType,
type: renderType,
data: footerTableData
};
// 纵向虚拟滚动不支持动态行高
if (scrollXLoad && !hasEllipsis) {
showEllipsis = hasEllipsis = true;
}
if (showTitle || showTooltip || showAllTip) {
tfOns.onMouseenter = function (evnt) {
if (showTitle) {
(0, _dom.updateCellTitle)(evnt.currentTarget, column);
} else if (showTooltip || showAllTip) {
$xetable.triggerFooterTooltipEvent(evnt, params);
}
};
}
if (showTooltip || showAllTip) {
tfOns.onMouseleave = function (evnt) {
if (showTooltip || showAllTip) {
$xetable.handleTargetLeaveEvent(evnt);
}
};
}
tfOns.onClick = function (evnt) {
$xetable.dispatchEvent('footer-cell-click', Object.assign({
cell: evnt.currentTarget
}, params), evnt);
};
tfOns.onDblclick = function (evnt) {
$xetable.dispatchEvent('footer-cell-dblclick', Object.assign({
cell: evnt.currentTarget
}, params), evnt);
};
// 合并行或列
if (mergeFooterList.length) {
var spanRest = mergeFooterMethod(mergeFooterList, _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 (footerSpanMethod) {
// 自定义合并方法
var _b = footerSpanMethod(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;
}
}
return (0, _vue.h)('td', __assign(__assign(__assign(__assign({
class: ['vxe-footer--column', column.id, (_a = {}, _a["col--".concat(footAlign)] = footAlign, _a["col--".concat(type)] = type, _a['col--last'] = $columnIndex === tableColumn.length - 1, _a['fixed--hidden'] = fixedHiddenColumn, _a['col--ellipsis'] = hasEllipsis, _a['col--current'] = currentColumn === column, _a), (0, _dom.getPropClass)(footerClassName, params), (0, _dom.getPropClass)(footerCellClassName, params)]
}, attrs), {
style: footerCellStyle ? _xeUtils.default.isFunction(footerCellStyle) ? footerCellStyle(params) : footerCellStyle : null
}), tfOns), {
key: columnKey || columnOpts.useKey ? column.id : $columnIndex
}), [(0, _vue.h)('div', {
class: ['vxe-cell', {
'c--title': showTitle,
'c--tooltip': showTooltip,
'c--ellipsis': showEllipsis
}]
}, column.renderFooter(params))]);
}).concat(scrollbarWidth ? [(0, _vue.h)('td', {
class: 'vxe-footer--gutter col--gutter'
})] : []));
}))])]);
};
return renderVN;
}
});
exports.default = _default;