vxe-table 4.7.65 → 4.7.67

package/es/table/render/index.js

@@ -364,13 +364,13 @@ function oldFilterRender(renderOpts, params) {
 }
 function handleFilterMethod({ option, row, column }) {
     const { data } = option;
-    const cellValue = XEUtils.get(row, column.property);
+    const cellValue = XEUtils.get(row, column.field);
     /* eslint-disable eqeqeq */
     return cellValue == data;
 }
 function handleInputFilterMethod({ option, row, column }) {
     const { data } = option;
-    const cellValue = XEUtils.get(row, column.property);
+    const cellValue = XEUtils.get(row, column.field);
     /* eslint-disable eqeqeq */
     return XEUtils.toValueString(cellValue).indexOf(data) > -1;
 }
@@ -409,7 +409,7 @@ function oldSelectEditRender(renderOpts, params) {
 }
 function getSelectCellValue(renderOpts, { row, column }) {
     const { options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts;
-    const cellValue = XEUtils.get(row, column.property);
+    const cellValue = XEUtils.get(row, column.field);
     let selectItem;
     const labelProp = optionProps.label || 'label';
     const valueProp = optionProps.value || 'value';
@@ -440,7 +440,7 @@ function handleExportSelectMethod(params) {
 }
 function getTreeSelectCellValue(renderOpts, { row, column }) {
     const { options, optionProps = {} } = renderOpts;
-    const cellValue = XEUtils.get(row, column.property);
+    const cellValue = XEUtils.get(row, column.field);
     const labelProp = optionProps.label || 'label';
     const valueProp = optionProps.value || 'value';
     const childrenProp = optionProps.children || 'children';
@@ -465,40 +465,40 @@ function handleExportTreeSelectMethod(params) {
  */
 renderer.mixin({
     input: {
-        autofocus: 'input',
-        renderEdit: nativeEditRender,
-        renderDefault: nativeEditRender,
-        renderFilter: nativeFilterRender,
-        defaultFilterMethod: handleInputFilterMethod
+        tableAutoFocus: 'input',
+        renderTableEdit: nativeEditRender,
+        renderTableDefault: nativeEditRender,
+        renderTableFilter: nativeFilterRender,
+        tableFilterDefaultMethod: handleInputFilterMethod
     },
     textarea: {
-        autofocus: 'textarea',
-        renderEdit: nativeEditRender
+        tableAutoFocus: 'textarea',
+        renderTableEdit: nativeEditRender
     },
     select: {
-        renderEdit: nativeSelectEditRender,
-        renderDefault: nativeSelectEditRender,
-        renderCell(renderOpts, params) {
+        renderTableEdit: nativeSelectEditRender,
+        renderTableDefault: nativeSelectEditRender,
+        renderTableCell(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
         },
-        renderFilter(renderOpts, params) {
+        renderTableFilter(renderOpts, params) {
             const { column } = params;
             return column.filters.map((option, oIndex) => {
                 return h('select', Object.assign(Object.assign({ key: oIndex, class: 'vxe-default-select' }, getNativeAttrs(renderOpts)), getNativeFilterOns(renderOpts, params, option)), renderOpts.optionGroups ? renderNativeOptgroups(renderOpts, params, renderNativeOptions) : renderNativeOptions(renderOpts.options, renderOpts, params));
             });
         },
-        defaultFilterMethod: handleFilterMethod,
-        exportMethod: handleExportSelectMethod
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
     },
     VxeInput: {
-        autofocus: 'input',
-        renderEdit: defaultEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultEditRender,
+        renderTableCell(renderOpts, params) {
             var _a;
             const { props = {} } = renderOpts;
             const { row, column } = params;
             const digits = props.digits || ((_a = getConfig().input) === null || _a === void 0 ? void 0 : _a.digits) || 2;
-            let cellValue = XEUtils.get(row, column.property);
+            let cellValue = XEUtils.get(row, column.field);
             if (cellValue) {
                 switch (props.type) {
                     case 'date':
@@ -515,19 +515,19 @@ renderer.mixin({
             }
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
-        renderDefault: defaultEditRender,
-        renderFilter: defaultFilterRender,
-        defaultFilterMethod: handleInputFilterMethod
+        renderTableDefault: defaultEditRender,
+        renderTableFilter: defaultFilterRender,
+        tableFilterDefaultMethod: handleInputFilterMethod
     },
     VxeNumberInput: {
-        autofocus: 'input',
-        renderEdit: defaultEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultEditRender,
+        renderTableCell(renderOpts, params) {
             var _a;
             const { props = {} } = renderOpts;
             const { row, column } = params;
             const digits = props.digits || ((_a = getConfig().numberInput) === null || _a === void 0 ? void 0 : _a.digits) || 2;
-            let cellValue = XEUtils.get(row, column.property);
+            let cellValue = XEUtils.get(row, column.field);
             if (cellValue) {
                 switch (props.type) {
                     case 'float':
@@ -537,17 +537,17 @@ renderer.mixin({
             }
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
-        renderDefault: defaultEditRender,
-        renderFilter: defaultFilterRender,
-        defaultFilterMethod: handleInputFilterMethod
+        renderTableDefault: defaultEditRender,
+        renderTableFilter: defaultFilterRender,
+        tableFilterDefaultMethod: handleInputFilterMethod
     },
     VxeDatePicker: {
-        autofocus: 'input',
-        renderEdit: defaultEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultEditRender,
+        renderTableCell(renderOpts, params) {
             const { props = {} } = renderOpts;
             const { row, column } = params;
-            let cellValue = XEUtils.get(row, column.property);
+            let cellValue = XEUtils.get(row, column.field);
             if (cellValue) {
                 switch (props.type) {
                     case 'date':
@@ -561,18 +561,18 @@ renderer.mixin({
             }
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
-        renderDefault: defaultEditRender,
-        renderFilter: defaultFilterRender,
-        defaultFilterMethod: handleFilterMethod
+        renderTableDefault: defaultEditRender,
+        renderTableFilter: defaultFilterRender,
+        tableFilterDefaultMethod: handleFilterMethod
     },
     VxeTextarea: {
-        autofocus: 'VxeTextarea'
+        tableAutoFocus: 'VxeTextarea'
     },
     VxeButton: {
-        renderDefault: buttonCellRender
+        renderTableDefault: buttonCellRender
     },
     VxeButtonGroup: {
-        renderDefault(renderOpts, params) {
+        renderTableDefault(renderOpts, params) {
             const { options } = renderOpts;
             return [
                 h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ options }, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
@@ -580,13 +580,13 @@ renderer.mixin({
         }
     },
     VxeSelect: {
-        autofocus: 'input',
-        renderEdit: defaultSelectEditRender,
-        renderDefault: defaultSelectEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultSelectEditRender,
+        renderTableDefault: defaultSelectEditRender,
+        renderTableCell(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
         },
-        renderFilter(renderOpts, params) {
+        renderTableFilter(renderOpts, params) {
             const { column } = params;
             const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
             return column.filters.map((option, oIndex) => {
@@ -594,35 +594,46 @@ renderer.mixin({
                 return h(getDefaultComponent(renderOpts), Object.assign(Object.assign({ key: oIndex }, getCellEditFilterProps(renderOpts, params, optionValue, { options, optionProps, optionGroups, optionGroupProps })), getFilterOns(renderOpts, params, option)));
             });
         },
-        defaultFilterMethod: handleFilterMethod,
-        exportMethod: handleExportSelectMethod
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
     },
     VxeTreeSelect: {
-        autofocus: 'input',
-        renderEdit: defaultTreeSelectEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultTreeSelectEditRender,
+        renderTableCell(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params));
         },
-        exportMethod: handleExportTreeSelectMethod
+        tableExportMethod: handleExportTreeSelectMethod
+    },
+    VxeIconPicker: {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultEditRender,
+        renderTableCell(renderOpts, params) {
+            const { row, column } = params;
+            const cellValue = XEUtils.get(row, column.field);
+            return h('i', {
+                class: cellValue
+            });
+        }
     },
     VxeRadioGroup: {
-        renderDefault: radioAndCheckboxEditRender
+        renderTableDefault: radioAndCheckboxEditRender
     },
     VxeCheckboxGroup: {
-        renderDefault: radioAndCheckboxEditRender
+        renderTableDefault: radioAndCheckboxEditRender
     },
     VxeSwitch: {
-        autofocus: 'button',
-        renderEdit: defaultEditRender,
-        renderDefault: defaultEditRender
+        tableAutoFocus: 'button',
+        renderTableEdit: defaultEditRender,
+        renderTableDefault: defaultEditRender
     },
     VxeUpload: {
-        renderEdit: defaultEditRender,
-        renderCell: defaultEditRender,
-        renderDefault: defaultEditRender
+        renderTableEdit: defaultEditRender,
+        renderTableCell: defaultEditRender,
+        renderTableDefault: defaultEditRender
     },
     VxeImage: {
-        renderDefault(renderOpts, params) {
+        renderTableDefault(renderOpts, params) {
             const { row, column } = params;
             const { props } = renderOpts;
             const cellValue = getCellValue(row, column);
@@ -632,7 +643,7 @@ renderer.mixin({
         }
     },
     VxeImageGroup: {
-        renderDefault(renderOpts, params) {
+        renderTableDefault(renderOpts, params) {
             const { row, column } = params;
             const { props } = renderOpts;
             const cellValue = getCellValue(row, column);
@@ -643,14 +654,14 @@ renderer.mixin({
     },
     // 以下已废弃
     $input: {
-        autofocus: '.vxe-input--inner',
-        renderEdit: oldEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: '.vxe-input--inner',
+        renderTableEdit: oldEditRender,
+        renderTableCell(renderOpts, params) {
             var _a;
             const { props = {} } = renderOpts;
             const { row, column } = params;
             const digits = props.digits || ((_a = getConfig().input) === null || _a === void 0 ? void 0 : _a.digits) || 2;
-            let cellValue = XEUtils.get(row, column.property);
+            let cellValue = XEUtils.get(row, column.field);
             if (cellValue) {
                 switch (props.type) {
                     case 'date':
@@ -666,27 +677,27 @@ renderer.mixin({
             }
             return getCellLabelVNs(renderOpts, params, cellValue);
         },
-        renderDefault: oldEditRender,
-        renderFilter: oldFilterRender,
-        defaultFilterMethod: handleInputFilterMethod
+        renderTableDefault: oldEditRender,
+        renderTableFilter: oldFilterRender,
+        tableFilterDefaultMethod: handleInputFilterMethod
     },
     $textarea: {
-        autofocus: '.vxe-textarea--inner'
+        tableAutoFocus: '.vxe-textarea--inner'
     },
     $button: {
-        renderDefault: oldButtonEditRender
+        renderTableDefault: oldButtonEditRender
     },
     $buttons: {
-        renderDefault: oldButtonsEditRender
+        renderTableDefault: oldButtonsEditRender
     },
     $select: {
-        autofocus: '.vxe-input--inner',
-        renderEdit: oldSelectEditRender,
-        renderDefault: oldSelectEditRender,
-        renderCell(renderOpts, params) {
+        tableAutoFocus: '.vxe-input--inner',
+        renderTableEdit: oldSelectEditRender,
+        renderTableDefault: oldSelectEditRender,
+        renderTableCell(renderOpts, params) {
             return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params));
         },
-        renderFilter(renderOpts, params) {
+        renderTableFilter(renderOpts, params) {
             const { column } = params;
             const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
             return column.filters.map((option, oIndex) => {
@@ -694,19 +705,19 @@ renderer.mixin({
                 return h(getOldComponent(renderOpts), Object.assign(Object.assign({ key: oIndex }, getCellEditFilterProps(renderOpts, params, optionValue, { options, optionProps, optionGroups, optionGroupProps })), getFilterOns(renderOpts, params, option)));
             });
         },
-        defaultFilterMethod: handleFilterMethod,
-        exportMethod: handleExportSelectMethod
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
     },
     $radio: {
-        autofocus: '.vxe-radio--input'
+        tableAutoFocus: '.vxe-radio--input'
     },
     $checkbox: {
-        autofocus: '.vxe-checkbox--input'
+        tableAutoFocus: '.vxe-checkbox--input'
     },
     $switch: {
-        autofocus: '.vxe-switch--button',
-        renderEdit: oldEditRender,
-        renderDefault: oldEditRender
+        tableAutoFocus: '.vxe-switch--button',
+        renderTableEdit: oldEditRender,
+        renderTableDefault: oldEditRender
     }
     // 以上已废弃
 });

package/es/table/src/table.js

@@ -30,6 +30,7 @@ export default defineComponent({
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
+        const $xeTabs = inject('$xeTabs', null);
         const { computeSize } = useFns.useSize(props);
         const reactData = reactive({
             isCalcColumn: false,
@@ -3188,6 +3189,11 @@ export default defineComponent({
                 const fullColumnFieldData = internalData.fullColumnFieldData;
                 return field && fullColumnFieldData[field] ? fullColumnFieldData[field].column : null;
             },
+            getParentColumn(fieldOrColumn) {
+                const fullColumnIdData = internalData.fullColumnIdData;
+                const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+                return column && column.parentId && fullColumnIdData[column.parentId] ? fullColumnIdData[column.parentId].column : null;
+            },
             /**
              * 获取当前表格的列
              * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列
@@ -3470,10 +3476,14 @@ export default defineComponent({
              * 计算单元格列宽，动态分配可用剩余空间
              * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
              */
-            recalculate(refull) {
+            recalculate(reFull) {
+                const el = refElem.value;
+                if (!el || !el.clientWidth) {
+                    return nextTick();
+                }
                 calcCellWidth();
                 autoCellWidth();
-                if (refull === true) {
+                if (reFull === true) {
                     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
                     return computeScrollLoad().then(() => {
                         autoCellWidth();
@@ -4907,6 +4917,7 @@ export default defineComponent({
                     const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
                     const operCtxMenu = isMenu && ctxMenuStore.visible && (isEnter || isSpacebar || operArrow);
                     const isEditStatus = isEnableConf(editConfig) && actived.column && actived.row;
+                    const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
                     let params;
                     if (operCtxMenu) {
                         // 如果配置了右键菜单; 支持方向键操作、回车
@@ -5051,20 +5062,23 @@ export default defineComponent({
                                 columnIndex: tableMethods.getColumnIndex(selected.column),
                                 $table: $xeTable
                             };
-                            if (delMethod) {
-                                delMethod(delPaqrams);
-                            }
-                            else {
-                                setCellValue(selected.row, selected.column, null);
+                            // 是否被禁用
+                            if (!beforeEditMethod || beforeEditMethod(params)) {
+                                if (delMethod) {
+                                    delMethod(delPaqrams);
+                                }
+                                else {
+                                    setCellValue(selected.row, selected.column, null);
+                                }
+                                // 如果按下 del 键，更新表尾数据
+                                tableMethods.updateFooter();
+                                $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt);
                             }
-                            // 如果按下 del 键，更新表尾数据
-                            tableMethods.updateFooter();
-                            $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt);
                         }
                     }
                     else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
                         if (!isEditStatus) {
-                            const { delMethod, backMethod } = keyboardOpts;
+                            const { backMethod } = keyboardOpts;
                             // 如果是删除键
                             if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selected.column)) {
                                 const delPaqrams = {
@@ -5074,25 +5088,23 @@ export default defineComponent({
                                     columnIndex: tableMethods.getColumnIndex(selected.column),
                                     $table: $xeTable
                                 };
-                                if (delMethod) {
-                                    delMethod(delPaqrams);
-                                }
-                                else {
-                                    setCellValue(selected.row, selected.column, null);
-                                }
-                                if (backMethod) {
-                                    backMethod({
-                                        row: selected.row,
-                                        rowIndex: tableMethods.getRowIndex(selected.row),
-                                        column: selected.column,
-                                        columnIndex: tableMethods.getColumnIndex(selected.column),
-                                        $table: $xeTable
-                                    });
-                                }
-                                else {
-                                    $xeTable.handleActived(selected.args, evnt);
+                                // 是否被禁用
+                                if (!beforeEditMethod || beforeEditMethod(params)) {
+                                    if (backMethod) {
+                                        backMethod({
+                                            row: selected.row,
+                                            rowIndex: tableMethods.getRowIndex(selected.row),
+                                            column: selected.column,
+                                            columnIndex: tableMethods.getColumnIndex(selected.column),
+                                            $table: $xeTable
+                                        });
+                                    }
+                                    else {
+                                        setCellValue(selected.row, selected.column, null);
+                                        $xeTable.handleActived(selected.args, evnt);
+                                    }
+                                    $xeTable.dispatchEvent('cell-backspace-value', delPaqrams, evnt);
                                 }
-                                $xeTable.dispatchEvent('cell-backspace-value', delPaqrams, evnt);
                             }
                         }
                     }
@@ -5208,6 +5220,10 @@ export default defineComponent({
             if ($xeTable.closeMenu) {
                 $xeTable.closeMenu();
             }
+            const el = refElem.value;
+            if (!el || !el.clientWidth) {
+                return nextTick();
+            }
             tableMethods.updateCellAreas();
             tableMethods.recalculate(true);
         };
@@ -6657,6 +6673,11 @@ export default defineComponent({
                 }
             });
         });
+        if ($xeTabs) {
+            watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => {
+                handleGlobalResizeEvent();
+            });
+        }
         hooks.forEach((options) => {
             const { setupTable } = options;
             if (setupTable) {
@@ -6928,6 +6949,7 @@ export default defineComponent({
                         'is--virtual-x': scrollXLoad,
                         'is--virtual-y': scrollYLoad
                     }],
+                spellcheck: false,
                 onKeydown: keydownEvent
             }, [
                 /**

package/es/table/style.css

@@ -1734,13 +1734,14 @@
   resize: none;
   vertical-align: middle;
 }
-.vxe-cell > .vxe-input, .vxe-cell > .vxe-textarea, .vxe-cell > .vxe-select, .vxe-cell > .vxe-tree-select, .vxe-cell > .vxe-date-picker, .vxe-cell > .vxe-number-input,
+.vxe-cell > .vxe-input, .vxe-cell > .vxe-textarea, .vxe-cell > .vxe-select, .vxe-cell > .vxe-tree-select, .vxe-cell > .vxe-date-picker, .vxe-cell > .vxe-number-input, .vxe-cell > .vxe-ico-picker,
 .vxe-table--filter-template > .vxe-input,
 .vxe-table--filter-template > .vxe-textarea,
 .vxe-table--filter-template > .vxe-select,
 .vxe-table--filter-template > .vxe-tree-select,
 .vxe-table--filter-template > .vxe-date-picker,
-.vxe-table--filter-template > .vxe-number-input {
+.vxe-table--filter-template > .vxe-number-input,
+.vxe-table--filter-template > .vxe-ico-picker {
   width: 100%;
 }
 .vxe-cell > .vxe-input > .vxe-input--inner, .vxe-cell > .vxe-textarea > .vxe-textarea--inner,
@@ -1759,12 +1760,14 @@
 .vxe-cell > .vxe-cell--tree-node .vxe-tree-select,
 .vxe-cell > .vxe-cell--tree-node .vxe-date-picker,
 .vxe-cell > .vxe-cell--tree-node .vxe-number-input,
+.vxe-cell > .vxe-cell--tree-node .vxe-ico-picker,
 .vxe-table--filter-template > .vxe-cell--tree-node .vxe-input,
 .vxe-table--filter-template > .vxe-cell--tree-node .vxe-textarea,
 .vxe-table--filter-template > .vxe-cell--tree-node .vxe-select,
 .vxe-table--filter-template > .vxe-cell--tree-node .vxe-tree-select,
 .vxe-table--filter-template > .vxe-cell--tree-node .vxe-date-picker,
-.vxe-table--filter-template > .vxe-cell--tree-node .vxe-number-input {
+.vxe-table--filter-template > .vxe-cell--tree-node .vxe-number-input,
+.vxe-table--filter-template > .vxe-cell--tree-node .vxe-ico-picker {
   width: 100%;
 }
 .vxe-cell > .vxe-cell--tree-node .vxe-input > .vxe-input--inner,
@@ -2660,7 +2663,8 @@
 .vxe-table--render-default .vxe-body--column.col--valid-error .vxe-default-select {
   border-color: var(--vxe-ui-table-validate-error-color);
 }
-.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-input {
+.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-input,
+.vxe-table--render-default .vxe-body--column.col--valid-error .vxe-ico-picker {
   border-color: var(--vxe-ui-table-validate-error-color);
 }
 .vxe-table--render-default.valid-msg--single .vxe-body--row:last-child .vxe-cell--valid-error-hint {