@vxe-ui/plugin-render-antd 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Xu Liangzhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+# @vxe-ui/plugin-render-antd
+
+[Vxe UI](https://vxeui.com/) plug-in for compatibility with the [ant-design-vue](https://www.npmjs.com/package/ant-design-vue) component.
+
+## Compatibility
+
+It corresponds to [vxe-table v4](https://www.npmjs.com/package/vxe-table) | [vxe-pc-ui v4](https://www.npmjs.com/package/vxe-pc-ui)  
+
+## Installing
+
+```shell
+npm install @vxe-ui/plugin-render-antd
+```
+
+```javascript
+// ...
+// Use vxe-pc-ui
+import { VxeUI } from 'vxe-pc-ui'
+// Use vxe-table
+// import { VxeUI } from 'vxe-table'
+import VxeUIPluginRenderAntd from '@vxe-ui/plugin-render-antd'
+import '@vxe-ui/plugin-render-antd/dist/style.css'
+// ...
+
+VxeUI.use(VxeUIPluginRenderAntd)
+```
+
+
+## API
+
+### cell-render 默认的渲染器配置项说明
+
+| 属性 | 描述 | 类型 | 可选值 | 默认值 |
+|------|------|-----|-----|-----|
+| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASwitch, ARate, AButton, AButtons | — |
+| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |
+| options | 只对 name=ASelect 有效，下拉组件选项列表 | Array | — | [] |
+| optionProps | 只对 name=ASelect 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
+| optionGroups | 只对 name=ASelect 有效，下拉组件分组选项列表 | Array | — | [] |
+| optionGroupProps | 只对 name=ASelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
+| events | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
+| nativeEvents | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
+
+### edit-render 可编辑渲染器配置项说明
+
+| 属性 | 描述 | 类型 | 可选值 | 默认值 |
+|------|------|-----|-----|-----|
+| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ACascader, ADatePicker, AMonthPicker, ARangePicker, AWeekPicker, ATimePicker, ATreeSelect, ASwitch, ARate, AButton, AButtons | — |
+| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |
+| options | 只对 name=ASelect 有效，下拉组件选项列表 | Array | — | [] |
+| optionProps | 只对 name=ASelect 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
+| optionGroups | 只对 name=ASelect 有效，下拉组件分组选项列表 | Array | — | [] |
+| optionGroupProps | 只对 name=ASelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
+| events | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
+| nativeEvents | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |
+
+### filter-render 筛选渲染器配置项说明
+
+| 属性 | 描述 | 类型 | 可选值 | 默认值 |
+|------|------|-----|-----|-----|
+| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate | — |
+| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |
+| options | 只对 name=ASelect 有效，下拉组件选项列表 | Array | — | [] |
+| optionProps | 只对 name=ASelect 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
+| optionGroups | 只对 name=ASelect 有效，下拉组件分组选项列表 | Array | — | [] |
+| optionGroupProps | 只对 name=ASelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
+| events | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |
+| nativeEvents | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |
+
+### item-render 表单-项选渲染器配置项说明
+
+| 属性 | 描述 | 类型 | 可选值 | 默认值 |
+|------|------|-----|-----|-----|
+| name | 支持的渲染组件 | String | AInput, AAutocomplete, AInputNumber, ASelect, ASwitch, ARate, ARadio, ACheckbox, AButton, AButtons | — |
+| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |
+| options | 只对 name=ASelect 有效，下拉组件选项列表 | Array | — | [] |
+| optionProps | 只对 name=ASelect 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |
+| optionGroups | 只对 name=ASelect 有效，下拉组件分组选项列表 | Array | — | [] |
+| optionGroupProps | 只对 name=ASelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |
+| events | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |
+| nativeEvents | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |
+
+## Cell demo
+
+```html
+<vxe-table
+  height="600"
+  :data="tableData"
+  :edit-config="{trigger: 'click', mode: 'cell'}">
+  <vxe-column field="name" title="Name" :edit-render="{name: 'AInput'}"></vxe-column>
+  <vxe-column field="age" title="Age" :edit-render="{name: 'AInputNumber'}"></vxe-column>
+  <vxe-column field="date" title="Date" width="200" :edit-render="{name: 'ADatePicker'}"></vxe-column>
+</vxe-table>
+```
+
+```javascript
+export default {
+  data () {
+    return {
+      tableData: [
+        { id: 100, name: 'test0', age: 28, sex: '1', date: '' },
+        { id: 101, name: 'test1', age: 32, sex: '0', date: '' },
+        { id: 102, name: 'test2', age: 36, sex: '1', date: '' }
+      ]
+    }
+  }
+}
+```
+
+## Filter demo
+
+```html
+<vxe-table
+  height="600"
+  :data="tableData">
+  <vxe-column field="name" title="Name":filters="nameOptions" :filter-render="{name: 'AInput'}"></vxe-column>
+  <vxe-column field="age" title="Age"></vxe-column>
+  <vxe-column field="date" title="Date" ></vxe-column>
+</vxe-table>
+```
+
+```javascript
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      nameOptions: [
+        { data: '' }
+      ],
+      tableData: [
+        { id: 100, name: 'test0', age: 28, date: '' },
+        { id: 101, name: 'test1', age: 32, date: '' },
+        { id: 102, name: 'test2', age: 36, date: '' }
+      ]
+    }
+  }
+})
+```
+
+## Contributors
+
+Thank you to everyone who contributed to this project.
+
+[![vxe-ui-plugins](https://contrib.rocks/image?repo=x-extends/vxe-ui-plugins)](https://github.com/x-extends/vxe-ui-plugins/graphs/contributors)
+
+## License
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/index.ts

@@ -0,0 +1,757 @@
+import { h, resolveComponent, ComponentOptions } from 'vue'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeTableDefines, VxeColumnPropTypes, VxeGlobalRendererHandles, VxeGlobalInterceptorHandles, FormItemContentRenderParams } from 'vxe-pc-ui'
+
+let VxeUI: VxeUIExport
+// eslint-disable-next-line no-unused-vars
+let Antd: any
+
+function isEmptyValue (cellValue: any) {
+  return cellValue === null || cellValue === undefined || cellValue === ''
+}
+
+function getOnName (type: string) {
+  return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
+}
+
+function getModelProp (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+  let prop = 'value'
+  switch (renderOpts.name) {
+    case 'ASwitch':
+      prop = 'checked'
+      break
+  }
+  return prop
+}
+
+function getModelEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+  let type = 'update:value'
+  switch (renderOpts.name) {
+    case 'ASwitch':
+      type = 'update:checked'
+      break
+  }
+  return type
+}
+
+function dateFormatToVxeFormat (format: string) {
+  if (format) {
+    return `${format}`.replace('YYYY', 'yyyy').replace('DD', 'dd')
+  }
+  return format
+}
+
+function getChangeEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+  return 'change'
+}
+
+function getCellEditFilterProps (renderOpts: any, params: VxeGlobalRendererHandles.RenderEditParams | VxeGlobalRendererHandles.RenderFilterParams, value: any, defaultProps?: { [prop: string]: any }) {
+  return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
+}
+
+function getItemProps (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: FormItemContentRenderParams, value: any, defaultProps?: { [prop: string]: any }) {
+  return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
+}
+
+function formatText (cellValue: any) {
+  return '' + (isEmptyValue(cellValue) ? '' : cellValue)
+}
+
+function getCellLabelVNs (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams, cellLabel: any) {
+  const { placeholder } = renderOpts
+  return [
+    h('span', {
+      class: 'vxe-cell--label'
+    }, placeholder && isEmptyValue(cellLabel)
+      ? [
+          h('span', {
+            class: 'vxe-cell--placeholder'
+          }, formatText(placeholder))
+        ]
+      : formatText(cellLabel))
+  ]
+}
+
+function getOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderParams, inputFunc?: Function, changeFunc?: Function) {
+  const { events } = renderOpts
+  const modelEvent = getModelEvent(renderOpts)
+  const changeEvent = getChangeEvent(renderOpts)
+  const isSameEvent = changeEvent === modelEvent
+  const ons: { [type: string]: Function } = {}
+  XEUtils.objectEach(events, (func: Function, key: string) => {
+    ons[getOnName(key)] = function (...args: any[]) {
+      func(params, ...args)
+    }
+  })
+  if (inputFunc) {
+    ons[getOnName(modelEvent)] = function (targetEvnt: any) {
+      inputFunc(targetEvnt)
+      if (events && events[modelEvent]) {
+        events[modelEvent](params, targetEvnt)
+      }
+      if (isSameEvent && changeFunc) {
+        changeFunc(targetEvnt)
+      }
+    }
+  }
+  if (!isSameEvent && changeFunc) {
+    ons[getOnName(changeEvent)] = function (...args: any[]) {
+      changeFunc(...args)
+      if (events && events[changeEvent]) {
+        events[changeEvent](params, ...args)
+      }
+    }
+  }
+  return ons
+}
+
+function getEditOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderEditParams) {
+  const { $table, row, column } = params
+  return getOns(renderOpts, params, (value: any) => {
+    // 处理 model 值双向绑定
+    XEUtils.set(row, column.field, value)
+  }, () => {
+    // 处理 change 事件相关逻辑
+    $table.updateStatus(params)
+  })
+}
+
+function getFilterOns (renderOpts: any, params: VxeGlobalRendererHandles.RenderFilterParams, option: VxeTableDefines.FilterOption, changeFunc: Function) {
+  return getOns(renderOpts, params, (value: any) => {
+    // 处理 model 值双向绑定
+    option.data = value
+  }, changeFunc)
+}
+
+function getItemOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: FormItemContentRenderParams) {
+  const { $form, data, field } = params
+  return getOns(renderOpts, params, (value: any) => {
+    // 处理 model 值双向绑定
+    XEUtils.set(data, field, value)
+  }, () => {
+    // 处理 change 事件相关逻辑
+    $form.updateStatus(params)
+  })
+}
+
+function matchCascaderData (index: number, list: any[], values: any[], labels: any[]) {
+  const val = values[index]
+  if (list && values.length > index) {
+    XEUtils.each(list, (item) => {
+      if (item.value === val) {
+        labels.push(item.label)
+        matchCascaderData(++index, item.children, values, labels)
+      }
+    })
+  }
+}
+
+function formatDatePicker (defaultFormat: string) {
+  return function (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams) {
+    return getCellLabelVNs(renderOpts, params, getDatePickerCellValue(renderOpts, params, defaultFormat))
+  }
+}
+
+function getSelectCellValue (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams) {
+  const { options = [], optionGroups, props = {}, optionProps = {}, optionGroupProps = {} } = renderOpts
+  const { row, column } = params
+  const labelProp = optionProps.label || 'label'
+  const valueProp = optionProps.value || 'value'
+  const groupOptions = optionGroupProps.options || 'options'
+  const cellValue = XEUtils.get(row, column.field)
+  if (!isEmptyValue(cellValue)) {
+    return XEUtils.map(props.mode === 'multiple' ? cellValue : [cellValue], optionGroups
+      ? (value) => {
+          let selectItem
+          for (let index = 0; index < optionGroups.length; index++) {
+            selectItem = XEUtils.find(optionGroups[index][groupOptions], (item) => item[valueProp] === value)
+            if (selectItem) {
+              break
+            }
+          }
+          return selectItem ? selectItem[labelProp] : value
+        }
+      : (value) => {
+          const selectItem = XEUtils.find(options, (item) => item[valueProp] === value)
+          return selectItem ? selectItem[labelProp] : value
+        }).join(', ')
+  }
+  return ''
+}
+
+function getCascaderCellValue (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams) {
+  const { props = {} } = renderOpts
+  const { row, column } = params
+  const cellValue = XEUtils.get(row, column.field)
+  const values = cellValue || []
+  const labels: Array<any> = []
+  matchCascaderData(0, props.options, values, labels)
+  return (props.showAllLevels === false ? labels.slice(labels.length - 1, labels.length) : labels).join(` ${props.separator || '/'} `)
+}
+
+function getRangePickerCellValue (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.RenderEditParams) {
+  const { props = {} } = renderOpts
+  const { row, column } = params
+  let cellValue = XEUtils.get(row, column.field)
+  if (cellValue) {
+    cellValue = XEUtils.map(cellValue, (date: any) => {
+      return date && date.format ? date.format(props.format || 'YYYY-MM-DD') : XEUtils.toDateString(date, dateFormatToVxeFormat(props.format || 'YYYY-MM-DD'))
+    }).join(' ~ ')
+  }
+  return cellValue
+}
+
+function getTreeSelectCellValue (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.RenderEditParams) {
+  const { props = {} } = renderOpts
+  const { treeData, treeCheckable } = props
+  const { row, column } = params
+  const cellValue = XEUtils.get(row, column.field)
+  if (!isEmptyValue(cellValue)) {
+    return XEUtils.map(treeCheckable ? cellValue : [cellValue], (value) => {
+      const matchObj = XEUtils.findTree(treeData, (item: any) => item.value === value, { children: 'children' })
+      return matchObj ? matchObj.item.title : value
+    }).join(', ')
+  }
+  return cellValue
+}
+
+function getDatePickerCellValue (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams, defaultFormat: string) {
+  const { props = {} } = renderOpts
+  const { row, column } = params
+  let cellValue = XEUtils.get(row, column.field)
+  if (cellValue) {
+    cellValue = cellValue.format ? cellValue.format(props.format || defaultFormat) : XEUtils.toDateString(cellValue, dateFormatToVxeFormat(props.format || defaultFormat))
+  }
+  return cellValue
+}
+
+function createEditRender (defaultProps?: { [key: string]: any }) {
+  return function (renderOpts: VxeColumnPropTypes.EditRender & { name: string }, params: VxeGlobalRendererHandles.RenderEditParams) {
+    const { row, column } = params
+    const { name, attrs } = renderOpts
+    const cellValue = XEUtils.get(row, column.field)
+    return [
+      h(resolveComponent(name), {
+        ...attrs,
+        ...getCellEditFilterProps(renderOpts, params, cellValue, defaultProps),
+        ...getEditOns(renderOpts, params)
+      })
+    ]
+  }
+}
+
+function defaultButtonEditRender (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderEditParams) {
+  const { attrs } = renderOpts
+  return [
+    h(resolveComponent('a-button'), {
+      ...attrs,
+      ...getCellEditFilterProps(renderOpts, params, null),
+      ...getOns(renderOpts, params)
+    }, cellText(renderOpts.content))
+  ]
+}
+
+function defaultButtonsEditRender (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderEditParams) {
+  const { children } = renderOpts
+  if (children) {
+    return children.map((childRenderOpts: VxeColumnPropTypes.EditRender) => defaultButtonEditRender(childRenderOpts, params)[0])
+  }
+  return []
+}
+
+function createFilterRender (defaultProps?: { [key: string]: any }) {
+  return function (renderOpts: VxeColumnPropTypes.FilterRender & { name: string }, params: VxeGlobalRendererHandles.RenderFilterParams) {
+    const { column } = params
+    const { name, attrs } = renderOpts
+    return [
+      h('div', {
+        class: 'vxe-table--filter-antd-wrapper'
+      }, column.filters.map((option, oIndex) => {
+        const optionValue = option.data
+        return h(resolveComponent(name), {
+          key: oIndex,
+          ...attrs,
+          ...getCellEditFilterProps(renderOpts, params, optionValue, defaultProps),
+          ...getFilterOns(renderOpts, params, option, () => {
+            // 处理 change 事件相关逻辑
+            handleConfirmFilter(params, !!option.data, option)
+          })
+        })
+      }))
+    ]
+  }
+}
+
+function handleConfirmFilter (params: VxeGlobalRendererHandles.RenderFilterParams, checked: boolean, option: VxeTableDefines.FilterOption) {
+  const { $panel } = params
+  $panel.changeOption(null, checked, option)
+}
+
+/**
+ * 模糊匹配
+ * @param params
+ */
+function defaultFuzzyFilterMethod (params: VxeGlobalRendererHandles.FilterMethodParams) {
+  const { option, row, column } = params
+  const { data } = option
+  const cellValue = XEUtils.get(row, column.field)
+  return XEUtils.toValueString(cellValue).indexOf(data) > -1
+}
+
+/**
+ * 精确匹配
+ * @param params
+ */
+function defaultExactFilterMethod (params: VxeGlobalRendererHandles.FilterMethodParams) {
+  const { option, row, column } = params
+  const { data } = option
+  const cellValue = XEUtils.get(row, column.field)
+  /* eslint-disable eqeqeq */
+  return cellValue === data
+}
+
+function cellText (cellValue: any): string[] {
+  return [formatText(cellValue)]
+}
+
+function renderOptions (options: any[], optionProps: VxeGlobalRendererHandles.RenderOptionProps) {
+  const labelProp = optionProps.label || 'label'
+  const valueProp = optionProps.value || 'value'
+  return XEUtils.map(options, (item, oIndex) => {
+    return h(resolveComponent('a-select-option') as ComponentOptions, {
+      key: oIndex,
+      value: item[valueProp],
+      disabled: item.disabled
+    }, {
+      default: () => cellText(item[labelProp])
+    })
+  })
+}
+
+function createFormItemRender (defaultProps?: { [key: string]: any }) {
+  return function (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: FormItemContentRenderParams) {
+    const { data, field } = params
+    const { name } = renderOpts
+    const { attrs } = renderOpts
+    const itemValue = XEUtils.get(data, field)
+    return [
+      h(resolveComponent(name), {
+        ...attrs,
+        ...getItemProps(renderOpts, params, itemValue, defaultProps),
+        ...getItemOns(renderOpts, params)
+      })
+    ]
+  }
+}
+
+function defaultButtonItemRender (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: FormItemContentRenderParams) {
+  const { attrs } = renderOpts
+  const props = getItemProps(renderOpts, params, null)
+  return [
+    h(resolveComponent('a-button') as ComponentOptions, {
+      ...attrs,
+      ...props,
+      ...getItemOns(renderOpts, params)
+    }, {
+      default: () => cellText(renderOpts.content || props.content)
+    })
+  ]
+}
+
+function defaultButtonsItemRender (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: FormItemContentRenderParams) {
+  const { children } = renderOpts
+  if (children) {
+    return children.map((childRenderOpts: VxeGlobalRendererHandles.RenderItemContentOptions) => defaultButtonItemRender(childRenderOpts, params)[0])
+  }
+  return []
+}
+
+function createDatePickerExportMethod (defaultFormat: string) {
+  return function (params: VxeGlobalRendererHandles.ExportMethodParams) {
+    const { row, column, options } = params
+    return options && options.original ? XEUtils.get(row, column.field) : getDatePickerCellValue(column.editRender || column.cellRender, params, defaultFormat)
+  }
+}
+
+function createExportMethod (getExportCellValue: Function) {
+  return function (params: VxeGlobalRendererHandles.ExportMethodParams) {
+    const { row, column, options } = params
+    return options && options.original ? XEUtils.get(row, column.field) : getExportCellValue(column.editRender || column.cellRender, params)
+  }
+}
+
+function createFormItemRadioAndCheckboxRender () {
+  return function (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: FormItemContentRenderParams) {
+    const { name, options = [], optionProps = {} } = renderOpts
+    const { data, field } = params
+    const { attrs } = renderOpts
+    const labelProp = optionProps.label || 'label'
+    const valueProp = optionProps.value || 'value'
+    const itemValue = XEUtils.get(data, field)
+    return [
+      h(resolveComponent(`${name}Group`) as ComponentOptions, {
+        ...attrs,
+        ...getItemProps(renderOpts, params, itemValue),
+        ...getItemOns(renderOpts, params)
+      }, {
+        default: () => {
+          return options.map((option, oIndex) => {
+            return h(resolveComponent(name) as ComponentOptions, {
+              key: oIndex,
+              value: option[valueProp],
+              disabled: option.disabled
+            }, {
+              default: () => cellText(option[labelProp])
+            })
+          })
+        }
+      })
+    ]
+  }
+}
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+  let targetElem
+  let target = evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+  const { $event } = params
+  const bodyElem = document.body
+  if (
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'ant-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'ant-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'ant-picker-dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'ant-calendar-picker-container').flag ||
+    // 时间选择
+    getEventTargetNode($event, bodyElem, 'ant-time-picker-panel').flag
+  ) {
+    return false
+  }
+}
+
+export const VxeUIPluginRenderAntd = {
+  install (core: VxeUIExport, options?: {
+    Antd?: any
+  }) {
+    VxeUI = core
+    Antd = options ? options.Antd : {}
+
+    // 检查版本
+    if (!/^(4)\./.test(VxeUI.uiVersion)) {
+      console.error('[plugin-render-antd 4.x] Version 4.x is required')
+    }
+
+    VxeUI.renderer.mixin({
+      AAutoComplete: {
+        autofocus: 'input.ant-input',
+        renderDefault: createEditRender(),
+        renderEdit: createEditRender(),
+        renderFilter: createFilterRender(),
+        defaultFilterMethod: defaultExactFilterMethod,
+        renderItemContent: createFormItemRender()
+      },
+      AInput: {
+        autofocus: 'input.ant-input',
+        renderDefault: createEditRender(),
+        renderEdit: createEditRender(),
+        renderFilter: createFilterRender(),
+        defaultFilterMethod: defaultFuzzyFilterMethod,
+        renderItemContent: createFormItemRender()
+      },
+      AInputNumber: {
+        autofocus: 'input.ant-input-number-input',
+        renderDefault: createEditRender(),
+        renderEdit: createEditRender(),
+        renderFilter: createFilterRender(),
+        defaultFilterMethod: defaultFuzzyFilterMethod,
+        renderItemContent: createFormItemRender()
+      },
+      ASelect: {
+        renderEdit (renderOpts, params) {
+          const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
+          const { row, column } = params
+          const { attrs } = renderOpts
+          const cellValue = XEUtils.get(row, column.field)
+          const props = getCellEditFilterProps(renderOpts, params, cellValue)
+          const ons = getEditOns(renderOpts, params)
+          if (optionGroups) {
+            const groupOptions = optionGroupProps.options || 'options'
+            const groupLabel = optionGroupProps.label || 'label'
+            return [
+              h(resolveComponent('a-select') as ComponentOptions, {
+                ...props,
+                ...attrs,
+                ...ons
+              }, {
+                default: () => {
+                  return XEUtils.map(optionGroups, (group, gIndex) => {
+                    return h(resolveComponent('a-select-opt-group') as ComponentOptions, {
+                      key: gIndex
+                    }, {
+                      label: () => {
+                        return h('span', {}, group[groupLabel])
+                      },
+                      default: () => renderOptions(group[groupOptions], optionProps)
+                    })
+                  })
+                }
+              })
+            ]
+          }
+          return [
+            h(resolveComponent('a-select') as ComponentOptions, {
+              ...props,
+              ...attrs,
+              ...ons
+            }, {
+              default: () => renderOptions(options, optionProps)
+            })
+          ]
+        },
+        renderCell (renderOpts, params) {
+          return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
+        },
+        renderFilter (renderOpts, params) {
+          const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
+          const groupOptions = optionGroupProps.options || 'options'
+          const groupLabel = optionGroupProps.label || 'label'
+          const { column } = params
+          const { attrs } = renderOpts
+          return [
+            h('div', {
+              class: 'vxe-table--filter-antd-wrapper'
+            }, optionGroups
+              ? column.filters.map((option, oIndex) => {
+                const optionValue = option.data
+                const props = getCellEditFilterProps(renderOpts, params, optionValue)
+                return h(resolveComponent('a-select') as ComponentOptions, {
+                  key: oIndex,
+                  ...attrs,
+                  ...props,
+                  ...getFilterOns(renderOpts, params, option, () => {
+                    // 处理 change 事件相关逻辑
+                    handleConfirmFilter(params, props.mode === 'multiple' ? (option.data && option.data.length > 0) : !XEUtils.eqNull(option.data), option)
+                  })
+                }, {
+                  default: () => {
+                    return XEUtils.map(optionGroups, (group, gIndex) => {
+                      return h(resolveComponent('a-select-opt-group') as ComponentOptions, {
+                        key: gIndex
+                      }, {
+                        label: () => {
+                          return h('span', {}, group[groupLabel])
+                        },
+                        default: () => renderOptions(group[groupOptions], optionProps)
+                      })
+                    })
+                  }
+                })
+              })
+              : column.filters.map((option, oIndex) => {
+                const optionValue = option.data
+                const props = getCellEditFilterProps(renderOpts, params, optionValue)
+                return h(resolveComponent('a-select') as ComponentOptions, {
+                  key: oIndex,
+                  ...attrs,
+                  ...props,
+                  ...getFilterOns(renderOpts, params, option, () => {
+                    // 处理 change 事件相关逻辑
+                    handleConfirmFilter(params, props.mode === 'multiple' ? (option.data && option.data.length > 0) : !XEUtils.eqNull(option.data), option)
+                  })
+                }, {
+                  default: () => renderOptions(options, optionProps)
+                })
+              }))
+          ]
+        },
+        defaultFilterMethod (params) {
+          const { option, row, column } = params
+          const { data } = option
+          const { field, filterRender: renderOpts } = column
+          const { props = {} } = renderOpts
+          const cellValue = XEUtils.get(row, field)
+          if (props.mode === 'multiple') {
+            if (XEUtils.isArray(cellValue)) {
+              return XEUtils.includeArrays(cellValue, data)
+            }
+            return data.indexOf(cellValue) > -1
+          }
+          /* eslint-disable eqeqeq */
+          return cellValue == data
+        },
+        renderItemContent (renderOpts, params) {
+          const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
+          const { data, field } = params
+          const { attrs } = renderOpts
+          const itemValue = XEUtils.get(data, field)
+          const props = getItemProps(renderOpts, params, itemValue)
+          const ons = getItemOns(renderOpts, params)
+          if (optionGroups) {
+            const groupOptions = optionGroupProps.options || 'options'
+            const groupLabel = optionGroupProps.label || 'label'
+            return [
+              h(resolveComponent('a-select') as ComponentOptions, {
+                ...attrs,
+                ...props,
+                ...ons
+              }, {
+                default: () => {
+                  return XEUtils.map(optionGroups, (group, gIndex) => {
+                    return h(resolveComponent('a-select-opt-group') as ComponentOptions, {
+                      key: gIndex
+                    }, {
+                      label: () => {
+                        return h('span', {}, group[groupLabel])
+                      },
+                      default: () => renderOptions(group[groupOptions], optionProps)
+                    })
+                  })
+                }
+              })
+            ]
+          }
+          return [
+            h(resolveComponent('a-select') as ComponentOptions, {
+              ...attrs,
+              ...props,
+              ...ons
+            }, {
+              default: () => renderOptions(options, optionProps)
+            })
+          ]
+        },
+        exportMethod: createExportMethod(getSelectCellValue)
+      },
+      ACascader: {
+        renderEdit: createEditRender(),
+        renderCell (renderOpts, params) {
+          return getCellLabelVNs(renderOpts, params, getCascaderCellValue(renderOpts, params))
+        },
+        renderItemContent: createFormItemRender(),
+        exportMethod: createExportMethod(getCascaderCellValue)
+      },
+      ADatePicker: {
+        renderEdit: createEditRender(),
+        renderCell: formatDatePicker('YYYY-MM-DD'),
+        renderItemContent: createFormItemRender(),
+        exportMethod: createDatePickerExportMethod('YYYY-MM-DD')
+      },
+      AMonthPicker: {
+        renderEdit: createEditRender(),
+        renderCell: formatDatePicker('YYYY-MM'),
+        renderItemContent: createFormItemRender(),
+        exportMethod: createDatePickerExportMethod('YYYY-MM')
+      },
+      ARangePicker: {
+        renderEdit: createEditRender(),
+        renderCell (renderOpts, params) {
+          return getCellLabelVNs(renderOpts, params, getRangePickerCellValue(renderOpts, params))
+        },
+        renderItemContent: createFormItemRender(),
+        exportMethod: createExportMethod(getRangePickerCellValue)
+      },
+      AWeekPicker: {
+        renderEdit: createEditRender(),
+        renderCell: formatDatePicker('YYYY-WW周'),
+        renderItemContent: createFormItemRender(),
+        exportMethod: createDatePickerExportMethod('YYYY-WW周')
+      },
+      ATimePicker: {
+        renderEdit: createEditRender(),
+        renderCell: formatDatePicker('HH:mm:ss'),
+        renderItemContent: createFormItemRender(),
+        exportMethod: createDatePickerExportMethod('HH:mm:ss')
+      },
+      ATreeSelect: {
+        renderEdit: createEditRender(),
+        renderCell (renderOpts, params) {
+          return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params))
+        },
+        renderItemContent: createFormItemRender(),
+        exportMethod: createExportMethod(getTreeSelectCellValue)
+      },
+      ARate: {
+        renderDefault: createEditRender(),
+        renderEdit: createEditRender(),
+        renderFilter: createFilterRender(),
+        defaultFilterMethod: defaultExactFilterMethod,
+        renderItemContent: createFormItemRender()
+      },
+      ASwitch: {
+        renderDefault: createEditRender(),
+        renderEdit: createEditRender(),
+        renderFilter (renderOpts, params) {
+          const { column } = params
+          const { name, attrs } = renderOpts
+          return [
+            h('div', {
+              class: 'vxe-table--filter-antd-wrapper'
+            }, column.filters.map((option, oIndex) => {
+              const optionValue = option.data
+              return h(name as string, {
+                key: oIndex,
+                ...attrs,
+                ...getCellEditFilterProps(renderOpts, params, optionValue),
+                ...getFilterOns(renderOpts, params, option, () => {
+                  // 处理 change 事件相关逻辑
+                  handleConfirmFilter(params, XEUtils.isBoolean(option.data), option)
+                })
+              })
+            }))
+          ]
+        },
+        defaultFilterMethod: defaultExactFilterMethod,
+        renderItemContent: createFormItemRender()
+      },
+      ARadio: {
+        renderItemContent: createFormItemRadioAndCheckboxRender()
+      },
+      ACheckbox: {
+        renderItemContent: createFormItemRadioAndCheckboxRender()
+      },
+      AButton: {
+        renderEdit: defaultButtonEditRender,
+        renderDefault: defaultButtonEditRender,
+        renderItemContent: defaultButtonItemRender
+      },
+      AButtons: {
+        renderEdit: defaultButtonsEditRender,
+        renderDefault: defaultButtonsEditRender,
+        renderItemContent: defaultButtonsItemRender
+      }
+    })
+
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+  }
+}
+
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderAntd)
+}
+
+export default VxeUIPluginRenderAntd

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@vxe-ui/plugin-render-antd",
+  "version": "4.0.0",
+  "description": "Vxe UI plug-in for compatibility with the ant-design-vue component.",
+  "scripts": {
+    "lib": "gulp build"
+  },
+  "files": [
+    "types",
+    "dist",
+    "*.ts",
+    "*.d.ts"
+  ],
+  "main": "dist/index.common.js",
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+  "style": "dist/style.css",
+  "typings": "types/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/runtime": "^7.12.5",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
+    "del": "^6.0.0",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-standard": "^16.0.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.2",
+    "eslint-plugin-typescript": "^0.14.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-sass": "^5.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-typescript": "^5.0.1",
+    "gulp-uglify": "^3.0.2",
+    "markdown-doctest": "^1.1.0",
+    "prettier": "^2.1.2",
+    "sass": "^1.55.0",
+    "typescript": "^4.6.4",
+    "vue": "^3.4.27",
+    "vxe-pc-ui": "^4.0.23",
+    "vxe-table": "^4.7.25"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/x-extends/vxe-ui-plugins.git"
+  },
+  "keywords": [
+    "vxe-ui-plugins"
+  ],
+  "author": {
+    "name": "Xu Liangzhan",
+    "email": "xu_liangzhan@163.com"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/x-extends/vxe-ui-plugins/issues"
+  },
+  "homepage": "https://github.com/x-extends/vxe-ui-plugins#readme"
+}

package/types/index.d.ts

@@ -0,0 +1,12 @@
+import { VxeUIExport } from 'vxe-pc-ui'
+
+/**
+ * 基于 Vxe UI 的适配插件，用于兼容 ant-design-vue 组件库
+ */
+export declare const VxeUIPluginRenderAntd: {
+  install (VxeUI: VxeUIExport, options?: {
+    Antd?: any
+  }): void
+}
+
+export default VxeUIPluginRenderAntd