vxe-table 3.24.0-beta.0 → 3.24.0

package/packages/table/module/filter/mixin.ts

@@ -25,9 +25,10 @@ function updatePopupStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   }
   const tableEl = $xeTable.$refs.refElem as HTMLDivElement
   const filterOpts = $xeTable.computeFilterOpts
+  const rendererOpts = $xeTable.computeRendererOpts
   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) {
@@ -464,13 +465,14 @@ export default {
         $xeTable.handleColumnConfirmFilter(column, evnt)
       }
     },
-    handleClearFilter (column: any) {
+    handleClearFilter (column: VxeTableDefines.ColumnInfo) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       if (column) {
         const { filters, filterRender } = column
         if (filters) {
-          const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+          const rendererOpts = $xeTable.computeRendererOpts
+          const compConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null
           const filterResetMethod = column.filterResetMethod || (compConf ? (compConf.tableFilterResetMethod || compConf.filterResetMethod) : null)
           filters.forEach((item: any) => {
             item._checked = false
@@ -480,7 +482,7 @@ export default {
             }
           })
           if (filterResetMethod) {
-            filterResetMethod({ options: filters, column, $table: $xeTable })
+            filterResetMethod({ options: filters as VxeTableDefines.FilterOption[], column, $table: $xeTable })
           }
         }
       }

package/packages/table/module/filter/panel.ts

@@ -258,9 +258,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         return []
       }
       const filterOpts = $xeTable.computeFilterOpts
+      const rendererOpts = $xeTable.computeRendererOpts
       const hasCheckOption = $xeFilterPanel.computeHasCheckOption
       const { filterRender, filterMultiple } = column
