vxe-table 3.22.12 → 3.23.0-beta.1

package/es/table/module/edit/mixin.js

@@ -387,6 +387,7 @@ function handleEditActive($xeTable, params, evnt, options) {
     const props = $xeTable;
     const reactData = $xeTable;
     const $xeGrid = $xeTable.$xeGrid;
+    const $xeGantt = $xeTable.$xeGantt;
     const { editConfig, mouseConfig } = props;
     const { editStore, tableColumn } = reactData;
     const editOpts = $xeTable.computeEditOpts;
@@ -397,14 +398,14 @@ function handleEditActive($xeTable, params, evnt, options) {
     const { isFocus, isPos, isClear } = options;
     const cell = (params.cell || $xeTable.getCellElement(row, column));
     const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
-    params.cell = cell;
+    const editParams = Object.assign(Object.assign({}, params), { cell });
     if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
         // 激活编辑
         if (!$xeTable.isPendingByRow(row) && !$xeTable.isAggregateRecord(row)) {
             if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
                 // 判断是否禁用编辑
                 let type = 'edit-disabled';
-                if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }))) {
+                if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, editParams), { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }))) {
                     if (mouseConfig) {
                         $xeTable.clearSelected();
                         if ($xeTable.clearCellAreas) {
@@ -418,7 +419,7 @@ function handleEditActive($xeTable, params, evnt, options) {
                     }
                     type = 'edit-activated';
                     column.renderHeight = cell.offsetHeight;
-                    actived.args = params;
+                    actived.args = editParams;
                     actived.row = row;
                     actived.column = column;
                     $xeTable.handlePushStack();
@@ -434,10 +435,10 @@ function handleEditActive($xeTable, params, evnt, options) {
                     const afterEditMethod = editOpts.afterEditMethod;
                     $xeTable.$nextTick(() => {
                         if (isFocus) {
-                            $xeTable.handleFocus(params, evnt);
+                            $xeTable.handleFocus(editParams, evnt);
                         }
                         if (afterEditMethod) {
-                            afterEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }));
+                            afterEditMethod(Object.assign(Object.assign({}, editParams), { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }));
                         }
                     });
                 }
@@ -480,11 +481,11 @@ function handleEditActive($xeTable, params, evnt, options) {
                     }
                 }
                 column.renderHeight = cell.offsetHeight;
-                actived.args = params;
+                actived.args = editParams;
                 actived.column = column;
                 if (isPos) {
                     setTimeout(() => {
-                        $xeTable.handleFocus(params, evnt);
+                        $xeTable.handleFocus(editParams, evnt);
                     });
                 }
             }
