vxe-table 3.21.8 → 3.21.10

package/es/table/render/index.js

@@ -839,7 +839,24 @@ renderer.mixin({
         renderTableEdit: nativeSelectEditRender,
         renderTableDefault: nativeSelectEditRender,
         renderTableCell(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         renderTableFilter(h, renderOpts, params) {
             const { column } = params;
@@ -954,15 +971,20 @@ renderer.mixin({
         tableAutoFocus: 'input',
         renderTableEdit: defaultEditRender,
         renderTableCell(h, renderOpts, params) {
-            const { props = {} } = renderOpts;
-            const { row, column } = params;
-            let cellValue = XEUtils.get(row, column.field);
-            if (cellValue) {
-                if (props.type !== 'time') {
-                    cellValue = getLabelFormatDate(cellValue, props);
+            const props = renderOpts.props || {};
+            const { $table, row, column } = params;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                getResult({ cellValue }) {
+                    if (cellValue) {
+                        if (props.type !== 'time') {
+                            return getLabelFormatDate(cellValue, props);
+                        }
+                    }
+                    return cellValue;
                 }
-            }
-            return getCellLabelVNs(h, renderOpts, params, cellValue);
+            });
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         tableCellFormatter: handleFormatDatePicker,
         renderTableDefault: defaultEditRender,
@@ -1013,6 +1035,40 @@ renderer.mixin({
                 })
             ];
         },
+        renderTableDefault(h, renderOpts, params) {
+            const { startField, endField } = renderOpts;
+            const { row, column } = params;
+            const { model } = column;
+            const cellValue = getCellValue(row, column);
+            const seProps = {};
+            const seOs = {};
+            if (startField && endField) {
+                seProps.startValue = XEUtils.get(row, startField);
+                seProps.endValue = XEUtils.get(row, endField);
+                seOs['update:startValue'] = (value) => {
+                    if (startField) {
+                        XEUtils.set(row, startField, value);
+                    }
+                };
+                seOs['update:endValue'] = (value) => {
+                    if (endField) {
+                        XEUtils.set(row, endField, value);
+                    }
+                };
+            }
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: getCellEditProps(renderOpts, params, cellValue, seProps),
+                    on: getComponentOns(renderOpts, params, {
+                        model(cellValue) {
+                            model.update = true;
+                            model.value = cellValue;
+                            setCellValue(row, column, cellValue);
+                        }
+                    }, seOs)
+                })
+            ];
+        },
         renderTableCell(h, renderOpts, params) {
             const { startField, endField } = renderOpts;
             const { row, column } = params;
@@ -1045,6 +1101,7 @@ renderer.mixin({
     },
     VxeTextarea: {
         tableAutoFocus: 'textarea',
+        renderTableDefault: defaultEditRender,
         renderTableEdit: defaultEditRender
     },
     VxeButton: {
@@ -1066,7 +1123,24 @@ renderer.mixin({
         renderTableEdit: defaultSelectEditRender,
         renderTableDefault: defaultSelectEditRender,
         renderTableCell(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         createTableFilterOptions: defaultFilterOptions,
         renderTableFilter(h, renderOpts, params) {
@@ -1134,7 +1208,24 @@ renderer.mixin({
     },
     FormatSelect: {
         renderTableDefault(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         tableCellFormatter: handleFormatSelect,
         tableCellCopyMethod: handleFormatSelect,
@@ -1146,18 +1237,24 @@ renderer.mixin({
         tableAutoFocus: 'input',
         renderTableEdit: defaultTableOrTreeSelectEditRender,
         renderTableCell(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
-        },
-        tableCellFormatter: handleFormatTreeSelect,
-        tableCellCopyMethod: handleFormatTreeSelect,
-        tableCellPasteMethod: handleSetTreeSelectValue,
-        tableExportMethod: handleExportTreeSelectMethod
-    },
-    VxeTableSelect: {
-        tableAutoFocus: 'input',
-        renderTableEdit: defaultTableOrTreeSelectEditRender,
-        renderTableCell(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleTreeSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getTreeSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         tableCellFormatter: handleFormatTreeSelect,
         tableCellCopyMethod: handleFormatTreeSelect,
@@ -1175,7 +1272,52 @@ renderer.mixin({
     },
     FormatTreeSelect: {
         renderTableDefault(h, renderOpts, params) {
-            return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleTreeSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getTreeSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
+        },
+        tableCellFormatter: handleFormatTreeSelect,
+        tableCellCopyMethod: handleFormatTreeSelect,
+        tableCellPasteMethod: handleSetTreeSelectValue,
+        tableExportMethod: handleExportTreeSelectMethod
+    },
+    VxeTableSelect: {
+        tableAutoFocus: 'input',
+        renderTableEdit: defaultTableOrTreeSelectEditRender,
+        renderTableCell(h, renderOpts, params) {
+            const { options, optionGroups } = renderOpts;
+            const { $table, row, column } = params;
+            const opSize = options ? options.length : null;
+            const ogSize = optionGroups ? optionGroups.length : null;
+            const { cellResult } = $table.effectCellData(row, column, {
+                key: 'render_table_cell',
+                isChanged({ oldValue, cellValue }) {
+                    return oldValue && oldValue[0] === cellValue && oldValue[1] === opSize && oldValue[2] === ogSize;
+                },
+                setValue({ cellValue }) {
+                    return [cellValue, opSize, ogSize];
+                },
+                getResult({ cellValue }) {
+                    return handleTreeSelectCellValue(cellValue, renderOpts);
+                }
+            });
+            // const cellResult = getTreeSelectCellValue(renderOpts, params)
+            return getCellLabelVNs(h, renderOpts, params, cellResult);
         },
         tableCellFormatter: handleFormatTreeSelect,
         tableCellCopyMethod: handleFormatTreeSelect,

package/es/table/src/body.js

@@ -330,11 +330,23 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                 class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
             }, column.renderCell(h, cellParams)));
         }
+        tdVNs.push(h('div', {
+            key: 'tc',
+            class: ['vxe-cell', {
+                    'c--title': showTitle,
+                    'c--tooltip': showTooltip,
+                    'c--ellipsis': showEllipsis
+                }],
+            style: tcStyle,
+            attrs: {
+                title: showTitle ? $xeTable.getCellLabel(row, column) : null
+            }
+        }, clVNs));
         if (showValidTip && errorValidItem) {
             const errRule = errorValidItem.rule;
             const validSlot = slots ? slots.valid : null;
             const validParams = Object.assign(Object.assign(Object.assign({}, cellParams), errorValidItem), { rule: errorValidItem });
-            clVNs.push(h('div', {
+            tdVNs.push(h('div', {
                 key: 'tcv',
                 class: ['vxe-cell--valid-error-tip', getClass(validOpts.className, errorValidItem)],
                 style: errRule && errRule.maxWidth
@@ -356,18 +368,6 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                 ])
             ]));
         }
-        tdVNs.push(h('div', {
-            key: 'tc',
-            class: ['vxe-cell', {
-                    'c--title': showTitle,
-                    'c--tooltip': showTooltip,
-                    'c--ellipsis': showEllipsis
-                }],
-            style: tcStyle,
-            attrs: {
-                title: showTitle ? $xeTable.getCellLabel(row, column) : null
-            }
-        }, clVNs));
     }
     let showAreaRowStatus = false;
     if (mouseConfig && mouseOpts.area && !_columnIndex && selectCellToRow) {

package/es/table/src/methods.js

@@ -3454,6 +3454,7 @@ function loadTableData($xeTable, datas, isReload, isReset) {
     internalData.removeRowMaps = {};
     reactData.removeRowFlag++;
     internalData.fullCellHeightMaps = {};
+    internalData.fullCellStoreMaps = {};
     const sYLoad = updateScrollYStatus($xeTable, fullData);
     // 全量数据
     internalData.tableFullData = fullData;
@@ -5334,6 +5335,58 @@ const tableMethods = {
         }
         return $xeTable.$nextTick();
     },
+    effectCellData(row, column, options) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { fullCellStoreMaps } = internalData;
+        const editOpts = $xeTable.computeEditOpts;
+        const { key, isChanged, setValue, getResult } = options;
+        const rowid = getRowid($xeTable, row);
+        const colid = column.id;
+        let rowStore = fullCellStoreMaps[rowid];
+        const cellValue = XEUtils.get(row, column.field);
+        const restParams = {
+            $table: $xeTable,
+            row,
+            rowid,
+            column,
+            colid,
+            cellValue,
+            oldValue: null
+        };
+        if (editOpts.cache === false && key === 'render_table_cell') {
+            const rest = restParams;
+            rest.cellResult = getResult ? getResult(restParams) : cellValue;
+            return rest;
+        }
+        if (!rowStore) {
+            rowStore = {};
+            fullCellStoreMaps[rowid] = rowStore;
+        }
+        let cellStore = rowStore[colid];
+        if (!cellStore) {
+            cellStore = {
+                value: undefined,
+                result: {}
+            };
+            rowStore[colid] = cellStore;
+        }
+        const restData = rowStore[colid];
+        const oldValue = restData.value;
+        restParams.oldValue = oldValue;
+        if (isChanged ? !isChanged(restParams) : oldValue !== cellValue) {
+            restData.value = setValue ? setValue(restParams) : cellValue;
+            restData.result = {};
+        }
+        const storeData = restData.result;
+        if (XEUtils.isUndefined(storeData[key])) {
+            storeData[key] = getResult ? getResult(restParams) : cellValue;
+        }
+        const cellResult = storeData[key];
+        const rest = restParams;
+        rest.cellResult = cellResult;
+        return rest;
+    },
     getCellElement(row, fieldOrColumn) {
         const $xeTable = this;
         const internalData = $xeTable;

package/es/table/src/util.js

@@ -84,6 +84,7 @@ export function createInternalData() {
         fullColumnIdData: {},
         fullColumnFieldData: {},
         fullCellHeightMaps: {},
+        fullCellStoreMaps: {},
         // 当前行
         currentRow: null,
         // 合并表头单元格的数据

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.21.8";
+export const version = "3.21.10";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.21.8"}`;
+const version = `table v${"3.21.10"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);