-      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
       return filterMultiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
         ? [
@@ -298,8 +299,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (!column) {
         return renderEmptyElement($xeFilterPanel)
       }
+      const rendererOpts = $xeTable.computeRendererOpts
       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

package/packages/table/src/body.ts

@@ -117,6 +117,7 @@ function renderTdColumn (
   const tooltipOpts = $xeTable.computeTooltipOpts
   const virtualXOpts = $xeTable.computeVirtualXOpts
   const virtualYOpts = $xeTable.computeVirtualYOpts
+  const rendererOpts = $xeTable.computeRendererOpts
   const { isAllColumnDrag, isAllRowDrag } = $xeTable.resizableOpts
   const rowOpts = $xeTable.computeRowOpts
   const rowDragOpts = $xeTable.computeRowDragOpts
@@ -135,7 +136,7 @@ function renderTdColumn (
   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
@@ -862,7 +863,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (emptySlot) {
       emptyContent = emptySlot.call($xeTable, emptyParams)
     } else {
-      const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null
+      const rendererOpts = $xeTable.computeRendererOpts
+      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.call($xeTable, h, emptyOpts, emptyParams))

package/packages/table/src/cell.ts

@@ -245,7 +245,8 @@ function getFooterContent (h: CreateElement, params: VxeTableDefines.CellRenderF
   const renderOpts = editRenderOpts || cellRenderOpts
   const itemValue = $table.getFooterCellLabel(row, column)
   if (renderOpts) {
-    const compConf = renderer.get(renderOpts.name)
+    const rendererOpts = $table.computeRendererOpts
+    const compConf = renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null
     const rtFooter = compConf ? (compConf.renderTableFooter || compConf.renderFooter) : null
     if (rtFooter) {
       const footParams = Object.assign(params, {
@@ -387,7 +388,8 @@ export const Cell = {
     }
 
     if (renderOpts) {
-      const compConf = renderer.get(renderOpts.name)
+      const rendererOpts = $table.computeRendererOpts
+      const compConf = renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null
       const rtHeader = compConf ? (compConf.renderTableHeader || compConf.renderHeader) : null
       if (rtHeader) {
         return getSlotVNs(renderTitleContent(h, params, rtHeader.call($table, h, renderOpts, params))) as VNode[]
@@ -477,9 +479,10 @@ export const Cell = {
       if (defaultSlot) {
         return renderCellBaseVNs(h, params, $table.callSlot(defaultSlot, params, h))
       }
+      const rendererOpts = $table.computeRendererOpts
       // 如果是编辑模式-查看：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) {
@@ -487,7 +490,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) ||
@@ -1063,7 +1066,8 @@ export const Cell = {
       return $table.callSlot(slots.content, params, h)
     }
     if (contentRender) {
-      const compConf = renderer.get(contentRender.name)
+      const rendererOpts = $table.computeRendererOpts
+      const compConf = contentRender.name ? (rendererOpts[contentRender.name] || renderer.get(contentRender.name)) : null
       const rtExpand = compConf ? (compConf.renderTableExpand || compConf.renderExpand) : null
       if (rtExpand) {
         return getSlotVNs(rtExpand.call($table, h, contentRender, params))
@@ -1302,7 +1306,8 @@ export const Cell = {
       if (slots && slots.edit) {
         return $table.callSlot(slots.edit, cellParams, h)
       }
-      const compConf = renderer.get(editRender.name)
+      const rendererOpts = $table.computeRendererOpts
+      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.call($table, h, editRender, cellParams))

package/packages/table/src/columnInfo.ts

@@ -27,7 +27,8 @@ export class ColumnInfo {
     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 = $xeTable.computeRendererOpts
+    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)

package/packages/table/src/footer.ts

@@ -35,13 +35,14 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
   const cellOpts = $xeTable.computeCellOpts
   const footerCellOpts = $xeTable.computeFooterCellOpts
   const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight
+  const rendererOpts = $xeTable.computeRendererOpts
 
   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)
 

package/packages/table/src/header.ts

@@ -33,6 +33,7 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
   const cellOpts = $xeTable.computeCellOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const headerCellOpts = $xeTable.computeHeaderCellOpts
+  const rendererOpts = $xeTable.computeRendererOpts
   const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
   const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
   const isLastRow = _rowIndex === headerGroups.length - 1
@@ -43,7 +44,7 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
     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)
 
@@ -244,6 +245,7 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const headerCellOpts = $xeTable.computeHeaderCellOpts
   const floatingFilterOpts = $xeTable.computeFloatingFilterOpts
+  const rendererOpts = $xeTable.computeRendererOpts
   const { cellClassName } = floatingFilterOpts
   const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
 
@@ -252,8 +254,8 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
     const colid = column.id
     const colRest = fullColumnIdData[colid] || {}
     const renderOpts = editRender || cellRender
-    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 flSlot = slots ? (slots.floatingFilter || slots['floating-filter']) : null
     const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed)

package/packages/table/src/methods.ts

@@ -817,6 +817,7 @@ function updateAfterFullData ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const filterOpts = $xeTable.computeFilterOpts
   const sortOpts = $xeTable.computeSortOpts
   const aggregateOpts = $xeTable.computeAggregateOpts
+  const rendererOpts = $xeTable.computeRendererOpts
   const treeOpts = $xeTable.computeTreeOpts
   const childrenField = treeOpts.children || treeOpts.childrenField
   const { transform, rowField, parentField, mapChildrenField } = treeOpts
@@ -862,7 +863,7 @@ function updateAfterFullData ($xeTable: VxeTableConstructor & VxeTablePrivateMet
       const handleFilter = (row: any) => {
         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)
@@ -5762,6 +5763,7 @@ const tableMethods: any = {
     }
     const { editConfig } = props
     const { formatter, editRender, cellRender } = column
+    const rendererOpts = $xeTable.computeRendererOpts
     let etOpSize = null
     let etOgSize = null
     let clOpSize = null
@@ -5778,8 +5780,8 @@ const tableMethods: any = {
     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)
@@ -7073,8 +7075,9 @@ const tableMethods: any = {
     if (column) {
       const { filterStore } = reactData
       const { filterRender, filters } = column
+      const rendererOpts = $xeTable.computeRendererOpts
       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
       // 复原状态

package/packages/table/src/props.ts

@@ -306,6 +306,10 @@ export const tableProps = {
   animat: { type: Boolean, default: () => getConfig().table.animat },
   // （可能会被废弃的参数，不要使用）
   delayHover: { type: Number, default: () => getConfig().table.delayHover },
+  /**
+   * 渲染器配置项
+   */
+  rendererConfig: Object as PropType<VxeTablePropTypes.RendererConfig>,
   // 额外的参数
   params: Object as PropType<VxeTablePropTypes.Params>
 }

package/packages/table/src/table.ts

@@ -173,7 +173,8 @@ function renderEmptyBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeT
   if (emptySlot) {
     emptyContent = emptySlot.call($xeTable, emptyParams)
   } else {
-    const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null
+    const rendererOpts = $xeTable.computeRendererOpts
+    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.call($xeTable, h, emptyOpts, emptyParams))
@@ -1489,6 +1490,12 @@ export default {
 
       return Object.assign({}, getConfig().table.undoRedoHistoryConfig, props.undoRedoHistoryConfig)
     },
+    computeRendererOpts () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.rendererConfig, props.rendererConfig)
+    },
     combineTabsResizeFlag () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const $xeTabs = $xeTable.$xeTabs

package/packages/toolbar/src/toolbar.ts

@@ -486,10 +486,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const buttonSuffixSlot = slots.buttonSuffix || slots['button-suffix']
       const btnVNs: VxeComponentSlotType[] = []
       if (buttons) {
+        const rendererOpts = ($table ? $table.computeRendererOpts : null) || {}
         buttons.forEach((item) => {
           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 }
@@ -555,17 +556,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const toolSuffixSlot = slots.toolSuffix || slots['tool-suffix']
       const btnVNs: VxeComponentSlotType[] = []
       if (tools) {
+        const rendererOpts = ($table ? $table.computeRendererOpts : 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 as string,
+                  key: tIndex,
                   class: ['vxe-tool--item', toolbarToolClassName ? (XEUtils.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName) : '']
                 }, getSlotVNs(compConf.renderToolbarTool(h, toolRender, params)))
               )