@@ -508,8 +509,12 @@ function handleEditCell($xeTable, row, fieldOrColumn, options) {
                 handleEditActive($xeTable, {
                     row,
                     rowIndex: $xeTable.getRowIndex(row),
+                    $rowIndex: $xeTable.getVMRowIndex(row),
+                    _rowIndex: $xeTable.getVTRowIndex(row),
                     column,
                     columnIndex: $xeTable.getColumnIndex(column),
+                    $columnIndex: $xeTable.getVMColumnIndex(column),
+                    _columnIndex: $xeTable.getVTColumnIndex(column),
                     cell,
                     $table: $xeTable
                 }, null, options);
@@ -912,31 +917,29 @@ export default {
             const { editStore } = reactData;
             return editStore.actived.row === row;
         },
-        /**
-         * 处理聚焦
-         */
-        handleFocus(params) {
+        handleCellFocus(cell, params) {
             const $xeTable = this;
-            const { row, column, cell } = params;
+            const props = $xeTable;
+            const { editConfig } = props;
+            const { column } = params;
             const { editRender } = column;
             const editOpts = $xeTable.computeEditOpts;
-            if (isEnableConf(editRender)) {
-                const browseObj = XEUtils.browse();
+            if (editConfig && isEnableConf(editRender)) {
                 const compRender = renderer.get(editRender.name);
                 let autoFocus = editRender.autofocus || editRender.autoFocus;
                 let autoSelect = editRender.autoSelect || editRender.autoselect;
-                let inputElem;
+                let inputElem = null;
                 // 是否启用聚焦
                 if (editOpts.autoFocus) {
                     if (!autoFocus && compRender) {
-                        autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autoFocus || compRender.autofocus;
+                        autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus;
                     }
                     if (!autoSelect && compRender) {
-                        autoSelect = compRender.tableAutoSelect || compRender.autoSelect || compRender.autoselect;
+                        autoSelect = compRender.tableAutoSelect || compRender.autoselect;
                     }
                     // 如果指定了聚焦 class
                     if (XEUtils.isFunction(autoFocus)) {
-                        inputElem = autoFocus.call($xeTable, params);
+                        inputElem = autoFocus(params);
                     }
                     else if (autoFocus) {
                         if (autoFocus === true) {
@@ -951,6 +954,22 @@ export default {
                         }
                     }
                 }
+                return inputElem;
+            }
+            return null;
+        },
+        /**
+         * 处理聚焦
+         */
+        handleFocus(params) {
+            const $xeTable = this;
+            const { row, column, cell } = params;
+            const { editRender } = column;
+            const editOpts = $xeTable.computeEditOpts;
+            if (isEnableConf(editRender)) {
+                const browseObj = XEUtils.browse();
+                const autoSelect = editRender.autoSelect || editRender.autoselect;
+                const inputElem = $xeTable.handleCellFocus(cell, params);
                 if (inputElem) {
                     if (autoSelect) {
                         inputElem.select();
@@ -1031,13 +1050,18 @@ export default {
                 if (rowIndex > -1) {
                     const cell = $xeTable.getCellElement(row, column);
                     const params = {
+                        $table: $xeTable,
                         row,
                         rowIndex,
+                        $rowIndex: $xeTable.getVMRowIndex(row),
+                        _rowIndex: $xeTable.getVTRowIndex(row),
                         column,
                         columnIndex: $xeTable.getColumnIndex(column),
+                        $columnIndex: $xeTable.getVMColumnIndex(column),
+                        _columnIndex: $xeTable.getVTColumnIndex(column),
                         cell
                     };
-                    $xeTable.handleSelected(params, {});
+                    $xeTable.handleSelected(params, null);
                 }
             }
             return $xeTable.$nextTick();
@@ -1049,7 +1073,7 @@ export default {
             const $xeTable = this;
             const props = $xeTable;
             const reactData = $xeTable;
-            const { mouseConfig } = props;
+            const { mouseConfig, editConfig } = props;
             const { editStore } = reactData;
             const mouseOpts = $xeTable.computeMouseOpts;
             const editOpts = $xeTable.computeEditOpts;
@@ -1072,6 +1096,19 @@ export default {
                             $xeTable.addCellSelectedClass();
                         }
                         $xeTable.focus();
+                        // 如果是支持可复用控件
+                        if (editConfig && editOpts.isReuseKeep && isEnableConf(editOpts) && isEnableConf(column.editRender)) {
+                            setTimeout(() => {
+                                const cell = $xeTable.getCellElement(row, column);
+                                if (cell) {
+                                    const hasReusekeep = cell.querySelector('.vxe-reusekeep-control');
+                                    if (hasReusekeep) {
+                                        params.cell = cell;
+                                        $xeTable.handleCellFocus(cell, params);
+                                    }
+                                }
+                            }, 0);
+                        }
                         if (evnt) {
                             $xeTable.dispatchEvent('cell-selected', params, evnt);
                         }

package/es/table/module/keyboard/mixin.js

@@ -510,8 +510,8 @@ export default {
             const checkboxOpts = $xeTable.computeCheckboxOpts;
             const mouseOpts = $xeTable.computeMouseOpts;
             const editOpts = $xeTable.computeEditOpts;
-            if (mouseConfig && mouseOpts.area && $xeTable.triggerCelllAreaMnEvent) {
-                return $xeTable.triggerCelllAreaMnEvent(evnt, params);
+            if (mouseConfig && mouseOpts.area && $xeTable.triggerClAreaMnEvent) {
+                return $xeTable.triggerClAreaMnEvent(evnt, params);
             }
             else {
                 if (checkboxConfig && checkboxOpts.range) {

package/es/table/render/index.js

@@ -80,6 +80,7 @@ function getCellLabelVNs(h, renderOpts, params, cellLabel, opts) {
     const { placeholder } = renderOpts;
     return [
         h('span', {
+            key: 1,
             class: ['vxe-cell--label', opts ? opts.class : '']
         }, placeholder && isEmptyValue(cellLabel)
             ? [
@@ -345,22 +346,33 @@ function getNativeFilterOns(renderOpts, params, option) {
         }
     });
 }
+function nativeInputCellRender(h, renderOpts, renderParams) {
+    const { row, column } = renderParams;
+    const cellValue = XEUtils.get(row, column.field);
+    const cellVNs = [
+        h('span', {
+            key: 1
+        }, cellValue)
+    ];
+    return getNativeInputRenderCellVNs(h, cellValue, cellVNs, renderOpts, renderParams);
+}
 /**
  * 单元格可编辑渲染-原生的标签
- * input、textarea、select
+ * input、textarea
  */
-function nativeEditRender(h, renderOpts, params) {
-    const { row, column } = params;
+function nativeInputEditRender(h, renderOpts, renderParams) {
+    const { row, column } = renderParams;
     const { name } = renderOpts;
-    const cellValue = isImmediateCell(renderOpts, params) ? getCellValue(row, column) : column.model.value;
+    const cellValue = isImmediateCell(renderOpts, renderParams) ? getCellValue(row, column) : column.model.value;
     return [
-        h(`${name}`, {
+        h('' + name, {
+            key: 2,
             class: `vxe-default-${name}`,
             attrs: getNativeAttrs(renderOpts),
             domProps: {
                 value: cellValue
             },
-            on: getNativeEditOns(renderOpts, params)
+            on: getNativeEditOns(renderOpts, renderParams)
         })
     ];
 }
@@ -372,6 +384,17 @@ function buttonCellRender(h, renderOpts, params) {
         })
     ];
 }
+function defaultInputEditRender(h, renderOpts, params) {
+    const { row, column } = params;
+    const cellValue = getCellValue(row, column);
+    return [
+        h(getDefaultComponent(renderOpts), {
+            key: 2,
+            props: getCellEditProps(renderOpts, params, cellValue),
+            on: getEditOns(renderOpts, params)
+        })
+    ];
+}
 function defaultEditRender(h, renderOpts, params) {
     const { row, column } = params;
     const cellValue = getCellValue(row, column);
@@ -666,11 +689,9 @@ function handleExportTreeSelectMethod(params) {
     const { row, column, options } = params;
     return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params);
 }
-function handleNumberCell(h, renderOpts, params) {
+function handleNumberCell(h, cellValue, renderOpts, params) {
     const { props = {}, showNegativeStatus } = renderOpts;
-    const { row, column } = params;
     const { type } = props;
-    let cellValue = XEUtils.get(row, column.field);
     let isNegative = false;
     if (!isEmptyValue(cellValue)) {
         const numberInputConfig = getConfig().numberInput || {};
@@ -821,20 +842,90 @@ function handleSetTreeSelectValue(renderOpts, params) {
         XEUtils.set(row, field, cellValue);
     }
 }
+function getNativeInputRenderCellVNs(h, cellValue, labelVNs, renderOpts, renderParams) {
+    const { $table, row, column } = renderParams;
+    const { name } = renderOpts;
+    const tableProps = $table;
+    const { editConfig, mouseConfig } = tableProps;
+    let isColSelected = false;
+    let isActiveCellArea = false;
+    if (editConfig && mouseConfig) {
+        const tableReactData = $table;
+        const { editStore } = tableReactData;
+        const { selected } = editStore;
+        isColSelected = row === selected.row && column === selected.column;
+        if ($table.getActiveCellArea) {
+            const activeCellArea = $table.getActiveCellArea();
+            if (activeCellArea) {
+                isActiveCellArea = row === activeCellArea.row && column === activeCellArea.column;
+            }
+        }
+    }
+    const cellVNs = labelVNs;
+    if (isActiveCellArea || isColSelected) {
+        cellVNs.push(h('' + name, {
+            key: 2,
+            class: `vxe-default-${name} vxe-reusekeep-control`,
+            attrs: getNativeAttrs(renderOpts),
+            domProps: {
+                value: cellValue
+            },
+            on: getNativeEditOns(renderOpts, renderParams)
+        }));
+    }
+    return cellVNs;
+}
+function getInputRenderCellVNs(h, cellValue, labelVNs, renderOpts, renderParams) {
+    const { $table, row, column } = renderParams;
+    const tableProps = $table;
+    const { editConfig, mouseConfig } = tableProps;
+    let isColSelected = false;
+    let isActiveCellArea = false;
+    if (editConfig && mouseConfig) {
+        const tableReactData = $table;
+        const { editStore } = tableReactData;
+        const editOpts = $table.computeEditOpts;
+        if (editOpts.isReuseKeep) {
+            const { selected } = editStore;
+            isColSelected = row === selected.row && column === selected.column;
+            if ($table.getActiveCellArea) {
+                const activeCellArea = $table.getActiveCellArea();
+                if (activeCellArea) {
+                    isActiveCellArea = row === activeCellArea.row && column === activeCellArea.column;
+                }
+            }
+        }
+    }
+    const cellVNs = labelVNs;
+    if (isActiveCellArea || isColSelected) {
+        const compProps = getCellEditProps(renderOpts, renderParams, cellValue);
+        const { className, inputClassName } = compProps;
+        cellVNs.push(h(getDefaultComponent(renderOpts), {
+            key: 2,
+            props: Object.assign(Object.assign({}, compProps), { className: 'vxe-reusekeep-control' + (className ? (' ' + className) : ''), inputClassName: 'vxe-reusekeep-control' + (inputClassName ? (' ' + inputClassName) : '') }),
+            on: getEditOns(renderOpts, renderParams)
+        }));
+    }
+    return cellVNs;
+}
 /**
  * 表格 - 渲染器
  */
 renderer.mixin({
     input: {
         tableAutoFocus: true,
-        renderTableEdit: nativeEditRender,
-        renderTableDefault: nativeEditRender,
+        renderTableEdit: nativeInputEditRender,
+        renderTableCell: nativeInputCellRender,
+        renderTableDefault: nativeInputEditRender,
+        createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: nativeFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     textarea: {
         tableAutoFocus: true,
-        renderTableEdit: nativeEditRender
+        renderTableEdit: nativeInputEditRender,
+        renderTableCell: nativeInputCellRender,
+        renderTableDefault: nativeInputEditRender
     },
     select: {
         renderTableEdit: nativeSelectEditRender,
@@ -878,10 +969,10 @@ renderer.mixin({
     },
     VxeInput: {
         tableAutoFocus: true,
-        renderTableEdit: defaultEditRender,
-        renderTableCell(h, renderOpts, params) {
+        renderTableEdit: defaultInputEditRender,
+        renderTableCell(h, renderOpts, renderParams) {
             const { props = {} } = renderOpts;
-            const { row, column } = params;
+            const { row, column } = renderParams;
             const inputConfig = getConfig().input || {};
             const digits = props.digits || inputConfig.digits || 2;
             let cellValue = XEUtils.get(row, column.field);
@@ -899,16 +990,21 @@ renderer.mixin({
                         break;
                 }
             }
-            return getCellLabelVNs(h, renderOpts, params, cellValue);
+            const cellVNs = getCellLabelVNs(h, renderOpts, renderParams, cellValue);
+            return getInputRenderCellVNs(h, cellValue, cellVNs, renderOpts, renderParams);
         },
-        renderTableDefault: defaultEditRender,
+        renderTableDefault: defaultInputEditRender,
         createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,
         renderTableFloatingFilter: defaultFloatingFilterRender,
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     FormatNumberInput: {
-        renderTableDefault: handleNumberCell,
+        renderTableDefault(h, renderOpts, renderParams) {
+            const { row, column } = renderParams;
+            const cellValue = XEUtils.get(row, column.field);
+            return handleNumberCell(h, cellValue, renderOpts, renderParams);
+        },
         tableFilterDefaultMethod({ option, row, column }) {
             const { data } = option;
             const cellValue = XEUtils.get(row, column.field);
@@ -923,8 +1019,13 @@ renderer.mixin({
     },
     VxeNumberInput: {
         tableAutoFocus: true,
-        renderTableEdit: defaultEditRender,
-        renderTableCell: handleNumberCell,
+        renderTableEdit: defaultInputEditRender,
+        renderTableCell(h, renderOpts, renderParams) {
+            const { row, column } = renderParams;
+            const cellValue = XEUtils.get(row, column.field);
+            const cellVNs = handleNumberCell(h, cellValue, renderOpts, renderParams);
+            return getInputRenderCellVNs(h, cellValue, cellVNs, renderOpts, renderParams);
+        },
         renderTableFooter(h, renderOpts, params) {
             const { props = {} } = renderOpts;
             const { row, column, _columnIndex } = params;
@@ -962,7 +1063,7 @@ renderer.mixin({
             }
             return getFuncText(itemValue, 1);
         },
-        renderTableDefault: defaultEditRender,
+        renderTableDefault: defaultInputEditRender,
         createTableFilterOptions: defaultFilterOptions,
         renderTableFilter: defaultFilterRender,
         renderTableFloatingFilter: defaultFloatingFilterRender,
@@ -1112,8 +1213,14 @@ renderer.mixin({
     },
     VxeTextarea: {
         tableAutoFocus: true,
-        renderTableDefault: defaultEditRender,
-        renderTableEdit: defaultEditRender
+        renderTableDefault: defaultInputEditRender,
+        renderTableCell(h, renderOpts, renderParams) {
+            const { row, column } = renderParams;
+            const cellValue = XEUtils.get(row, column.field);
+            const cellVNs = getCellLabelVNs(h, renderOpts, renderParams, cellValue);
+            return getInputRenderCellVNs(h, cellValue, cellVNs, renderOpts, renderParams);
+        },
+        renderTableEdit: defaultInputEditRender
     },
     VxeButton: {
         renderTableDefault: buttonCellRender

package/es/table/src/cell.js

@@ -283,7 +283,11 @@ function renderHeaderHandle(h, params) {
     const { column, $table } = params;
     const tableProps = $table;
     const { editConfig } = tableProps;
-    const { type, filters, sortable, editRender } = column;
+    const { type, filters, sortable, editRender, slots } = column;
+    const headerSlot = slots ? slots.header : null;
+    if (headerSlot) {
+        return renderTitleContent(h, params, $table.callSlot(headerSlot, params, h));
+    }
     switch (type) {
         case 'seq':
             return Cell.renderSeqHeader(h, params);
@@ -342,11 +346,7 @@ export const Cell = {
         const { $table, column } = params;
         const tableProps = $table;
         const { editConfig } = tableProps;
-        const { slots, editRender, cellRender } = column;
-        const headerSlot = slots ? slots.header : null;
-        if (headerSlot) {
-            return renderTitleContent(h, params, $table.callSlot(headerSlot, params, h));
-        }
+        const { editRender, cellRender } = column;
         const isEnableEdit = editConfig && isEnableConf(editConfig);
         const editRenderOpts = isEnableEdit && isEnableConf(editRender) ? editRender : null;
         const cellRenderOpts = isEnableConf(cellRender) ? cellRender : null;
@@ -620,8 +620,7 @@ export const Cell = {
      */
     renderSeqHeader(h, params) {
         const { $table, column } = params;
-        const { slots } = column;
-        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : $table.getHeaderCellLabel(column)));
+        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, $table.getHeaderCellLabel(column)));
     },
     renderSeqCell(h, params) {
         const { $table, column } = params;
@@ -647,15 +646,12 @@ export const Cell = {
     renderRadioHeader(h, params) {
         const { $table, column } = params;
         const { slots } = column;
-        const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
-        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, headerSlot
-            ? $table.callSlot(headerSlot, params, h)
-            : [
-                h('span', {
-                    class: 'vxe-radio--label'
-                }, titleSlot ? $table.callSlot(titleSlot, params, h) : $table.getHeaderCellLabel(column))
-            ]));
+        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, [
+            h('span', {
+                class: 'vxe-radio--label'
+            }, titleSlot ? $table.callSlot(titleSlot, params, h) : $table.getHeaderCellLabel(column))
+        ]));
     },
     renderRadioCell(h, params) {
         const { $table, column, isHidden } = params;
@@ -720,7 +716,6 @@ export const Cell = {
         const { isAllSelected: isAllCheckboxSelected, isIndeterminate: isAllCheckboxIndeterminate } = tableReactData;
         const isAllCheckboxDisabled = $table.computeIsAllCheckboxDisabled;
         const { slots } = column;
-        const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
@@ -734,9 +729,6 @@ export const Cell = {
             };
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate });
-        if (headerSlot) {
-            return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)));
-        }
         if (checkStrictly ? !showHeader : showHeader === false) {
             return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
                 h('span', {