UNPKG

vxe-table-select-area

Version:

一个基于 vxe-table 的可区域选中复制、粘贴的组件

949 lines (943 loc) 38.3 kB
"use strict"; function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _xeUtils = _interopRequireDefault(require("xe-utils")); var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf")); var _vXETable = _interopRequireDefault(require("../../v-x-e-table")); var _utils = _interopRequireWildcard(require("../../tools/utils")); var _util = require("./util"); var _size = _interopRequireDefault(require("../../mixins/size")); var _dom = _interopRequireDefault(require("../../tools/dom")); var _vn = require("../../tools/vn"); var _index = _interopRequireDefault(require("../../select-area-dom/index")); var _constant = require("../../select-area/common/constant"); var _clickoutside = require("../../select-area/directives/clickoutside"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); } function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /*** * 新增开始 */ // 新增结束 var renderType = 'body'; // 滚动、拖动过程中不需要触发 function isOperateMouse($xetable) { return $xetable._isResize || $xetable.lastScrollTime && Date.now() < $xetable.lastScrollTime + $xetable.delayHover; } function renderLine(h, _vm, $xetable, params) { var row = params.row, column = params.column; var treeOpts = $xetable.treeOpts, treeConfig = $xetable.treeConfig, fullAllDataRowIdData = $xetable.fullAllDataRowIdData; var slots = column.slots, treeNode = column.treeNode; var rowid = (0, _util.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, h); } if (treeConfig && treeNode && treeOpts.line) { return [h('div', { "class": 'vxe-tree--line-wrapper' }, [h('div', { "class": 'vxe-tree--line', style: { height: "".concat((0, _util.calcTreeLine)(params, items, rIndex), "px"), left: "".concat(rLevel * treeOpts.indent + (rLevel ? 2 - (0, _util.getOffsetSize)($xetable) : 0) + 16, "px") } })])]; } return []; } /** * 渲染列 */ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) { var _ref2; var tableListeners = $xetable.$listeners, afterFullData = $xetable.afterFullData, tableData = $xetable.tableData, height = $xetable.height, columnKey = $xetable.columnKey, overflowX = $xetable.overflowX, sYOpts = $xetable.sYOpts, scrollXLoad = $xetable.scrollXLoad, scrollYLoad = $xetable.scrollYLoad, highlightCurrentRow = $xetable.highlightCurrentRow, allColumnOverflow = $xetable.showOverflow, isAllOverflow = $xetable.isAllOverflow, allAlign = $xetable.align, currentColumn = $xetable.currentColumn, allCellClassName = $xetable.cellClassName, cellStyle = $xetable.cellStyle, mergeList = $xetable.mergeList, spanMethod = $xetable.spanMethod, radioOpts = $xetable.radioOpts, checkboxOpts = $xetable.checkboxOpts, expandOpts = $xetable.expandOpts, treeOpts = $xetable.treeOpts, tooltipOpts = $xetable.tooltipOpts, mouseConfig = $xetable.mouseConfig, editConfig = $xetable.editConfig, editOpts = $xetable.editOpts, editRules = $xetable.editRules, validOpts = $xetable.validOpts, editStore = $xetable.editStore, validStore = $xetable.validStore, tooltipConfig = $xetable.tooltipConfig, rowOpts = $xetable.rowOpts, columnOpts = $xetable.columnOpts; var type = column.type, cellRender = column.cellRender, editRender = column.editRender, align = column.align, showOverflow = column.showOverflow, className = column.className, treeNode = column.treeNode; var actived = editStore.actived; var scrollYRHeight = sYOpts.rHeight; var rowHeight = rowOpts.height; var renderOpts = editRender || cellRender; var compConf = renderOpts ? _vXETable["default"].renderer.get(renderOpts.name) : null; var compCellClassName = compConf ? compConf.cellClassName : ''; var compCellStyle = compConf ? compConf.cellStyle : ''; var showAllTip = tooltipOpts.showAll || tooltipOpts.enabled; var columnIndex = $xetable.getColumnIndex(column); var _columnIndex = $xetable.getVTColumnIndex(column); var isEdit = (0, _utils.isEnableConf)(editRender); var fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX; var cellOverflow = _xeUtils["default"].isUndefined(showOverflow) || _xeUtils["default"].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 hasValidError = validStore.row === row && validStore.column === column; var showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? height || tableData.length > 1 : validOpts.message === 'inline'); var attrs = { colid: column.id }; var bindMouseenter = tableListeners['cell-mouseenter']; var bindMouseleave = tableListeners['cell-mouseleave']; var triggerDblclick = editRender && editConfig && editOpts.trigger === 'dblclick'; 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 ((scrollXLoad || scrollYLoad) && !hasEllipsis) { showEllipsis = hasEllipsis = true; } // hover 进入事件 if (showTitle || showTooltip || showAllTip || bindMouseenter || tooltipConfig) { tdOns.mouseenter = function (evnt) { if (isOperateMouse($xetable)) { return; } if (showTitle) { _dom["default"].updateCellTitle(evnt.currentTarget, column); } else if (showTooltip || showAllTip) { // 如果配置了显示 tooltip $xetable.triggerBodyTooltipEvent(evnt, params); } if (bindMouseenter) { /*** * 新增开始 */ // 必须开启 @cell-mouseenter 否则区域选中无效 $xetable.bodyCellMouseover({ evnt: evnt, params: params }); $xetable.emitEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, params), evnt); } }; } // hover 退出事件 if (showTooltip || showAllTip || bindMouseleave || tooltipConfig) { tdOns.mouseleave = function (evnt) { if (isOperateMouse($xetable)) { return; } if (showTooltip || showAllTip) { $xetable.handleTargetLeaveEvent(evnt); } if (bindMouseleave) { $xetable.emitEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, params), evnt); } }; } // 按下事件处理 if (checkboxOpts.range || mouseConfig) { tdOns.mousedown = function (evnt) { $xetable.triggerCellMousedownEvent(evnt, params); }; } // 点击事件处理 if (rowOpts.isCurrent || highlightCurrentRow || tableListeners['cell-click'] || editRender && editConfig || expandOpts.trigger === 'row' || expandOpts.trigger === 'cell' || radioOpts.trigger === 'row' || column.type === 'radio' && radioOpts.trigger === 'cell' || checkboxOpts.trigger === 'row' || column.type === 'checkbox' && checkboxOpts.trigger === 'cell' || treeOpts.trigger === 'row' || column.treeNode && treeOpts.trigger === 'cell') { tdOns.click = function (evnt) { $xetable.triggerCellClickEvent(evnt, params); }; } // 双击事件处理 if (triggerDblclick || tableListeners['cell-dblclick']) { tdOns.dblclick = function (evnt) { $xetable.triggerCellDblclickEvent(evnt, params); }; } // 合并行或列 if (mergeList.length) { var spanRest = (0, _util.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 _ref = spanMethod(params) || {}, _ref$rowspan = _ref.rowspan, _rowspan = _ref$rowspan === void 0 ? 1 : _ref$rowspan, _ref$colspan = _ref.colspan, _colspan = _ref$colspan === void 0 ? 1 : _ref$colspan; 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, _toConsumableArray(renderLine(h, _vm, $xetable, params)).concat([h('div', { "class": ['vxe-cell', { 'c--title': showTitle, 'c--tooltip': showTooltip, 'c--ellipsis': showEllipsis }], style: { maxHeight: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : '' }, attrs: { title: showTitle ? $xetable.getCellLabel(row, column) : null } }, column.renderCell(h, params))])); if (showValidTip && hasValidError) { tdVNs.push(h('div', { "class": 'vxe-cell--valid', style: validStore.rule && validStore.rule.maxWidth ? { width: "".concat(validStore.rule.maxWidth, "px") } : null }, [h('span', { "class": 'vxe-cell--valid-msg' }, validStore.content)])); } } return h('td', { "class": ['vxe-body--column', column.id, (_ref2 = {}, _defineProperty(_ref2, "col--".concat(cellAlign), cellAlign), _defineProperty(_ref2, "col--".concat(type), type), _defineProperty(_ref2, 'col--last', $columnIndex === columns.length - 1), _defineProperty(_ref2, 'col--tree-node', treeNode), _defineProperty(_ref2, 'col--edit', isEdit), _defineProperty(_ref2, 'col--ellipsis', hasEllipsis), _defineProperty(_ref2, 'fixed--hidden', fixedHiddenColumn), _defineProperty(_ref2, 'col--dirty', isDirty), _defineProperty(_ref2, 'col--actived', editConfig && isEdit && actived.row === row && (actived.column === column || editOpts.mode === 'row')), _defineProperty(_ref2, 'col--valid-error', hasValidError), _defineProperty(_ref2, 'col--current', currentColumn === column), _ref2), _utils["default"].getClass(compCellClassName, params), _utils["default"].getClass(className, params), _utils["default"].getClass(allCellClassName, params)], key: columnKey || columnOpts.useKey ? column.id : $columnIndex, attrs: attrs, style: Object.assign({ height: hasEllipsis && (scrollYRHeight || rowHeight) ? "".concat(scrollYRHeight || rowHeight, "px") : '' }, _xeUtils["default"].isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, _xeUtils["default"].isFunction(cellStyle) ? cellStyle(params) : cellStyle), on: tdOns }, tdVNs); } function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) { var stripe = $xetable.stripe, rowKey = $xetable.rowKey, highlightHoverRow = $xetable.highlightHoverRow, rowClassName = $xetable.rowClassName, rowStyle = $xetable.rowStyle, editConfig = $xetable.editConfig, allColumnOverflow = $xetable.showOverflow, treeConfig = $xetable.treeConfig, treeOpts = $xetable.treeOpts, expandOpts = $xetable.expandOpts, editOpts = $xetable.editOpts, treeExpandeds = $xetable.treeExpandeds, scrollYLoad = $xetable.scrollYLoad, rowExpandeds = $xetable.rowExpandeds, radioOpts = $xetable.radioOpts, checkboxOpts = $xetable.checkboxOpts, expandColumn = $xetable.expandColumn, hasFixedColumn = $xetable.hasFixedColumn, fullAllDataRowIdData = $xetable.fullAllDataRowIdData, rowOpts = $xetable.rowOpts; var rows = []; tableData.forEach(function (row, $rowIndex) { var trOn = {}; var rowIndex = $rowIndex; var _rowIndex = $xetable.getVTRowIndex(row); // 确保任何情况下 rowIndex 都精准指向真实 data 索引 rowIndex = $xetable.getRowIndex(row); // 事件绑定 if (rowOpts.isHover || highlightHoverRow) { trOn.mouseenter = function (evnt) { if (isOperateMouse($xetable)) { return; } $xetable.triggerHoverEvent(evnt, { row: row, rowIndex: rowIndex }); }; trOn.mouseleave = function () { if (isOperateMouse($xetable)) { return; } $xetable.clearHoverRow(); }; } var rowid = (0, _util.getRowid)($xetable, row); var rest = fullAllDataRowIdData[rowid]; var rowLevel = rest ? rest.level : 0; var seq = rest ? rest.seq : -1; var params = { $table: $xetable, seq: seq, rowid: rowid, fixed: fixedType, type: renderType, level: rowLevel, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex }; // 行是否被展开 var isExpandRow = expandColumn && rowExpandeds.length && rowExpandeds.indexOf(row) > -1; // 树节点是否被展开 var isExpandTree = false; var rowChildren = []; // 是否新增行 var isNewRow = false; if (editConfig) { isNewRow = $xetable.isInsertByRow(row); } if (treeConfig && !scrollYLoad && !treeOpts.transform && treeExpandeds.length) { rowChildren = row[treeOpts.children]; isExpandTree = rowChildren && rowChildren.length && treeExpandeds.indexOf(row) > -1; } rows.push(h('tr', { "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.selectRow === row, 'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row) }, rowClassName ? _xeUtils["default"].isFunction(rowClassName) ? rowClassName(params) : rowClassName : ''], attrs: { rowid: rowid }, style: rowStyle ? _xeUtils["default"].isFunction(rowStyle) ? rowStyle(params) : rowStyle : null, key: rowKey || rowOpts.useKey || treeConfig ? rowid : $rowIndex, on: trOn }, tableColumn.map(function (column, $columnIndex) { return renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData); }))); // 如果行被展开了 if (isExpandRow) { 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["default"].isUndefined(showOverflow) || _xeUtils["default"].isNull(showOverflow) ? allColumnOverflow : showOverflow; var expandParams = { $table: $xetable, seq: seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row: row, rowIndex: rowIndex, $rowIndex: $rowIndex }; rows.push(h('tr', { "class": 'vxe-body--expanded-row', key: "expand_".concat(rowid), style: rowStyle ? _xeUtils["default"].isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle : null, on: trOn }, [h('td', { "class": { 'vxe-body--expanded-column': 1, 'fixed--hidden': fixedType && !hasFixedColumn, 'col--ellipsis': hasEllipsis }, attrs: { colspan: tableColumn.length } }, [h('div', { "class": { 'vxe-body--expanded-cell': 1, 'is--ellipsis': expandHeight }, style: cellStyle }, [expandColumn.renderData(h, expandParams)])])])); } // 如果是树形表格 if (isExpandTree) { rows.push.apply(rows, _toConsumableArray(renderRows(h, _vm, $xetable, fixedType, rowChildren, tableColumn))); } }); return rows; } /** * 同步滚动条 */ var scrollProcessTimeout; function syncBodyScroll(_vm, fixedType, scrollTop, elem1, elem2) { if (elem1 || elem2) { if (elem1) { (0, _util.removeScrollListener)(elem1); elem1.scrollTop = scrollTop; } if (elem2) { (0, _util.removeScrollListener)(elem2); elem2.scrollTop = scrollTop; } clearTimeout(scrollProcessTimeout); scrollProcessTimeout = setTimeout(function () { // const { tableBody, leftBody, rightBody } = _vm.$refs // const bodyElem = tableBody.$el // const leftElem = leftBody ? leftBody.$el : null // const rightElem = rightBody ? rightBody.$el : null (0, _util.restoreScrollListener)(elem1); (0, _util.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) }, 300); } } var _default = { name: 'VxeTableBody', mixins: [_size["default"]], /*** * 新增开始 */ directives: { 'click-outside': _clickoutside.clickoutside }, props: { tableData: Array, tableColumn: Array, fixedColumn: Array, size: String, fixedType: String }, data: function data() { return { wheelTime: null, wheelYSize: 0, wheelYInterval: 0, wheelYTotal: 0, editInputRef: 'editInputRef' }; }, mounted: function mounted() { var $xetable = this.$parent, $el = this.$el, $refs = this.$refs, fixedType = this.fixedType; var elemStore = $xetable.elemStore; var prefix = "".concat(fixedType || 'main', "-body-"); elemStore["".concat(prefix, "wrapper")] = $el; elemStore["".concat(prefix, "table")] = $refs.table; elemStore["".concat(prefix, "colgroup")] = $refs.colgroup; elemStore["".concat(prefix, "list")] = $refs.tbody; elemStore["".concat(prefix, "xSpace")] = $refs.xSpace; elemStore["".concat(prefix, "ySpace")] = $refs.ySpace; elemStore["".concat(prefix, "emptyBlock")] = $refs.emptyBlock; this.$el.onscroll = this.scrollEvent; this.$el._onscroll = this.scrollEvent; /*** * 新增开始 */ $xetable.$on(_constant.EMIT_EVENTS.SELECTION_CORNER_MOUSEDOWN, function (params) { $xetable.cellSelectionCornerMousedown(params); }); // recieve selection corner mouseup $xetable.$on(_constant.EMIT_EVENTS.SELECTION_CORNER_MOUSEUP, function (params) { $xetable.cellSelectionCornerMouseup(params); }); $xetable.$on(_constant.EMIT_EVENTS.AUTOFILLING_DIRECTION_CHANGE, function (params) { $xetable.autofillingDirectionChange(params); }); // 新增结束 }, beforeDestroy: function beforeDestroy() { clearTimeout(this.wheelTime); this.$el._onscroll = null; this.$el.onscroll = null; }, destroyed: function destroyed() { var $xetable = this.$parent, fixedType = this.fixedType; var elemStore = $xetable.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; }, render: function render(h) { var _e = this._e, $xetable = this.$parent, fixedColumn = this.fixedColumn, fixedType = this.fixedType; var $scopedSlots = $xetable.$scopedSlots, tId = $xetable.tId, tableData = $xetable.tableData, tableColumn = $xetable.tableColumn, visibleColumn = $xetable.visibleColumn, expandColumn = $xetable.expandColumn, allColumnOverflow = $xetable.showOverflow, keyboardConfig = $xetable.keyboardConfig, keyboardOpts = $xetable.keyboardOpts, mergeList = $xetable.mergeList, spanMethod = $xetable.spanMethod, scrollXLoad = $xetable.scrollXLoad, scrollYLoad = $xetable.scrollYLoad, isAllOverflow = $xetable.isAllOverflow, emptyOpts = $xetable.emptyOpts, mouseConfig = $xetable.mouseConfig, mouseOpts = $xetable.mouseOpts, sYOpts = $xetable.sYOpts; // 如果是使用优化模式 if (fixedType) { // 如果存在展开行使用全量渲染 if (!expandColumn && (scrollXLoad || 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; if ($scopedSlots.empty) { emptyContent = $scopedSlots.empty.call(this, { $table: $xetable }, h); } else { var compConf = emptyOpts.name ? _vXETable["default"].renderer.get(emptyOpts.name) : null; var renderEmpty = compConf ? compConf.renderEmpty : null; if (renderEmpty) { emptyContent = (0, _vn.getSlotVNs)(renderEmpty.call(this, h, emptyOpts, { $table: $xetable })); } else { emptyContent = $xetable.emptyText || _conf["default"].i18n('vxe.table.emptyText'); } } return h('div', { "class": ['vxe-table--body-wrapper', fixedType ? "fixed-".concat(fixedType, "--wrapper") : 'body--wrapper'], attrs: { xid: tId }, on: scrollYLoad && sYOpts.mode === 'wheel' ? { wheel: this.wheelEvent } : { mouseup: function mouseup() { // 事件的先后顺序 containerMouseup > bodyCellMousedown > bodyCellMouseup > bodyCellClick /*** * 新增开始 */ $xetable.tableContainerMouseup(); } }, directives: [{ name: 'click-outside', value: function value(e) { $xetable.tableClickOutside(e); } }] // 新增结束 }, [fixedType ? _e() : h('div', { "class": 'vxe-body--x-space', ref: 'xSpace' }), h('div', { "class": 'vxe-body--y-space', ref: 'ySpace' }), h('table', { "class": 'vxe-table--body', attrs: { xid: tId, cellspacing: 0, cellpadding: 0, border: 0 }, ref: 'table' }, [ /** * 列宽 */ h('colgroup', { ref: 'colgroup' }, tableColumn.map(function (column, $columnIndex) { return h('col', { attrs: { name: column.id }, key: $columnIndex }); })), /** * 内容 */ h('tbody', { ref: 'tbody' }, renderRows(h, this, $xetable, 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', on: { mousedown: function mousedown(evnt) { $xetable.triggerCellExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType }); } } })] : null), 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, // 区域选中组件 /*** * 新增开始 */ h(_index["default"], { ref: 'VxeSelectAreaDom', props: { tableData: tableData, tableColumn: tableColumn }, on: _defineProperty({}, _constant.EMIT_EVENTS.CELL_SELECTION_RANGE_DATA_CHANGE, function (newData) { $xetable.cellSelectionRangeDataChange(newData); }) }), // 新增结束 !fixedType ? h('div', { "class": 'vxe-table--empty-block', ref: 'emptyBlock' }, [h('div', { "class": 'vxe-table--empty-content' }, emptyContent)]) : null]); }, methods: { /** * 滚动处理 * 如果存在列固定左侧,同步更新滚动状态 * 如果存在列固定右侧,同步更新滚动状态 */ scrollEvent: function scrollEvent(evnt) { var scrollBodyElem = this.$el, $xetable = this.$parent, fixedType = this.fixedType; var $refs = $xetable.$refs, elemStore = $xetable.elemStore, highlightHoverRow = $xetable.highlightHoverRow, scrollXLoad = $xetable.scrollXLoad, scrollYLoad = $xetable.scrollYLoad, lastScrollTop = $xetable.lastScrollTop, lastScrollLeft = $xetable.lastScrollLeft, rowOpts = $xetable.rowOpts; var tableHeader = $refs.tableHeader, tableBody = $refs.tableBody, leftBody = $refs.leftBody, rightBody = $refs.rightBody, tableFooter = $refs.tableFooter, validTip = $refs.validTip; 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 bodyYElem = elemStore['main-body-ySpace']; var bodyXElem = elemStore['main-body-xSpace']; 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; $xetable.lastScrollTop = scrollTop; $xetable.lastScrollLeft = scrollLeft; $xetable.lastScrollTime = Date.now(); if (rowOpts.isHover || highlightHoverRow) { $xetable.clearHoverRow(); } if (leftElem && fixedType === 'left') { scrollTop = leftElem.scrollTop; syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, rightElem); } else if (rightElem && fixedType === 'right') { scrollTop = rightElem.scrollTop; syncBodyScroll($xetable, 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($xetable, fixedType, scrollTop, leftElem, rightElem); } } } if (scrollXLoad && isRollX) { $xetable.triggerScrollXEvent(evnt); } if (scrollYLoad && isRollY) { $xetable.triggerScrollYEvent(evnt); } if (isRollX && validTip && validTip.visible) { validTip.updatePlacement(); } $xetable.emitEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: scrollTop, scrollLeft: scrollLeft, scrollHeight: bodyElem.scrollHeight, scrollWidth: bodyElem.scrollWidth, bodyHeight: bodyHeight, bodyWidth: bodyWidth, isX: isRollX, isY: isRollY }, evnt); }, handleWheel: function handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY) { var _this = this; var $xetable = this.$parent; var $refs = $xetable.$refs, elemStore = $xetable.elemStore, scrollYLoad = $xetable.scrollYLoad, scrollXLoad = $xetable.scrollXLoad; var tableBody = $refs.tableBody, leftBody = $refs.leftBody, rightBody = $refs.rightBody; var bodyElem = tableBody.$el; var leftElem = leftBody ? leftBody.$el : null; var rightElem = rightBody ? rightBody.$el : null; var remainSize = this.isPrevWheelTop === isTopWheel ? Math.max(0, this.wheelYSize - this.wheelYTotal) : 0; var bodyYElem = elemStore['main-body-ySpace']; var bodyXElem = elemStore['main-body-xSpace']; var bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight; var bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth; this.isPrevWheelTop = isTopWheel; this.wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize); this.wheelYInterval = 0; this.wheelYTotal = 0; clearTimeout(this.wheelTime); var handleSmooth = function handleSmooth() { var fixedType = _this.fixedType, wheelYTotal = _this.wheelYTotal, wheelYSize = _this.wheelYSize, wheelYInterval = _this.wheelYInterval; if (wheelYTotal < wheelYSize) { 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 targetTop = scrollTop + wheelYInterval * (isTopWheel ? -1 : 1); bodyElem.scrollTop = targetTop; if (leftElem) { leftElem.scrollTop = targetTop; } if (rightElem) { rightElem.scrollTop = targetTop; } if (isTopWheel ? targetTop < scrollHeight - clientHeight : targetTop >= 0) { _this.wheelTime = setTimeout(handleSmooth, 10); } _this.wheelYTotal = wheelYTotal; _this.wheelYInterval = wheelYInterval; $xetable.emitEvent('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(); }, /** * 滚轮处理 */ wheelEvent: function wheelEvent(evnt) { var deltaY = evnt.deltaY, deltaX = evnt.deltaX; var scrollBodyElem = this.$el, $xetable = this.$parent; var $refs = $xetable.$refs, highlightHoverRow = $xetable.highlightHoverRow, scrollYLoad = $xetable.scrollYLoad, lastScrollTop = $xetable.lastScrollTop, lastScrollLeft = $xetable.lastScrollLeft, rowOpts = $xetable.rowOpts; var tableBody = $refs.tableBody; 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(); $xetable.lastScrollTop = scrollTop; $xetable.lastScrollLeft = scrollLeft; $xetable.lastScrollTime = Date.now(); if (rowOpts.isHover || highlightHoverRow) { $xetable.clearHoverRow(); } this.handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY); if (scrollYLoad) { $xetable.triggerScrollYEvent(evnt); } } } } }; exports["default"] = _default;