vxe-table 4.22.0-beta.0 → 4.22.0

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

@@ -12,7 +12,7 @@ hooks.add('tableEditModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;
         const { refElem } = $xeTable.getRefMaps();
-        const { computeMouseOpts, computeEditOpts, computeCheckboxOpts, computeTreeOpts, computeValidOpts } = $xeTable.getComputeMaps();
+        const { computeMouseOpts, computeEditOpts, computeCheckboxOpts, computeTreeOpts, computeValidOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const browseObj = XEUtils.browse();
         let editMethods = {};
         let editPrivateMethods = {};
@@ -945,7 +945,9 @@ hooks.add('tableEditModule', {
             const { editRender } = column;
             const editOpts = computeEditOpts.value;
             if (editConfig && isEnableConf(editRender)) {
-                const compRender = renderer.get(editRender.name);
+                const rendererOpts = computeRendererOpts.value;
+                const renderName = editRender.name;
+                const compRender = renderName ? (rendererOpts[renderName] || renderer.get(renderName)) : null;
                 let autoFocus = editRender.autofocus || editRender.autoFocus;
                 let autoSelect = editRender.autoSelect || editRender.autoselect;
                 let inputElem = null;

package/es/table/module/export/hook.js

@@ -257,7 +257,7 @@ const tableExportMethodKeys = ['exportData', 'importByFile', 'importData', 'save
 hooks.add('tableExportModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;
-        const { computeTreeOpts, computePrintOpts, computeExportOpts, computeImportOpts, computeSeqOpts, computeRadioOpts, computeCheckboxOpts, computeColumnOpts, computeAggregateOpts } = $xeTable.getComputeMaps();
+        const { computeTreeOpts, computePrintOpts, computeExportOpts, computeImportOpts, computeSeqOpts, computeRadioOpts, computeCheckboxOpts, computeColumnOpts, computeAggregateOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const getSeq = (cellValue, row, $rowIndex, column, $columnIndex) => {
             const seqOpts = computeSeqOpts.value;
             const seqMd = seqOpts.seqMethod || column.seqMethod;
@@ -297,6 +297,7 @@ hooks.add('tableExportModule', {
             const treeOpts = computeTreeOpts.value;
             const columnOpts = computeColumnOpts.value;
             const aggregateOpts = computeAggregateOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             if (!htmlCellElem) {
                 htmlCellElem = document.createElement('div');
             }
@@ -329,7 +330,7 @@ hooks.add('tableExportModule', {
                             const renderOpts = editRender || cellRender;
                             let bodyExportMethod = column.exportMethod || columnOpts.exportMethod;
                             if (!bodyExportMethod && renderOpts && renderOpts.name) {
-                                const compConf = renderer.get(renderOpts.name);
+                                const compConf = rendererOpts[renderOpts.name] || renderer.get(renderOpts.name);
                                 if (compConf) {
                                     bodyExportMethod = compConf.tableExportMethod || compConf.exportMethod;
                                 }
@@ -474,7 +475,7 @@ hooks.add('tableExportModule', {
                             const renderOpts = column.editRender || column.cellRender;
                             let bodyExportMethod = column.exportMethod || columnOpts.exportMethod;
                             if (!bodyExportMethod && renderOpts && renderOpts.name) {
-                                const compConf = renderer.get(renderOpts.name);
+                                const compConf = rendererOpts[renderOpts.name] || renderer.get(renderOpts.name);
                                 if (compConf) {
                                     bodyExportMethod = compConf.tableExportMethod || compConf.exportMethod;
                                 }
@@ -544,7 +545,7 @@ hooks.add('tableExportModule', {
                     const renderOpts = column.editRender || column.cellRender;
                     let bodyExportMethod = column.exportMethod || columnOpts.exportMethod;
                     if (!bodyExportMethod && renderOpts && renderOpts.name) {
-                        const compConf = renderer.get(renderOpts.name);
+                        const compConf = rendererOpts[renderOpts.name] || renderer.get(renderOpts.name);
                         if (compConf) {
                             bodyExportMethod = compConf.tableExportMethod || compConf.exportMethod;
                         }
@@ -605,10 +606,11 @@ hooks.add('tableExportModule', {
         };
         const getFooterCellValue = (opts, row, column) => {
             const columnOpts = computeColumnOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const renderOpts = column.editRender || column.cellRender;
             let footLabelMethod = column.footerExportMethod;
             if (!footLabelMethod && renderOpts && renderOpts.name) {
-                const compConf = renderer.get(renderOpts.name);
+                const compConf = rendererOpts[renderOpts.name] || renderer.get(renderOpts.name);
                 if (compConf) {
                     footLabelMethod = compConf.tableFooterExportMethod || compConf.footerExportMethod;
                 }

package/es/table/module/filter/hook.js

@@ -14,7 +14,7 @@ hooks.add('tableFilterModule', {
         const $xeGGWrapper = $xeGrid || $xeGantt;
         const { props, reactData, internalData } = $xeTable;
         const { refElem, refTableFilter } = $xeTable.getRefMaps();
-        const { computeFilterOpts, computeMouseOpts } = $xeTable.getComputeMaps();
+        const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const updatePopupStyle = () => {
             const { filterStore } = reactData;
             const { elemStore } = internalData;
@@ -24,9 +24,10 @@ hooks.add('tableFilterModule', {
             }
             const tableEl = refElem.value;
             const filterOpts = computeFilterOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts;
             const filterRender = column ? column.filterRender : null;
-            const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+            const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
             const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
             if (!headerScrollElem) {
                 return nextTick();
@@ -162,7 +163,8 @@ hooks.add('tableFilterModule', {
                 if (column) {
                     const { filters, filterRender } = column;
                     if (filters) {
-                        const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                        const rendererOpts = computeRendererOpts.value;
+                        const compConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
                         const frMethod = column.filterResetMethod || (compConf ? (compConf.tableFilterResetMethod || compConf.filterResetMethod) : null);
                         filters.forEach((item) => {
                             item._checked = false;

package/es/table/module/filter/panel.js

@@ -20,7 +20,7 @@ export default defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const $xeTable = inject('$xeTable', {});
         const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
-        const { computeFilterOpts } = getComputeMaps();
+        const { computeFilterOpts, computeRendererOpts } = getComputeMaps();
         const refElem = ref();
         const refMaps = {
             refElem
@@ -204,10 +204,11 @@ export default defineVxeComponent({
                 return [];
             }
             const filterOpts = computeFilterOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const hasCheckOption = computeHasCheckOption.value;
             const { filterRender, filterMultiple } = column;
             const { confirmButtonText, resetButtonText, showFooter } = filterOpts;
-            const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+            const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
             const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
             let showFlFoot = !!filterMultiple;
             if (XEUtils.isBoolean(showFooter)) {
@@ -242,8 +243,9 @@ export default defineVxeComponent({
             if (!column) {
                 return renderEmptyElement($xeFilterPanel);
             }
+            const rendererOpts = computeRendererOpts.value;
             const filterRender = column ? column.filterRender : null;
-            const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+            const compConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
             const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : '';
             const params = Object.assign({}, tableInternalData._currFilterParams, { $panel: $xeFilterPanel, $table: $xeTable });
             const tableProps = $xeTable.props;

package/es/table/src/body.js

@@ -23,7 +23,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts, computeIsBodyRenderOptimize } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts, computeIsBodyRenderOptimize, computeRendererOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -108,6 +108,7 @@ export default defineVxeComponent({
             const resizableOpts = computeResizableOpts.value;
             const virtualXOpts = computeVirtualXOpts.value;
             const virtualYOpts = computeVirtualYOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const { isAllColumnDrag, isAllRowDrag } = resizableOpts;
             const rowOpts = computeRowOpts.value;
             const rowDragOpts = computeRowDragOpts.value;
@@ -126,7 +127,7 @@ export default defineVxeComponent({
             const colid = column.id;
             const colRest = fullColumnIdData[colid] || {};
             const renderOpts = editRender || cellRender;
-            const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+            const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
             const compCellClassName = compConf ? (compConf.tableCellClassName || compConf.cellClassName) : null;
             const compCellStyle = compConf ? (compConf.tableCellStyle || compConf.cellStyle) : '';
             const showAllTip = tooltipOpts.showAll;
@@ -763,7 +764,8 @@ export default defineVxeComponent({
                 emptyContent = $xeTable.callSlot(emptySlot, emptyParams);
             }
             else {
-                const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
+                const rendererOpts = computeRendererOpts.value;
+                const compConf = emptyOpts.name ? (rendererOpts[emptyOpts.name] || renderer.get(emptyOpts.name)) : null;
                 const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null;
                 if (rtEmptyView) {
                     emptyContent = getSlotVNs(rtEmptyView(emptyOpts, emptyParams));

package/es/table/src/cell.js

@@ -221,7 +221,9 @@ function getFooterContent(params) {
     const renderOpts = editRenderOpts || cellRenderOpts;
     const itemValue = $table.getFooterCellLabel(row, column);
     if (renderOpts) {
-        const compConf = renderer.get(renderOpts.name);
+        const { computeRendererOpts } = $table.getComputeMaps();
+        const rendererOpts = computeRendererOpts.value;
+        const compConf = renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
         if (compConf) {
             const rtFooter = compConf.renderTableFooter || compConf.renderFooter;
             if (rtFooter) {
@@ -358,7 +360,9 @@ export const Cell = {
             }
         }
         if (renderOpts) {
-            const compConf = renderer.get(renderOpts.name);
+            const { computeRendererOpts } = $table.getComputeMaps();
+            const rendererOpts = computeRendererOpts.value;
+            const compConf = renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
             if (compConf) {
                 const rtHeader = compConf.renderTableHeader || compConf.renderHeader;
                 if (rtHeader) {
@@ -453,9 +457,11 @@ export const Cell = {
             if (defaultSlot) {
                 return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
             }
+            const { computeRendererOpts } = $table.getComputeMaps();
+            const rendererOpts = computeRendererOpts.value;
             // 如果是编辑模式-查看：slot default > formatter > cellRender.renderTableDefault > editRender.renderTableCell > editRender.renderTableDefault > cellRender.tableCellFormatter > editRender.tableCellFormatter > field
             // 如果是查看表格：slot default > formatter > cellRender.renderTableDefault > cellRender.tableCellFormatter > field
-            const cellCompConf = cellRenderOpts ? renderer.get(cellRenderOpts.name) : null;
+            const cellCompConf = cellRenderOpts && cellRenderOpts.name ? (rendererOpts[cellRenderOpts.name] || renderer.get(cellRenderOpts.name)) : null;
             if (cellRenderOpts) {
                 const cellDefaultRenderFn = cellCompConf ? (cellCompConf.renderTableDefault || cellCompConf.renderDefault) : null;
                 if (cellDefaultRenderFn && cellRenderOpts) {
@@ -463,7 +469,7 @@ export const Cell = {
                 }
             }
             if (editRenderOpts) {
-                const editCompConf = editRenderOpts ? renderer.get(editRenderOpts.name) : null;
+                const editCompConf = editRenderOpts && editRenderOpts.name ? (rendererOpts[editRenderOpts.name] || renderer.get(editRenderOpts.name)) : null;
                 const editCellRenderFn = editCompConf
                     ? ((editCompConf.renderTableCell || editCompConf.renderCell) ||
                         (editCompConf.renderTableDefault || editCompConf.renderDefault))
@@ -1001,7 +1007,9 @@ export const Cell = {
             return $table.callSlot(contentSlot, params);
         }
         if (contentRender) {
-            const compConf = renderer.get(contentRender.name);
+            const { computeRendererOpts } = $table.getComputeMaps();
+            const rendererOpts = computeRendererOpts.value;
+            const compConf = contentRender.name ? (rendererOpts[contentRender.name] || renderer.get(contentRender.name)) : null;
             if (compConf) {
                 const rtExpand = compConf.renderTableExpand || compConf.renderExpand;
                 if (rtExpand) {
@@ -1217,7 +1225,9 @@ export const Cell = {
             if (editSlot) {
                 return $table.callSlot(editSlot, cellParams);
             }
-            const compConf = renderer.get(editRenderOpts.name);
+            const { computeRendererOpts } = $table.getComputeMaps();
+            const rendererOpts = computeRendererOpts.value;
+            const compConf = editRenderOpts.name ? (rendererOpts[editRenderOpts.name] || renderer.get(editRenderOpts.name)) : null;
             const rtEdit = compConf ? (compConf.renderTableEdit || compConf.renderEdit) : null;
             if (rtEdit) {
                 return getSlotVNs(rtEdit(editRenderOpts, cellParams));

package/es/table/src/columnInfo.js

@@ -13,11 +13,13 @@ export class ColumnInfo {
         const $xeGrid = $xeTable.xeGrid;
         const $xeGantt = $xeTable.xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
+        const { computeRendererOpts, computeTreeOpts } = $xeTable.getComputeMaps();
         const { type, field, width, visible, fixed, align, headerAlign, footerAlign, aggFunc, formatter, filterMultiple, cellRender, editRender, filterRender } = colConfs;
         const colId = colConfs.colId || XEUtils.uniqueId('col_');
         const defaultVisible = XEUtils.isBoolean(visible) ? visible : true;
         const defaultRenderWidth = width && isPx(width) && width !== 'auto' ? Math.max(0, XEUtils.toInteger(width)) : 0;
-        const flCompConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+        const rendererOpts = computeRendererOpts.value;
+        const flCompConf = filterRender && isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
         const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
         const filters = toFilters(colConfs.filters, colId);
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
@@ -32,7 +34,6 @@ export class ColumnInfo {
         }
         if (type === 'expand') {
             const { treeConfig } = tableProps;
-            const { computeTreeOpts } = $xeTable.getComputeMaps();
             const treeOpts = computeTreeOpts.value;
             if (treeConfig && (treeOpts.showLine || treeOpts.line)) {
                 errLog('vxe.error.errConflicts', ['tree-config.showLine', 'column.type=expand']);

package/es/table/src/footer.js

@@ -31,7 +31,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeFooterTooltipOpts, computeColumnOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts, computeIsFooterRenderOptimize } = $xeTable.getComputeMaps();
+        const { computeFooterTooltipOpts, computeColumnOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts, computeIsFooterRenderOptimize, computeRendererOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refFooterScroll = ref();
         const refFooterTable = ref();
@@ -54,12 +54,13 @@ export default defineVxeComponent({
             const cellOpts = computeCellOpts.value;
             const footerCellOpts = computeFooterCellOpts.value;
             const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight;
+            const rendererOpts = computeRendererOpts.value;
             return tableColumn.map((column, $columnIndex) => {
                 const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
                 const colid = column.id;
                 const colRest = fullColumnIdData[colid] || {};
                 const renderOpts = editRender || cellRender;
-                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+                const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
                 const showAllTip = footerTooltipOpts.showAll;
                 const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed);
                 const cellPadding = getDefaultConfig(footerCellOpts.padding, cellOpts.padding);

package/es/table/src/header.js

@@ -23,7 +23,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize, computeHeaderTooltipOpts } = $xeTable.getComputeMaps();
+        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize, computeHeaderTooltipOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -62,6 +62,7 @@ export default defineVxeComponent({
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
             const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts;
             const isLastRow = _rowIndex === headerGroups.length - 1;
@@ -70,7 +71,7 @@ export default defineVxeComponent({
                 const colid = column.id;
                 const colRest = fullColumnIdData[colid] || {};
                 const renderOpts = editRender || cellRender;
-                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+                const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
                 const isColGroup = column.children && column.children.length;
                 const fixedHiddenColumn = overflowX && !isColGroup && (fixedType ? column.fixed !== fixedType : !!column.fixed);
                 const cellPadding = getDefaultConfig(headerCellOpts.padding, cellOpts.padding);
@@ -251,6 +252,7 @@ export default defineVxeComponent({
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
             const floatingFilterOpts = computeFloatingFilterOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const { cellClassName } = floatingFilterOpts;
             const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
             return cols.map((column, $columnIndex) => {
@@ -259,8 +261,8 @@ export default defineVxeComponent({
                 const colRest = fullColumnIdData[colid] || {};
                 const renderOpts = editRender || cellRender;
                 const flSlot = slots ? (slots.floatingFilter || slots['floating-filter']) : null;
-                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
-                const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
+                const flCompConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
                 const rtFloatingFilter = flCompConf ? flCompConf.renderTableFloatingFilter : null;
                 const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed);
                 const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;

package/es/table/src/props.js

@@ -313,6 +313,10 @@ export const tableProps = {
         type: Number,
         default: () => getConfig().table.delayHover
     },
+    /**
+     * 渲染器配置项
+     */
+    rendererConfig: Object,
     // 额外的参数
     params: Object
 };

package/es/table/src/table.js

@@ -698,6 +698,9 @@ export default defineVxeComponent({
         const combineSplitterResizeFlag = computed(() => {
             return $xeSplitter ? $xeSplitter.reactData.resizeFlag : null;
         });
+        const computeRendererOpts = computed(() => {
+            return Object.assign({}, getConfig().table.rendererConfig, props.rendererConfig);
+        });
         const refMaps = {
             refElem,
             refTooltip,
@@ -804,6 +807,7 @@ export default defineVxeComponent({
             computeRowGroupColumns,
             computeAggFuncColumns,
             computeUndoRedoHistoryOpts,
+            computeRendererOpts,
             computeFNROpts,
             computeSXOpts,
             computeSYOpts
@@ -2243,6 +2247,7 @@ export default defineVxeComponent({
             const filterOpts = computeFilterOpts.value;
             const sortOpts = computeSortOpts.value;
             const aggregateOpts = computeAggregateOpts.value;
+            const rendererOpts = computeRendererOpts.value;
             const treeOpts = computeTreeOpts.value;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const { transform, rowField, parentField, mapChildrenField } = treeOpts;
@@ -2282,7 +2287,7 @@ export default defineVxeComponent({
                     const handleFilter = (row) => {
                         return filterColumns.every(({ column, valueList, itemList }) => {
                             const { filterMethod, filterRender } = column;
-                            const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                            const compConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
                             const compFilterMethod = compConf ? (compConf.tableFilterMethod || compConf.filterMethod) : null;
                             const tdFilterMethod = compConf ? (compConf.tableFilterDefaultMethod || compConf.defaultTableFilterMethod || compConf.defaultFilterMethod) : null;
                             const cellValue = getCellValue(row, column);
@@ -5393,6 +5398,7 @@ export default defineVxeComponent({
                 }
                 const { editConfig } = props;
                 const { formatter, editRender, cellRender } = column;
+                const rendererOpts = computeRendererOpts.value;
                 let etOpSize = null;
                 let etOgSize = null;
                 let clOpSize = null;
@@ -5409,8 +5415,8 @@ export default defineVxeComponent({
                 const editRenderOpts = formatter ? null : (isEnableEdit && isEnableConf(editRender) ? editRender : null);
                 const cellRenderOpts = formatter ? null : (isEnableConf(cellRender) ? cellRender : null);
                 // formatter > cellRender.tableCellFormatter > editRender.tableCellFormatter
-                const cellCompConf = cellRenderOpts ? renderer.get(cellRenderOpts.name) : null;
-                const editCompConf = editRenderOpts ? renderer.get(editRenderOpts.name) : null;
+                const cellCompConf = cellRenderOpts && cellRenderOpts.name ? (rendererOpts[cellRenderOpts.name] || renderer.get(cellRenderOpts.name)) : null;
+                const editCompConf = editRenderOpts && editRenderOpts.name ? (rendererOpts[editRenderOpts.name] || renderer.get(editRenderOpts.name)) : null;
                 const cellDfFormatter = cellCompConf ? cellCompConf.tableCellFormatter : null;
                 const editDfFormatter = editCompConf ? editCompConf.tableCellFormatter : null;
                 const cellValue = getCellValue(row, column);
@@ -10196,8 +10202,9 @@ export default defineVxeComponent({
                 if (column) {
                     const { filterStore } = reactData;
                     const { filterRender, filters } = column;
+                    const rendererOpts = computeRendererOpts.value;
                     const filterOptions = filters || [];
-                    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                    const compConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
                     const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
                     filterStore.column = column;
                     // 复原状态
@@ -13494,7 +13501,8 @@ export default defineVxeComponent({
                 return emptySlot(emptyParams);
             }
             else {
-                const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
+                const rendererOpts = computeRendererOpts.value;
+                const compConf = emptyOpts.name ? (rendererOpts[emptyOpts.name] || renderer.get(emptyOpts.name)) : null;
                 const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null;
                 if (rtEmptyView) {
                     return getSlotVNs(rtEmptyView(emptyOpts, emptyParams));

package/es/toolbar/src/toolbar.js

@@ -366,10 +366,12 @@ export default defineVxeComponent({
             const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix'];
             const btnVNs = [];
             if (buttons) {
+                const { computeRendererOpts } = $table ? $table.getComputeMaps() : {};
+                const rendererOpts = (computeRendererOpts ? computeRendererOpts.value : null) || {};
                 buttons.forEach((item, index) => {
                     const { dropdowns, buttonRender } = item;
                     if (item.visible !== false) {
-                        const compConf = buttonRender ? renderer.get(buttonRender.name) : null;
+                        const compConf = buttonRender && buttonRender.name ? (rendererOpts[buttonRender.name] || renderer.get(buttonRender.name)) : null;
                         if (buttonRender && compConf && compConf.renderToolbarButton) {
                             const toolbarButtonClassName = compConf.toolbarButtonClassName;
                             const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table, button: item };
@@ -417,16 +419,17 @@ export default defineVxeComponent({
             const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix'];
             const btnVNs = [];
             if (tools) {
+                const { computeRendererOpts } = $table ? $table.getComputeMaps() : {};
+                const rendererOpts = (computeRendererOpts ? computeRendererOpts.value : null) || {};
                 tools.forEach((item, tIndex) => {
                     const { dropdowns, toolRender } = item;
                     if (item.visible !== false) {
-                        const rdName = toolRender ? toolRender.name : null;
-                        const compConf = toolRender ? renderer.get(rdName) : null;
+                        const compConf = toolRender && toolRender.name ? (rendererOpts[toolRender.name] || renderer.get(toolRender.name)) : null;
                         if (toolRender && compConf && compConf.renderToolbarTool) {
                             const toolbarToolClassName = compConf.toolbarToolClassName;
                             const params = { $grid: $xeGrid, $gantt: $xeGantt, $table: $table, tool: item };
                             btnVNs.push(h('span', {
-                                key: rdName,
+                                key: tIndex,
                                 class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
                             }, getSlotVNs(compConf.renderToolbarTool(toolRender, params))));
                         }

package/es/ui/index.js

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

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const tableVersion = `table v${"4.22.0-beta.0"}`;
+const tableVersion = `table v${"4.22.0"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';

package/lib/grid/src/grid.js

@@ -650,7 +650,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             // 处理插槽
             formOpts.items.forEach(item => {
               _xeUtils.default.each(item.slots, func => {
-                if (!_xeUtils.default.isFunction(func)) {
+                if (func && !_xeUtils.default.isFunction(func)) {
                   if (slots[func]) {
                     formSlots[func] = slots[func];
                   }
@@ -1984,7 +1984,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         _xeUtils.default.eachTree(columns, column => {
           if (column.slots) {
             _xeUtils.default.each(column.slots, func => {
-              if (!_xeUtils.default.isFunction(func)) {
+              if (func && !_xeUtils.default.isFunction(func)) {
                 if (!slots[func]) {
                   errLog('vxe.error.notSlot', [func]);
                 }