vxe-pc-ui 4.11.43 → 4.11.45

package/packages/date-range-picker/src/date-range-picker.ts

@@ -117,6 +117,7 @@ export default defineVxeComponent({
       default: null
     },
 
+    popupConfig: Object as PropType<VxeDateRangePickerPropTypes.PopupConfig>,
     shortcutConfig: Object as PropType<VxeDateRangePickerPropTypes.ShortcutConfig>
   },
   emits: [
@@ -195,6 +196,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().dateRangePicker.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -292,6 +297,10 @@ export default defineVxeComponent({
       return immediate
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().dateRangePicker.popupConfig, props.popupConfig)
+    })
+
     const computeShortcutOpts = computed(() => {
       return Object.assign({}, getConfig().dateRangePicker.shortcutConfig, props.shortcutConfig)
     })
@@ -718,9 +727,10 @@ export default defineVxeComponent({
 
     // 弹出面板
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -732,9 +742,10 @@ export default defineVxeComponent({
       const targetElem = refInputTarget.value
       const panelElem = refInputPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -917,6 +928,7 @@ export default defineVxeComponent({
       const isDateTimeType = computeIsDateTimeType.value
       const defaultDates = computeDefaultDates.value
       const defaultTimes = computeDefaultTimes.value
+      const popupOpts = computePopupOpts.value
       const { startLabel, endLabel } = panelLabelObj
       const { position } = shortcutOpts
       const headerSlot = slots.header
@@ -925,6 +937,7 @@ export default defineVxeComponent({
       const bottomSlot = slots.bottom
       const leftSlot = slots.left
       const rightSlot = slots.right
+      const ppClassName = popupOpts.className
       const [sdDate, edDate] = defaultDates
       const [sdTime, edTime] = defaultTimes
       const hasShortcutBtn = shortcutList.length > 0
@@ -936,7 +949,7 @@ export default defineVxeComponent({
       }, [
         h('div', {
           ref: refInputPanel,
-          class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, {
+          class: ['vxe-table--ignore-clear vxe-date-range-picker--panel', `type--${type}`, ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $dateRangePicker: $xeDateRangePicker }) : ppClassName) : '', {
             [`size--${vSize}`]: vSize,
             'is--transfer': btnTransfer,
             'ani--leave': isAniVisible,

package/packages/icon-picker/src/icon-picker.ts

@@ -2,7 +2,7 @@ import { h, Teleport, PropType, ref, inject, watch, computed, provide, onUnmount
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
-import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom'
+import { getEventTargetNode, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 
@@ -20,6 +20,10 @@ export default defineVxeComponent({
       default: () => getConfig().iconPicker.size || getConfig().size
     },
     className: [String, Function] as PropType<VxeIconPickerPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxeIconPickerPropTypes.PopupClassName>,
     showIconTitle: {
       type: Boolean as PropType<VxeIconPickerPropTypes.ShowIconTitle>,
@@ -35,6 +39,7 @@ export default defineVxeComponent({
     },
     icons: Array as PropType<VxeIconPickerPropTypes.Icons>,
     placement: String as PropType<VxeIconPickerPropTypes.Placement>,
+    popupConfig: Object as PropType<VxeIconPickerPropTypes.PopupConfig>,
     transfer: {
       type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
       default: null
@@ -116,6 +121,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().iconPicker.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -160,6 +169,10 @@ export default defineVxeComponent({
       })
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().iconPicker.popupConfig, props.popupConfig)
+    })
+
     const computeIconGroupList = computed(() => {
       const iconList = computeIconList.value
       return XEUtils.chunk(iconList, 4)
@@ -178,74 +191,25 @@ export default defineVxeComponent({
     }
 
     const updatePlacement = () => {
-      return nextTick().then(() => {
-        const { placement } = props
-        const { panelIndex } = reactData
-        const el = refElem.value
-        const panelElem = refOptionPanel.value
-        const btnTransfer = computeBtnTransfer.value
-        if (panelElem && el) {
-          const targetHeight = el.offsetHeight
-          const targetWidth = el.offsetWidth
-          const panelHeight = panelElem.offsetHeight
-          const panelWidth = panelElem.offsetWidth
-          const marginSize = 5
-          const panelStyle: { [key: string]: any } = {
-            zIndex: panelIndex
-          }
-          const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(el)
-          let panelPlacement = 'bottom'
-          if (btnTransfer) {
-            let left = boundingLeft
-            let top = boundingTop + targetHeight
-            if (placement === 'top') {
-              panelPlacement = 'top'
-              top = boundingTop - panelHeight
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (top + panelHeight + marginSize > visibleHeight) {
-                panelPlacement = 'top'
-                top = boundingTop - panelHeight
-              }
-              // 如果上面不够放，则向下（优先）
-              if (top < marginSize) {
-                panelPlacement = 'bottom'
-                top = boundingTop + targetHeight
-              }
-            }
-            // 如果溢出右边
-            if (left + panelWidth + marginSize > visibleWidth) {
-              left -= left + panelWidth + marginSize - visibleWidth
-            }
-            // 如果溢出左边
-            if (left < marginSize) {
-              left = marginSize
-            }
-            Object.assign(panelStyle, {
-              left: `${left}px`,
-              top: `${top}px`,
-              minWidth: `${targetWidth}px`
-            })
-          } else {
-            if (placement === 'top') {
-              panelPlacement = 'top'
-              panelStyle.bottom = `${targetHeight}px`
-            } else if (!placement) {
-              // 如果下面不够放，则向上
-              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
-                // 如果上面不够放，则向下（优先）
-                if (boundingTop - targetHeight - panelHeight > marginSize) {
-                  panelPlacement = 'top'
-                  panelStyle.bottom = `${targetHeight}px`
-                }
-              }
-            }
-          }
-          reactData.panelStyle = panelStyle
-          reactData.panelPlacement = panelPlacement
-          return nextTick()
-        }
-      })
+      const { placement } = props
+      const { panelIndex } = reactData
+      const targetElem = refElem.value
+      const panelElem = refOptionPanel.value
+      const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
+      const handleStyle = () => {
+        const ppObj = updatePanelPlacement(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          teleportTo: btnTransfer
+        })
+        const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        })
+        reactData.panelStyle = panelStyle
+        reactData.panelPlacement = ppObj.placement
+      }
+      handleStyle()
+      return nextTick().then(handleStyle)
     }
 
     const showOptionPanel = () => {
@@ -535,13 +499,15 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { className, popupClassName, clearable } = props
+      const { className, clearable } = props
       const { initialized, isActivated, isAniVisible, visiblePanel, selectIcon } = reactData
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
       const btnTransfer = computeBtnTransfer.value
       const formReadonly = computeFormReadonly.value
       const inpPlaceholder = computeInpPlaceholder.value
+      const popupOpts = computePopupOpts.value
+      const ppClassName = popupOpts.className || props.popupClassName
 
       if (formReadonly) {
         return h('div', {
@@ -604,7 +570,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-ico-picker--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $iconPicker: $xeIconPicker }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-ico-picker--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $iconPicker: $xeIconPicker }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': isAniVisible,

package/packages/pulldown/src/pulldown.ts

@@ -18,6 +18,10 @@ export default defineVxeComponent({
       type: String as PropType<VxePulldownPropTypes.Trigger>,
       default: getConfig().pulldown.trigger
     },
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxePulldownPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxePulldownPropTypes.Size>,
@@ -28,8 +32,13 @@ export default defineVxeComponent({
       type: [String, Function] as PropType<VxePulldownPropTypes.ClassName>,
       default: getConfig().pulldown.className
     },
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxePulldownPropTypes.PopupClassName>,
     showPopupShadow: Boolean as PropType<VxePulldownPropTypes.ShowPopupShadow>,
+    popupConfig: Object as PropType<VxePulldownPropTypes.PopupConfig>,
     destroyOnClose: {
       type: Boolean as PropType<VxePulldownPropTypes.DestroyOnClose>,
       default: getConfig().pulldown.destroyOnClose
@@ -79,6 +88,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().pulldown.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -91,6 +104,10 @@ export default defineVxeComponent({
       return transfer
     })
 
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().pulldown.popupConfig, props.popupConfig)
+    })
+
     const refMaps: PulldownPrivateRef = {
       refElem
     }
@@ -107,9 +124,10 @@ export default defineVxeComponent({
     let pulldownMethods = {} as PulldownMethods
 
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -128,9 +146,10 @@ export default defineVxeComponent({
       const targetElem = refPulldownContent.value
       const panelElem = refPulldownPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -338,14 +357,16 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { className, options, popupClassName, showPopupShadow, destroyOnClose, disabled } = props
+      const { className, options, showPopupShadow, destroyOnClose, disabled } = props
       const { initialized, isActivated, isAniVisible, visiblePanel, panelStyle, panelPlacement } = reactData
       const btnTransfer = computeBtnTransfer.value
       const vSize = computeSize.value
+      const popupOpts = computePopupOpts.value
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const dropdownSlot = slots.dropdown
+      const ppClassName = popupOpts.className || props.popupClassName
 
       return h('div', {
         ref: refElem,
@@ -367,7 +388,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refPulldownPanel,
-            class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xePulldown }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-pulldown--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $pulldown: $xePulldown }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': isAniVisible,

package/packages/select/src/select.ts

@@ -80,18 +80,31 @@ export default defineVxeComponent({
     optionGroupProps: Object as PropType<VxeSelectPropTypes.OptionGroupProps>,
     optionConfig: Object as PropType<VxeSelectPropTypes.OptionConfig>,
     className: [String, Function] as PropType<VxeSelectPropTypes.ClassName>,
+    /**
+     * 已废弃，请使用 popupConfig.className
+     * @deprecated
+     */
     popupClassName: [String, Function] as PropType<VxeSelectPropTypes.PopupClassName>,
     max: {
       type: [String, Number] as PropType<VxeSelectPropTypes.Max>,
       default: null
     },
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxeSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeSelectPropTypes.Size>,
       default: () => getConfig().select.size || getConfig().size
     },
     filterable: Boolean as PropType<VxeSelectPropTypes.Filterable>,
+    /**
+     * 已废弃，被 filter-config.filterMethod 替换
+     * @deprecated
+     */
     filterMethod: Function as PropType<VxeSelectPropTypes.FilterMethod>,
+    filterConfig: Object as PropType<VxeSelectPropTypes.FilterConfig>,
     remote: Boolean as PropType<VxeSelectPropTypes.Remote>,
     remoteConfig: Object as PropType<VxeSelectPropTypes.RemoteConfig>,
     emptyText: String as PropType<VxeSelectPropTypes.EmptyText>,
@@ -227,6 +240,10 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
         const globalTransfer = getConfig().select.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
@@ -288,7 +305,7 @@ export default defineVxeComponent({
     })
 
     const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().treeSelect.popupConfig, props.popupConfig)
+      return Object.assign({}, getConfig().select.popupConfig, props.popupConfig)
     })
 
     const computeVirtualYOpts = computed(() => {
@@ -299,6 +316,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().select.remoteConfig, props.remoteConfig)
     })
 
+    const computeFilterOpts = computed(() => {
+      return Object.assign({}, getConfig().select.filterConfig, props.filterConfig)
+    })
+
     const computeOptionOpts = computed(() => {
       return Object.assign({}, getConfig().select.optionConfig, props.optionConfig)
     })
@@ -481,18 +502,20 @@ export default defineVxeComponent({
      * 处理选项，当选项被动态显示/隐藏时可能会用到
      */
     const handleOption = () => {
-      const { remote, modelValue, filterable, filterMethod } = props
+      const { remote, modelValue, filterable } = props
       const { searchValue } = reactData
       const { fullData, optFullValMaps } = internalData
       const labelField = computeLabelField.value
       const valueField = computeValueField.value
+      const filterOpts = computeFilterOpts.value
+      const frMethod = filterOpts.filterMethod || props.filterMethod
       const searchStr = `${searchValue || ''}`.toLowerCase()
       let avList: any[] = []
       if (remote) {
         avList = fullData.filter(isOptionVisible)
       } else {
-        if (filterable && filterMethod) {
-          avList = fullData.filter(option => isOptionVisible(option) && filterMethod({ $select: $xeSelect, group: null, option, searchValue, value: modelValue }))
+        if (filterable && frMethod) {
+          avList = fullData.filter(option => isOptionVisible(option) && frMethod({ $select: $xeSelect, group: null, option, searchValue, value: modelValue }))
         } else if (filterable) {
           avList = fullData.filter(option => isOptionVisible(option) && (!searchStr || `${option[labelField] || option[valueField]}`.toLowerCase().indexOf(searchStr) > -1))
         } else {
@@ -516,9 +539,10 @@ export default defineVxeComponent({
     }
 
     const updateZIndex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -530,9 +554,10 @@ export default defineVxeComponent({
       const targetElem = refElem.value
       const panelElem = refOptionPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -575,7 +600,7 @@ export default defineVxeComponent({
         reactData.isActivated = true
         reactData.isAniVisible = true
         if (filterable) {
-          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
+          if (remote && remoteOpts.enabled && ((remoteOpts.autoLoad && !fullData.length) || (fullData.length && remoteOpts.clearOnClose))) {
             handleSearchEvent()
           } else {
             handleOption()
@@ -600,7 +625,20 @@ export default defineVxeComponent({
     }
 
     const hideOptionPanel = () => {
-      reactData.searchValue = ''
+      const { filterable, remote } = props
+      const filterOpts = computeFilterOpts.value
+      const remoteOpts = computeRemoteOpts.value
+      if (remote) {
+        if (remoteOpts.clearOnClose) {
+          reactData.searchValue = ''
+        }
+      } else if (filterable) {
+        if (filterOpts.clearOnClose) {
+          reactData.searchValue = ''
+        }
+      } else {
+        reactData.searchValue = ''
+      }
       reactData.searchLoading = false
       reactData.visiblePanel = false
       internalData.hpTimeout = setTimeout(() => {
@@ -918,14 +956,14 @@ export default defineVxeComponent({
     }
 
     const handleSearchEvent = () => {
-      const { modelValue, remote, remoteMethod } = props
+      const { modelValue, remote } = props
       const { searchValue } = reactData
       const remoteOpts = computeRemoteOpts.value
-      const queryMethod = remoteOpts.queryMethod || remoteMethod
-      if (remote && queryMethod && remoteOpts.enabled) {
+      const qyMethod = remoteOpts.queryMethod || props.remoteMethod
+      if (remote && qyMethod && remoteOpts.enabled) {
         reactData.searchLoading = true
         Promise.resolve(
-          queryMethod({ $select: $xeSelect, searchValue, value: modelValue })
+          qyMethod({ $select: $xeSelect, searchValue, value: modelValue })
         ).then(() => nextTick())
           .catch(() => nextTick())
           .finally(() => {
@@ -1417,11 +1455,11 @@ export default defineVxeComponent({
       const inpPlaceholder = computeInpPlaceholder.value
       const popupWrapperStyle = computePopupWrapperStyle.value
       const popupOpts = computePopupOpts.value
-      const popupClassName = popupOpts.className || props.popupClassName
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className || props.popupClassName
       if (formReadonly) {
         return h('div', {
           ref: refElem,
@@ -1481,7 +1519,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $select: $xeSelect }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $select: $xeSelect }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': !loading && isAniVisible,

package/packages/table-select/src/table-select.ts

@@ -50,6 +50,10 @@ export default defineVxeComponent({
     options: Array as PropType<VxeTableSelectPropTypes.Options>,
     optionProps: Object as PropType<VxeTableSelectPropTypes.OptionProps>,
     lazyOptions: Array as PropType<VxeTableSelectPropTypes.LazyOptions>,
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
     zIndex: Number as PropType<VxeTableSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeTableSelectPropTypes.Size>,
@@ -139,8 +143,12 @@ export default defineVxeComponent({
 
     const computeBtnTransfer = computed(() => {
       const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
       if (transfer === null) {
-        const globalTransfer = getConfig().select.transfer
+        const globalTransfer = getConfig().tableSelect.transfer
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
@@ -407,9 +415,10 @@ export default defineVxeComponent({
     }
 
     const updateZindex = () => {
-      const { zIndex } = props
-      if (zIndex) {
-        reactData.panelIndex = zIndex
+      const popupOpts = computePopupOpts.value
+      const customZIndex = popupOpts.zIndex || props.zIndex
+      if (customZIndex) {
+        reactData.panelIndex = XEUtils.toNumber(customZIndex)
       } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
@@ -421,9 +430,10 @@ export default defineVxeComponent({
       const targetElem = refElem.value
       const panelElem = refOptionPanel.value
       const btnTransfer = computeBtnTransfer.value
+      const popupOpts = computePopupOpts.value
       const handleStyle = () => {
         const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement,
+          placement: popupOpts.placement || placement,
           teleportTo: btnTransfer
         })
         const panelStyle: { [key: string]: string | number } = Object.assign(ppObj.style, {
@@ -620,13 +630,13 @@ export default defineVxeComponent({
       const btnTransfer = computeBtnTransfer.value
       const formReadonly = computeFormReadonly.value
       const popupOpts = computePopupOpts.value
-      const { className: popupClassName } = popupOpts
       const selectGridOpts = computeSelectGridOpts.value
       const rowOpts = computeRowOpts.value
       const popupWrapperStyle = computePopupWrapperStyle.value
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className
 
       if (formReadonly) {
         return h('div', {
@@ -674,7 +684,7 @@ export default defineVxeComponent({
         }, [
           h('div', {
             ref: refOptionPanel,
-            class: ['vxe-table--ignore-clear vxe-table-select--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $tableSelect: $xeTableSelect }) : popupClassName) : '', {
+            class: ['vxe-table--ignore-clear vxe-table-select--panel', ppClassName ? (XEUtils.isFunction(ppClassName) ? ppClassName({ $tableSelect: $xeTableSelect }) : ppClassName) : '', {
               [`size--${vSize}`]: vSize,
               'is--transfer': btnTransfer,
               'ani--leave': !loading && isAniVisible,