antd plugins功能增强

plugin-render-antd/src/index.ts

@@ -1,3 +1,5 @@
+import type { ComponentProvider } from '../types'
+
 import { defineTableRender } from './table'
 import { defineFormRender } from './form'
 import { defineFormDesignRender } from './form-design'
@@ -44,14 +46,15 @@ function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearF
 
 export const VxeUIPluginRenderAntd: VxeUIPluginObject = {
   install (VxeUI, options?: {
-    Antd?: any
+    Antd?: any,
+    componentProvider?: ComponentProvider
   }) {
     // 检查版本
     if (!/^(4)\./.test(VxeUI.uiVersion)) {
       console.error('[plugin-render-antd 4.x] Version 4.x is required')
     }
 
-    defineTableRender(VxeUI)
+    defineTableRender(VxeUI, options?.componentProvider)
     defineFormRender(VxeUI)
     defineFormDesignRender(VxeUI)
 

plugin-render-antd/src/table/index.ts

@@ -1,3 +1,5 @@
+import type { ComponentProvider } from '../../types'
+
 import { h, resolveComponent, ComponentOptions } from 'vue'
 import XEUtils from 'xe-utils'
 
@@ -6,7 +8,20 @@ import type { VxeUIExport, VxeTableDefines, VxeColumnPropTypes, VxeGlobalRendere
 /**
  * 表格 - 渲染器
  */
-export function defineTableRender (VxeUI: VxeUIExport) {
+export function defineTableRender (VxeUI: VxeUIExport, componentProvider?: ComponentProvider) {
+  /**
+   * 获取组件
+   */
+  function getComponent (name: string) {
+    if (componentProvider) {
+      const component = componentProvider(name)
+      if (component) {
+        return component
+      }
+    }
+    return resolveComponent(name)
+  }
+
   function isEmptyValue (cellValue: any) {
     return cellValue === null || cellValue === undefined || cellValue === ''
   }
@@ -47,7 +62,8 @@ export function defineTableRender (VxeUI: VxeUIExport) {
   }
 
   function getCellEditFilterProps (renderOpts: any, params: VxeGlobalRendererHandles.RenderEditParams | VxeGlobalRendererHandles.RenderFilterParams, value: any, defaultProps?: { [prop: string]: any }) {
-    return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
+    const props = XEUtils.isFunction(renderOpts.props) ? renderOpts.props(params) : renderOpts.props
+    return XEUtils.assign({}, defaultProps, props, { [getModelProp(renderOpts)]: value })
   }
 
   function formatText (cellValue: any) {
@@ -253,7 +269,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
       const { name, attrs } = renderOpts
       const cellValue = XEUtils.get(row, column.field)
       return [
-        h(resolveComponent(name), {
+        h(getComponent(name), {
           ...attrs,
           ...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps),
           ...getEditOns(renderOpts, params)
@@ -265,7 +281,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
   function defaultButtonEditRender (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderEditParams) {
     const { attrs } = renderOpts
     return [
-      h(resolveComponent('a-button'), {
+      h(getComponent('AButton'), {
         ...attrs,
         ...getCellEditFilterProps(renderOpts, params, null),
         ...getOns(renderOpts, params)
@@ -290,7 +306,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
           class: 'vxe-table--filter-antd-wrapper'
         }, column.filters.map((option, oIndex) => {
           const optionValue = option.data
-          return h(resolveComponent(name), {
+          return h(getComponent(name), {
             key: oIndex,
             ...attrs,
             ...getCellEditFilterProps(renderOpts, params, optionValue, defaultProps),
@@ -382,7 +398,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
         const ons = getEditOns(renderOpts, params)
         if (optionGroups) {
           return [
-            h(resolveComponent('a-select') as ComponentOptions, {
+            h(getComponent('ASelect') as ComponentOptions, {
               ...props,
               ...attrs,
               options: optionGroups,
@@ -391,7 +407,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
           ]
         }
         return [
-          h(resolveComponent('a-select') as ComponentOptions, {
+          h(getComponent('ASelect') as ComponentOptions, {
             ...props,
             ...attrs,
             options: props.options || options,
@@ -414,7 +430,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             ? column.filters.map((option, oIndex) => {
               const optionValue = option.data
               const props = getCellEditFilterProps(renderOpts, params, optionValue)
-              return h(resolveComponent('a-select') as ComponentOptions, {
+              return h(getComponent('ASelect') as ComponentOptions, {
                 key: oIndex,
                 ...attrs,
                 ...props,
@@ -428,7 +444,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
             : column.filters.map((option, oIndex) => {
               const optionValue = option.data
               const props = getCellEditFilterProps(renderOpts, params, optionValue)
-              return h(resolveComponent('a-select') as ComponentOptions, {
+              return h(getComponent('ASelect') as ComponentOptions, {
                 key: oIndex,
                 ...attrs,
                 ...props,

plugin-render-antd/types/index.d.ts

@@ -1,11 +1,16 @@
+import type { Component } from 'vue'
+
 import { VxeUIExport } from 'vxe-pc-ui'
 
+export type ComponentProvider = (name: string) => Component | string | undefined
+
 /**
  * 基于 Vxe UI 的适配插件，用于兼容 ant-design-vue 组件库
  */
 export declare const VxeUIPluginRenderAntd: {
   install (VxeUI: VxeUIExport, options?: {
-    Antd?: any
+    Antd?: any,
+    componentProvider?: ComponentProvider;
   }): void
 }