vxe-pc-ui 4.20.25 → 4.20.26

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

@@ -1,999 +1,1103 @@
-import { ref, h, PropType, computed, inject, watch, provide, nextTick, Teleport, onMounted, onUnmounted, reactive } from 'vue'
-import { defineVxeComponent } from '../../ui/src/comp'
-import XEUtils from 'xe-utils'
-import { VxeUI } from '../../ui'
-import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom'
-import { getOnName } from '../../ui/src/vn'
-import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
-import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
-
-import type { TableSelectReactData, VxeTableSelectEmits, VxeInputConstructor, TableSelectInternalData, VxeTableSelectPropTypes, VxeFormDefines, VxeModalConstructor, VxeModalMethods, VxeDrawerConstructor, VxeDrawerMethods, TableSelectMethods, TableSelectPrivateMethods, ValueOf, TableSelectPrivateRef, VxeTableSelectPrivateComputed, VxeTableSelectConstructor, VxeTableSelectPrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeComponentStyleType } from '../../../types'
-import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes } from '../../../types/components/table'
-import type { VxeGridInstance, VxeGridEvents, VxeGridPropTypes } from '../../../types/components/grid'
-
-const { getConfig, getIcon, globalEvents, getI18n, createEvent, useFns, renderEmptyElement } = VxeUI
-
-const { errLog } = createComponentLog('table-select')
-
-export function getRowUniqueId () {
-  return XEUtils.uniqueId('row_')
-}
-
-function createReactData (): TableSelectReactData {
-  return {
-    initialized: false,
-    searchValue: '',
-    searchLoading: false,
-    tableData: [],
-    tableColumns: [],
-    panelIndex: 0,
-    panelStyle: {},
-    panelPlacement: null,
-    triggerFocusPanel: false,
-    visiblePanel: false,
-    isAniVisible: false,
-    isActivated: false
-  }
-}
-
-function createInternalData (): TableSelectInternalData {
-  return {
-    // hpTimeout: undefined,
-    // vpTimeout: undefined,
-    fullData: [],
-    afterVisibleList: [],
-    fullValMaps: {}
-  }
-}
-
-export default defineVxeComponent({
-  name: 'VxeTableSelect',
-  props: {
-    modelValue: [String, Number, Array] as PropType<VxeTableSelectPropTypes.ModelValue>,
-    clearable: {
-      type: Boolean as PropType<VxeTableSelectPropTypes.Clearable>,
-      default: () => getConfig().tableSelect.clearable
-    },
-    placeholder: {
-      type: String as PropType<VxeTableSelectPropTypes.Placeholder>,
-      default: () => XEUtils.eqNull(getConfig().tableSelect.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().tableSelect.placeholder
-    },
-    readonly: {
-      type: Boolean as PropType<VxeTableSelectPropTypes.Readonly>,
-      default: null
-    },
-    loading: Boolean as PropType<VxeTableSelectPropTypes.Loading>,
-    disabled: {
-      type: Boolean as PropType<VxeTableSelectPropTypes.Disabled>,
-      default: null
-    },
-    multiple: Boolean as PropType<VxeTableSelectPropTypes.Multiple>,
-    className: [String, Function] as PropType<VxeTableSelectPropTypes.ClassName>,
-    prefixIcon: String as PropType<VxeTableSelectPropTypes.PrefixIcon>,
-    placement: String as PropType<VxeTableSelectPropTypes.Placement>,
-    columns: Array as PropType<VxeTableSelectPropTypes.Columns>,
-    options: Array as PropType<VxeTableSelectPropTypes.Options>,
-    optionProps: Object as PropType<VxeTableSelectPropTypes.OptionProps>,
-    lazyOptions: Array as PropType<VxeTableSelectPropTypes.LazyOptions>,
-    filterable: {
-      type: Boolean as PropType<VxeTableSelectPropTypes.Filterable>,
-      default: () => getConfig().tableSelect.filterable
-    },
-    filterConfig: Object as PropType<VxeTableSelectPropTypes.FilterConfig>,
-    remote: Boolean as PropType<VxeTableSelectPropTypes.Remote>,
-    remoteConfig: Object as PropType<VxeTableSelectPropTypes.RemoteConfig>,
-    /**
-     * 已废弃，请使用 popupConfig.zIndex
-     * @deprecated
-     */
-    zIndex: Number as PropType<VxeTableSelectPropTypes.ZIndex>,
-    size: {
-      type: String as PropType<VxeTableSelectPropTypes.Size>,
-      default: () => getConfig().tableSelect.size || getConfig().size
-    },
-    popupConfig: Object as PropType<VxeTableSelectPropTypes.PopupConfig>,
-    gridConfig: Object as PropType<VxeTableSelectPropTypes.GridConfig>,
-    transfer: {
-      type: Boolean as PropType<VxeTableSelectPropTypes.Transfer>,
-      default: null
-    }
-  },
-  emits: [
-    'update:modelValue',
-    'change',
-    'clear',
-    'blur',
-    'focus',
-    'click',
-
-    'form-submit',
-    'form-reset',
-    'form-collapse',
-    'page-change'
-  ] as VxeTableSelectEmits,
-  setup (props, context) {
-    const { emit, slots } = context
-
-    const VxeTableGridComponent = VxeUI.getComponent('vxe-grid')
-
-    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null)
-    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
-    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
-    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
-    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
-
-    const xID = XEUtils.uniqueId()
-
-    const { computeSize } = useFns.useSize(props)
-
-    const refElem = ref<HTMLDivElement>()
-    const refInput = ref<VxeInputConstructor>()
-    const refGridWrapper = ref<HTMLDivElement>()
-    const refOptionPanel = ref<HTMLDivElement>()
-    const refInpSearch = ref<VxeInputConstructor>()
-    const refGrid = ref<VxeGridInstance>()
-
-    const reactData = reactive(createReactData())
-
-    const internalData = createInternalData()
-
-    const refMaps: TableSelectPrivateRef = {
-      refElem
-    }
-
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly
-        }
-        return false
-      }
-      return readonly
-    })
-
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled
-        }
-        return false
-      }
-      return disabled
-    })
-
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props
-      const popupOpts = computePopupOpts.value
-      if (XEUtils.isBoolean(popupOpts.transfer)) {
-        return popupOpts.transfer
-      }
-      if (transfer === null) {
-        const globalTransfer = getConfig().tableSelect.transfer
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer
-        }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
-          return true
-        }
-      }
-      return transfer
-    })
-
-    const computePropsOpts = computed(() => {
-      return props.optionProps || {}
-    })
-
-    const computeCheckboxOpts = computed(() => {
-      const { multiple } = props
-      const gridOpts = computeGridOpts.value
-      return Object.assign({
-        reserve: multiple,
-        showReserveStatus: multiple
-      }, getConfig().table.checkboxConfig, gridOpts.checkboxConfig)
-    })
-
-    const computeRowOpts = computed<VxeTablePropTypes.RowConfig>(() => {
-      const { multiple } = props
-      const gridOpts = computeGridOpts.value
-      const valueField = computeValueField.value
-      return Object.assign({
-        isCurrent: true
-      }, multiple ? { keyField: valueField } : {}, getConfig().table.rowConfig, gridOpts.rowConfig)
-    })
-
-    const computeRowKeyField = computed(() => {
-      const rowOpts = computeRowOpts.value
-      return rowOpts.keyField || '_X_ROW_KEY'
-    })
-
-    const computeLabelField = computed(() => {
-      const propsOpts = computePropsOpts.value
-      return propsOpts.label || 'label'
-    })
-
-    const computeValueField = computed(() => {
-      const propsOpts = computePropsOpts.value
-      return propsOpts.value || 'value'
-    })
-
-    const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.popupConfig, props.popupConfig)
-    })
-
-    const computeGridOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.gridConfig, props.gridConfig, {
-        data: undefined
-      })
-    })
-
-    const computeRemoteOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.remoteConfig, props.remoteConfig)
-    })
-
-    const computeFilterOpts = computed(() => {
-      return Object.assign({}, getConfig().tableSelect.filterConfig, props.filterConfig)
-    })
-
-    const computeSelectGridOpts = computed(() => {
-      const gridOpts = computeGridOpts.value
-      const checkboxOpts = computeCheckboxOpts.value
-      const { pagerConfig, proxyConfig } = gridOpts
-      if (proxyConfig) {
-        const proxyAjax = proxyConfig.ajax
-        if (proxyAjax && proxyAjax.query) {
-          const newProxyConfig = XEUtils.clone(proxyConfig, true) as Required<VxeGridPropTypes.ProxyConfig>
-          const ajaxMethods = proxyAjax.query
-          if (ajaxMethods) {
-            const resConfigs = proxyConfig.response || proxyConfig.props || {}
-            Object.assign(newProxyConfig.ajax, {
-              query (params: VxeGridPropTypes.ProxyAjaxQueryParams, ...args: any[]) {
-                return Promise.resolve(ajaxMethods(params, ...args)).then(rest => {
-                  let currData = []
-                  if (pagerConfig) {
-                    const resultProp = resConfigs.result
-                    currData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null as any, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || []
-                  } else {
-                    const listProp = resConfigs.list
-                    currData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null as any, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || []
-                  }
-                  cacheDataMap(currData || [])
-                  return rest
-                })
-              }
-            })
-          }
-          return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts, proxyConfig: newProxyConfig })
-        }
-      }
-      return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts })
-    })
-
-    const computeSelectLabel = computed(() => {
-      const { modelValue, lazyOptions } = props
-      const { fullValMaps, fullData } = internalData
-      const valueField = computeValueField.value
-      const labelField = computeLabelField.value
-      if (!fullData) {
-        return ''
-      }
-      return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map(val => {
-        const cacheItem = fullValMaps[val]
-        if (cacheItem) {
-          return cacheItem.item[labelField]
-        }
-        if (lazyOptions) {
-          const lazyItem = lazyOptions.find(item => item[valueField] === val)
-          if (lazyItem) {
-            return lazyItem[labelField]
-          }
-        }
-        return val
-      }).join(', ')
-    })
-
-    const computePopupWrapperStyle = computed(() => {
-      const popupOpts = computePopupOpts.value
-      const { height, width } = popupOpts
-      const stys: VxeComponentStyleType = {}
-      if (width) {
-        stys.width = toCssUnit(width)
-      }
-      if (height) {
-        stys.height = toCssUnit(height)
-      }
-      return stys
-    })
-
-    const computeMaps: VxeTableSelectPrivateComputed = {
-    }
-
-    const $xeTableSelect = {
-      xID,
-      props,
-      context,
-      reactData,
-
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as unknown as VxeTableSelectConstructor & VxeTableSelectPrivateMethods
-
-    const gridEventKeys: ValueOf<VxeTableSelectEmits>[] = [
-      'form-submit',
-      'form-reset',
-      'form-collapse',
-      'page-change'
-    ]
-    const gridEvents: Record<string, any> = {}
-    gridEventKeys.forEach(name => {
-      gridEvents[getOnName(XEUtils.camelCase(name))] = (params: any) => {
-        dispatchEvent(name, params, params.$event)
-      }
-    })
-
-    const dispatchEvent = (type: ValueOf<VxeTableSelectEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $tableSelect: $xeTableSelect }, params))
-    }
-
-    const emitModel = (value: any) => {
-      emit('update:modelValue', value)
-    }
-
-    const tableSelectMethods: TableSelectMethods = {
-      dispatchEvent
-    }
-
-    const tableSelectPrivateMethods: TableSelectPrivateMethods = {
-    }
-
-    const getRowid = (option: any) => {
-      const rowKeyField = computeRowKeyField.value
-      const rowid = option[rowKeyField]
-      return rowid ? encodeURIComponent(rowid) : ''
-    }
-
-    const getRowsByValue = (modelValue: VxeTableSelectPropTypes.ModelValue) => {
-      const { fullValMaps } = internalData
-      const checkboxOpts = computeCheckboxOpts.value
-      const rowKeyField = computeRowKeyField.value
-      const valueField = computeValueField.value
-      const labelField = computeLabelField.value
-      const rows: any[] = []
-      const vals = XEUtils.eqNull(modelValue) ? [] : (XEUtils.isArray(modelValue) ? modelValue : [modelValue])
-      if (checkboxOpts.reserve) {
-        vals.forEach(val => {
-          const cacheItem = fullValMaps[val]
-          rows.push(cacheItem
-            ? cacheItem.item
-            : {
-                [rowKeyField]: val,
-                [valueField]: val,
-                [labelField]: val
-              })
-        })
-      } else {
-        vals.forEach(val => {
-          const cacheItem = fullValMaps[val]
-          if (cacheItem) {
-            rows.push(cacheItem.item)
-          }
-        })
-      }
-      return rows
-    }
-
-    const updateModel = (modelValue: VxeTableSelectPropTypes.ModelValue) => {
-      const { multiple } = props
-      nextTick(() => {
-        const $grid = refGrid.value
-        if ($grid) {
-          const selectList = getRowsByValue(modelValue)
-          if (selectList.length) {
-            if (multiple) {
-              $grid.setCheckboxRow(selectList, true)
-            } else {
-              $grid.setRadioRow(selectList[0])
-            }
-          }
-        }
-      })
-    }
-
-    const loadData = (data: any[]) => {
-      cacheDataMap(data)
-      handleData()
-    }
-
-    const loadColumn = (columns?: VxeTableSelectPropTypes.Columns) => {
-      if (!columns || !columns.length) {
-        return
-      }
-      const { multiple } = props
-      const tableCols: VxeTableSelectPropTypes.Columns = []
-      let hasRadioCol = false
-      let hasCheckboxCol = false
-      columns.forEach(column => {
-        if (!hasRadioCol && column.type === 'radio') {
-          hasRadioCol = true
-        } else if (!hasCheckboxCol && column.type === 'checkbox') {
-          hasCheckboxCol = true
-        }
-        tableCols.push(column)
-      })
-      if (multiple) {
-        if (!hasCheckboxCol) {
-          tableCols.unshift({
-            type: 'checkbox',
-            width: 70
-          })
-        }
-      } else {
-        if (!hasRadioCol) {
-          tableCols.unshift({
-            type: 'radio',
-            width: 70
-          })
-        }
-      }
-      reactData.tableColumns = tableCols
-    }
-
-    const cacheDataMap = (dataList: any[]) => {
-      const { options } = props
-      const rowKeyField = computeRowKeyField.value
-      const valueField = computeValueField.value
-      const gridOpts = computeGridOpts.value
-      const { treeConfig, pagerConfig } = gridOpts
-      const rowMaps: Record<string, {
-        item: any
-        index: number
-        _index: number
-        items: any[]
-        parent: any
-        nodes: any[]
-      }> = {}
-      const keyMaps: Record<string, boolean> = {}
-      if (treeConfig) {
-        // 暂不支持
-      } else {
-        XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
-          let rowid = getRowid(item)
-          if (!rowid) {
-            rowid = getRowUniqueId()
-          }
-          if (keyMaps[rowid]) {
-            errLog('vxe.error.repeatKey', [rowKeyField, rowid])
-          }
-          keyMaps[rowid] = true
-          const value = item[valueField]
-          if (rowMaps[value]) {
-            errLog('vxe.error.repeatKey', [valueField, value])
-          }
-          rowMaps[value] = { item, index, _index: index, items, parent: null, nodes: [] }
-        })
-      }
-      internalData.fullData = dataList || options || []
-      internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps
-      handleOptList()
-      updateModel(props.modelValue)
-    }
-
-    const handleOptList = () => {
-      const { remote, modelValue, filterable } = props
-      const { searchValue } = reactData
-      const { fullData, fullValMaps } = internalData
-      const valueField = computeValueField.value
-      const labelField = computeLabelField.value
-      const filterOpts = computeFilterOpts.value
-      const frMethod = filterOpts.filterMethod
-      const searchStr = `${searchValue || ''}`.toLowerCase()
-      let avList: any[] = []
-      if (remote) {
-        avList = fullData
-      } else {
-        if (filterable && frMethod) {
-          avList = searchStr
-            ? fullData.filter(row => frMethod({
-              $tableSelect: $xeTableSelect,
-              row,
-              filterValue: searchValue,
-              value: modelValue
-            }))
-            : fullData
-        } else if (filterable) {
-          avList = searchStr ? fullData.filter(row => (`${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1)) : fullData
-        } else {
-          avList = fullData
-        }
-      }
-      avList.forEach((item, index) => {
-        const cacheItem = fullValMaps[item[valueField]]
-        if (cacheItem) {
-          cacheItem._index = index
-        }
-      })
-      internalData.afterVisibleList = avList
-      return nextTick()
-    }
-
-    const updateZindex = () => {
-      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()
-      }
-    }
-
-    const updatePlacement = () => {
-      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,
-          defaultPlacement: popupOpts.defaultPlacement,
-          appendTo: popupOpts.appendTo,
-          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 = () => {
-      const { loading, remote, filterable } = props
-      const { fullData } = internalData
-      const isDisabled = computeIsDisabled.value
-      const remoteOpts = computeRemoteOpts.value
-      if (!loading && !isDisabled) {
-        if (internalData.vpTimeout) {
-          clearTimeout(internalData.vpTimeout)
-        }
-        if (internalData.hpTimeout) {
-          clearTimeout(internalData.hpTimeout)
-        }
-        if (!reactData.initialized) {
-          reactData.initialized = true
-        }
-        if (filterable) {
-          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
-            handleSearchEvent()
-          }
-        }
-        reactData.isActivated = true
-        reactData.isAniVisible = true
-        internalData.vpTimeout = setTimeout(() => {
-          reactData.visiblePanel = true
-          updateModel(props.modelValue)
-          internalData.vpTimeout = undefined
-          handleFocusSearch()
-          updatePlacement()
-        }, 10)
-        updateZindex()
-        updatePlacement()
-      }
-    }
-
-    const hideOptionPanel = () => {
-      const { filterable } = props
-      const filterOpts = computeFilterOpts.value
-      reactData.visiblePanel = false
-      if (filterable) {
-        if (filterOpts.clearOnClose) {
-          reactData.searchValue = ''
-        }
-      }
-      if (internalData.vpTimeout) {
-        clearTimeout(internalData.vpTimeout)
-      }
-      if (internalData.hpTimeout) {
-        clearTimeout(internalData.hpTimeout)
-      }
-      internalData.hpTimeout = setTimeout(() => {
-        reactData.isAniVisible = false
-        internalData.hpTimeout = undefined
-      }, 350)
-    }
-
-    const handleData = () => {
-      const { afterVisibleList } = internalData
-      reactData.tableData = afterVisibleList
-      return nextTick()
-    }
-
-    const modelSearchEvent = (value: string) => {
-      reactData.searchValue = value
-    }
-
-    const focusSearchEvent = () => {
-      reactData.isActivated = true
-    }
-
-    const handleSearchEvent = () => {
-      const { modelValue, remote } = props
-      const { searchValue } = reactData
-      const remoteOpts = computeRemoteOpts.value
-      const queryMethod = remoteOpts.queryMethod
-      if (remote && queryMethod && remoteOpts.enabled) {
-        reactData.searchLoading = true
-        Promise.resolve(
-          queryMethod({ $tableSelect: $xeTableSelect, searchValue, value: modelValue })
-        ).then(() => nextTick())
-          .catch(() => nextTick())
-          .finally(() => {
-            reactData.searchLoading = false
-          })
-      } else {
-        handleOptList()
-        handleData()
-      }
-    }
-
-    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true })
-
-    const changeEvent = (evnt: Event, selectValue: any, row: any) => {
-      emitModel(selectValue)
-      if (selectValue !== props.modelValue) {
-        dispatchEvent('change', { value: selectValue, row, option: row }, evnt)
-        // 自动更新校验状态
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue)
-        }
-      }
-    }
-
-    const clearValueEvent = (evnt: Event, selectValue: any) => {
-      changeEvent(evnt, selectValue, null)
-      dispatchEvent('clear', { value: selectValue }, evnt)
-    }
-
-    const clearEvent = (params: any, evnt: Event) => {
-      const $grid = refGrid.value
-      if ($grid) {
-        $grid.clearRadioRow()
-        $grid.clearCheckboxRow()
-      }
-      clearValueEvent(evnt, null)
-      hideOptionPanel()
-    }
-
-    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
-      const { visiblePanel } = reactData
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        const el = refElem.value
-        const panelElem = refOptionPanel.value
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
-        if (visiblePanel && !reactData.isActivated) {
-          hideOptionPanel()
-        }
-      }
-    }
-
-    const handleGlobalBlurEvent = () => {
-      const { visiblePanel, isActivated } = reactData
-      if (visiblePanel) {
-        hideOptionPanel()
-      }
-      if (isActivated) {
-        reactData.isActivated = false
-      }
-      if (visiblePanel || isActivated) {
-        const $input = refInput.value
-        if ($input) {
-          $input.blur()
-        }
-      }
-    }
-
-    const handleGlobalResizeEvent = () => {
-      const { visiblePanel } = reactData
-      if (visiblePanel) {
-        updatePlacement()
-      }
-    }
-
-    const handleGlobalScrollEvent = () => {
-      const { visiblePanel } = reactData
-      if (visiblePanel) {
-        updatePlacement()
-      }
-    }
-
-    const handleFocusSearch = () => {
-      if (props.filterable) {
-        nextTick(() => {
-          const inpSearch = refInpSearch.value
-          if (inpSearch) {
-            inpSearch.focus()
-          }
-        })
-      }
-    }
-
-    const focusEvent = (evnt: FocusEvent) => {
-      const isDisabled = computeIsDisabled.value
-      if (!isDisabled) {
-        if (!reactData.visiblePanel) {
-          reactData.triggerFocusPanel = true
-          showOptionPanel()
-          setTimeout(() => {
-            reactData.triggerFocusPanel = false
-          }, 150)
-        }
-      }
-      dispatchEvent('focus', {}, evnt)
-    }
-
-    const clickEvent = (evnt: MouseEvent) => {
-      togglePanelEvent(evnt)
-      dispatchEvent('click', {}, evnt)
-    }
-
-    const blurEvent = (evnt: FocusEvent) => {
-      reactData.isActivated = false
-      dispatchEvent('blur', {}, evnt)
-    }
-
-    const togglePanelEvent = (params: any) => {
-      const { $event } = params
-      $event.preventDefault()
-      if (reactData.triggerFocusPanel) {
-        reactData.triggerFocusPanel = false
-      } else {
-        if (reactData.visiblePanel) {
-          hideOptionPanel()
-        } else {
-          showOptionPanel()
-        }
-      }
-    }
-
-    const radioChangeEvent: VxeGridEvents.RadioChange = (params) => {
-      const { $event, row } = params
-      const valueField = computeValueField.value
-      const value = row[valueField]
-      changeEvent($event, value, row)
-      hideOptionPanel()
-    }
-
-    const checkboxChangeEvent: VxeGridEvents.CheckboxChange = (params) => {
-      const { $grid, $event, row } = params
-      const checkboxOpts = computeCheckboxOpts.value
-      const valueField = computeValueField.value
-      if ($grid) {
-        const checkboxRecords = $grid.getCheckboxRecords()
-        if (checkboxOpts.reserve) {
-          checkboxRecords.push(...$grid.getCheckboxReserveRecords())
-        }
-        const value = checkboxRecords.map(row => {
-          return row[valueField]
-        })
-        changeEvent($event, value, row)
-      }
-    }
-
-    const checkboxAllEvent: VxeGridEvents.CheckboxAll = (params) => {
-      checkboxChangeEvent(params)
-    }
-
-    Object.assign($xeTableSelect, tableSelectMethods, tableSelectPrivateMethods)
-
-    const renderVN = () => {
-      const { className, loading, filterable, remote } = props
-      const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns, searchValue, tableData, searchLoading } = reactData
-      const vSize = computeSize.value
-      const isDisabled = computeIsDisabled.value
-      const selectLabel = computeSelectLabel.value
-      const btnTransfer = computeBtnTransfer.value
-      const formReadonly = computeFormReadonly.value
-      const popupOpts = computePopupOpts.value
-      const selectGridOpts = computeSelectGridOpts.value
-      const rowOpts = computeRowOpts.value
-      const filterOpts = computeFilterOpts.value
-      const popupWrapperStyle = computePopupWrapperStyle.value
-      const { appendTo } = popupOpts
-      const headerSlot = slots.header
-      const footerSlot = slots.footer
-      const prefixSlot = slots.prefix
-      const ppClassName = popupOpts.className
-
-      if (formReadonly) {
-        return h('div', {
-          ref: refElem,
-          class: ['vxe-table-select--readonly', className]
-        }, [
-          h('span', {
-            class: 'vxe-table-select-label'
-          }, selectLabel)
-        ])
-      }
-      return h('div', {
-        ref: refElem,
-        class: ['vxe-table-select', className ? (XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className) : '', {
-          [`size--${vSize}`]: vSize,
-          'is--filterable': filterable,
-          'is--visible': visiblePanel,
-          'is--disabled': isDisabled,
-          'is--loading': loading,
-          'is--active': isActivated
-        }]
-      }, [
-        h(VxeInputComponent, {
-          ref: refInput,
-          clearable: props.clearable,
-          placeholder: loading ? getI18n('vxe.select.loadingText') : props.placeholder,
-          editable: false,
-          disabled: isDisabled,
-          type: 'text',
-          prefixIcon: props.prefixIcon,
-          suffixIcon: loading ? getIcon().TABLE_SELECT_LOADED : (visiblePanel ? getIcon().TABLE_SELECT_OPEN : getIcon().TABLE_SELECT_CLOSE),
-          modelValue: loading ? '' : selectLabel,
-          onClear: clearEvent,
-          onClick: clickEvent,
-          onFocus: focusEvent,
-          onBlur: blurEvent,
-          onSuffixClick: togglePanelEvent
-        }, prefixSlot
-          ? {
-              prefix: () => prefixSlot({})
-            }
-          : {}),
-        h(Teleport, {
-          to: getPopupContainer(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        }, [
-          h('div', {
-            ref: refOptionPanel,
-            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,
-              'ani--enter': !loading && visiblePanel
-            }],
-            placement: reactData.panelPlacement,
-            style: reactData.panelStyle
-          }, initialized
-            ? [
-                h('div', {
-                  class: 'vxe-table-select--panel-wrapper'
-                }, [
-                  filterable
-                    ? h('div', {
-                      class: 'vxe-table-select--panel-search'
-                    }, [
-                      h(VxeInputComponent, {
-                        ref: refInpSearch,
-                        class: 'vxe-table-select-search--input',
-                        modelValue: searchValue,
-                        clearable: true,
-                        disabled: false,
-                        readonly: false,
-                        placeholder: getI18n('vxe.treeSelect.search'),
-                        prefixIcon: getIcon().INPUT_SEARCH,
-                        'onUpdate:modelValue': modelSearchEvent,
-                        onFocus: focusSearchEvent,
-                        onChange: triggerSearchEvent,
-                        onSearch: triggerSearchEvent
-                      })
-                    ])
-                    : renderEmptyElement($xeTableSelect),
-                  headerSlot
-                    ? h('div', {
-                      class: 'vxe-table-select--panel-header'
-                    }, headerSlot({}))
-                    : renderEmptyElement($xeTableSelect),
-                  h('div', {
-                    class: 'vxe-table-select--panel-body'
-                  }, [
-                    h('div', {
-                      ref: refGridWrapper,
-                      class: 'vxe-table-select-grid--wrapper',
-                      style: popupWrapperStyle
-                    }, [
-                      VxeTableGridComponent
-                        ? h(VxeTableGridComponent, {
-                          ...selectGridOpts,
-                          ...gridEvents,
-                          class: 'vxe-table-select--grid',
-                          ref: refGrid,
-                          loading: remote && searchLoading,
-                          rowConfig: rowOpts,
-                          data: tableData,
-                          columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
-                          height: '100%',
-                          autoResize: true,
-                          onRadioChange: radioChangeEvent,
-                          onCheckboxChange: checkboxChangeEvent,
-                          onCheckboxAll: checkboxAllEvent
-                        }, Object.assign({}, slots, {
-                          header: undefined,
-                          footer: undefined,
-                          prefixSlot: undefined
-                        }))
-                        : renderEmptyElement($xeTableSelect)
-                    ])
-                  ]),
-                  footerSlot || (filterable && searchValue && !remote && filterOpts.showResultCount)
-                    ? h('div', {
-                      class: 'vxe-table-select--panel-footer'
-                    }, footerSlot
-                      ? footerSlot({})
-                      : [
-                          h('div', {
-                            class: 'vxe-table-select--search-count'
-                          }, searchLoading ? '' : getI18n('vxe.tableSelect.filterCount', [tableData.length]))
-                        ])
-                    : renderEmptyElement($xeTableSelect)
-                ])
-              ]
-            : [])
-        ])
-      ])
-    }
-
-    watch(() => props.options, (val) => {
-      loadData(val || [])
-    })
-
-    watch(() => props.columns, (val) => {
-      loadColumn(val)
-    })
-
-    watch(() => props.modelValue, (val) => {
-      updateModel(val)
-    })
-
-    loadColumn(props.columns)
-    loadData(props.options || [])
-
-    onMounted(() => {
-      const { gridConfig } = props
-      if (gridConfig && gridConfig.proxyConfig) {
-        if (gridConfig.proxyConfig.autoLoad !== false) {
-          reactData.initialized = true
-        }
-      }
-      globalEvents.on($xeTableSelect, 'mousedown', handleGlobalMousedownEvent)
-      globalEvents.on($xeTableSelect, 'blur', handleGlobalBlurEvent)
-      globalEvents.on($xeTableSelect, 'resize', handleGlobalResizeEvent)
-      globalEvents.on($xeTableSelect, 'scroll', handleGlobalScrollEvent)
-    })
-
-    onUnmounted(() => {
-      globalEvents.off($xeTableSelect, 'mousedown')
-      globalEvents.off($xeTableSelect, 'blur')
-      globalEvents.off($xeTableSelect, 'resize')
-      globalEvents.off($xeTableSelect, 'scroll')
-      XEUtils.assign(reactData, createReactData())
-      XEUtils.assign(internalData, createInternalData())
-    })
-
-    nextTick(() => {
-      if (!VxeTableGridComponent) {
-        errLog('vxe.error.reqComp', ['vxe-grid'])
-      }
-    })
-
-    provide('$xeTableSelect', $xeTableSelect)
-
-    $xeTableSelect.renderVN = renderVN
-
-    return $xeTableSelect
-  },
-  render () {
-    return this.renderVN()
-  }
-})
+import { ref, h, PropType, computed, inject, watch, provide, nextTick, Teleport, onMounted, onUnmounted, reactive } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
+import { VxeUI } from '@vxe-ui/core'
+import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupContainer } from '../../ui/src/dom'
+import { getOnName } from '../../ui/src/vn'
+import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
+import { createComponentLog } from '../../ui/src/log'
+import VxeInputComponent from '../../input/src/input'
+
+import type {
+  TableSelectReactData,
+  VxeTableSelectEmits,
+  VxeInputConstructor,
+  TableSelectInternalData,
+  VxeTableSelectPropTypes,
+  VxeFormDefines,
+  VxeModalConstructor,
+  VxeModalMethods,
+  VxeDrawerConstructor,
+  VxeDrawerMethods,
+  TableSelectMethods,
+  TableSelectPrivateMethods,
+  ValueOf,
+  TableSelectPrivateRef,
+  VxeTableSelectPrivateComputed,
+  VxeTableSelectConstructor,
+  VxeTableSelectPrivateMethods,
+  VxeFormConstructor,
+  VxeFormPrivateMethods,
+  VxeComponentStyleType
+} from '../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes } from '../../../types/components/table'
+import type { VxeGridInstance, VxeGridEvents, VxeGridPropTypes } from '../../../types/components/grid'
+
+const { getConfig, getIcon, globalEvents, getI18n, createEvent, useFns, renderEmptyElement } = VxeUI
+
+const { errLog } = createComponentLog('table-select')
+
+export function getRowUniqueId() {
+  return XEUtils.uniqueId('row_')
+}
+
+function createReactData(): TableSelectReactData {
+  return {
+    initialized: false,
+    searchValue: '',
+    searchLoading: false,
+    tableData: [],
+    tableColumns: [],
+    panelIndex: 0,
+    panelStyle: {},
+    panelPlacement: null,
+    triggerFocusPanel: false,
+    visiblePanel: false,
+    isAniVisible: false,
+    isActivated: false
+  }
+}
+
+function createInternalData(): TableSelectInternalData {
+  return {
+    // hpTimeout: undefined,
+    // vpTimeout: undefined,
+    fullData: [],
+    afterVisibleList: [],
+    fullValMaps: {}
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeTableSelect',
+  props: {
+    modelValue: [String, Number, Array] as PropType<VxeTableSelectPropTypes.ModelValue>,
+    clearable: {
+      type: Boolean as PropType<VxeTableSelectPropTypes.Clearable>,
+      default: () => getConfig().tableSelect.clearable
+    },
+    placeholder: {
+      type: String as PropType<VxeTableSelectPropTypes.Placeholder>,
+      default: () => (XEUtils.eqNull(getConfig().tableSelect.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().tableSelect.placeholder)
+    },
+    readonly: {
+      type: Boolean as PropType<VxeTableSelectPropTypes.Readonly>,
+      default: null
+    },
+    loading: Boolean as PropType<VxeTableSelectPropTypes.Loading>,
+    disabled: {
+      type: Boolean as PropType<VxeTableSelectPropTypes.Disabled>,
+      default: null
+    },
+    multiple: Boolean as PropType<VxeTableSelectPropTypes.Multiple>,
+    className: [String, Function] as PropType<VxeTableSelectPropTypes.ClassName>,
+    prefixIcon: String as PropType<VxeTableSelectPropTypes.PrefixIcon>,
+    placement: String as PropType<VxeTableSelectPropTypes.Placement>,
+    columns: Array as PropType<VxeTableSelectPropTypes.Columns>,
+    options: Array as PropType<VxeTableSelectPropTypes.Options>,
+    optionProps: Object as PropType<VxeTableSelectPropTypes.OptionProps>,
+    lazyOptions: Array as PropType<VxeTableSelectPropTypes.LazyOptions>,
+    filterable: {
+      type: Boolean as PropType<VxeTableSelectPropTypes.Filterable>,
+      default: () => getConfig().tableSelect.filterable
+    },
+    filterConfig: Object as PropType<VxeTableSelectPropTypes.FilterConfig>,
+    remote: Boolean as PropType<VxeTableSelectPropTypes.Remote>,
+    remoteConfig: Object as PropType<VxeTableSelectPropTypes.RemoteConfig>,
+    /**
+     * 已废弃，请使用 popupConfig.zIndex
+     * @deprecated
+     */
+    zIndex: Number as PropType<VxeTableSelectPropTypes.ZIndex>,
+    size: {
+      type: String as PropType<VxeTableSelectPropTypes.Size>,
+      default: () => getConfig().tableSelect.size || getConfig().size
+    },
+    popupConfig: Object as PropType<VxeTableSelectPropTypes.PopupConfig>,
+    gridConfig: Object as PropType<VxeTableSelectPropTypes.GridConfig>,
+    transfer: {
+      type: Boolean as PropType<VxeTableSelectPropTypes.Transfer>,
+      default: null
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'change',
+    'clear',
+    'blur',
+    'focus',
+    'click',
+
+    'form-submit',
+    'form-reset',
+    'form-collapse',
+    'page-change'
+  ] as VxeTableSelectEmits,
+  setup(props, context) {
+    const { emit, slots } = context
+
+    const VxeTableGridComponent = VxeUI.getComponent('vxe-grid')
+
+    const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
+    const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
+    const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
+
+    const xID = XEUtils.uniqueId()
+
+    const { computeSize } = useFns.useSize(props)
+
+    const refElem = ref<HTMLDivElement>()
+    const refInput = ref<VxeInputConstructor>()
+    const refGridWrapper = ref<HTMLDivElement>()
+    const refOptionPanel = ref<HTMLDivElement>()
+    const refInpSearch = ref<VxeInputConstructor>()
+    const refGrid = ref<VxeGridInstance>()
+
+    const reactData = reactive(createReactData())
+
+    const internalData = createInternalData()
+
+    const refMaps: TableSelectPrivateRef = {
+      refElem
+    }
+
+    const computeFormReadonly = computed(() => {
+      const { readonly } = props
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly
+        }
+        return false
+      }
+      return readonly
+    })
+
+    const computeIsDisabled = computed(() => {
+      const { disabled } = props
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled
+        }
+        return false
+      }
+      return disabled
+    })
+
+    const computeBtnTransfer = computed(() => {
+      const { transfer } = props
+      const popupOpts = computePopupOpts.value
+      if (XEUtils.isBoolean(popupOpts.transfer)) {
+        return popupOpts.transfer
+      }
+      if (transfer === null) {
+        const globalTransfer = getConfig().tableSelect.transfer
+        if (XEUtils.isBoolean(globalTransfer)) {
+          return globalTransfer
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true
+        }
+      }
+      return transfer
+    })
+
+    const computePropsOpts = computed(() => {
+      return props.optionProps || {}
+    })
+
+    const computeCheckboxOpts = computed(() => {
+      const { multiple } = props
+      const gridOpts = computeGridOpts.value
+      return Object.assign(
+        {
+          reserve: multiple,
+          showReserveStatus: multiple
+        },
+        getConfig().table.checkboxConfig,
+        gridOpts.checkboxConfig
+      )
+    })
+
+    const computeRowOpts = computed<VxeTablePropTypes.RowConfig>(() => {
+      const { multiple } = props
+      const gridOpts = computeGridOpts.value
+      const valueField = computeValueField.value
+      return Object.assign(
+        {
+          isCurrent: true
+        },
+        multiple ? { keyField: valueField } : {},
+        getConfig().table.rowConfig,
+        gridOpts.rowConfig
+      )
+    })
+
+    const computeRowKeyField = computed(() => {
+      const rowOpts = computeRowOpts.value
+      return rowOpts.keyField || '_X_ROW_KEY'
+    })
+
+    const computeLabelField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.label || 'label'
+    })
+
+    const computeValueField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.value || 'value'
+    })
+
+    const computePopupOpts = computed(() => {
+      return Object.assign({}, getConfig().tableSelect.popupConfig, props.popupConfig)
+    })
+
+    const computeGridOpts = computed(() => {
+      return Object.assign({}, getConfig().tableSelect.gridConfig, props.gridConfig, {
+        data: undefined
+      })
+    })
+
+    const computeRemoteOpts = computed(() => {
+      return Object.assign({}, getConfig().tableSelect.remoteConfig, props.remoteConfig)
+    })
+
+    const computeFilterOpts = computed(() => {
+      return Object.assign({}, getConfig().tableSelect.filterConfig, props.filterConfig)
+    })
+
+    const computeSelectGridOpts = computed(() => {
+      const gridOpts = computeGridOpts.value
+      const checkboxOpts = computeCheckboxOpts.value
+      const { pagerConfig, proxyConfig } = gridOpts
+      if (proxyConfig) {
+        const proxyAjax = proxyConfig.ajax
+        if (proxyAjax && proxyAjax.query) {
+          const newProxyConfig = XEUtils.clone(proxyConfig, true) as Required<VxeGridPropTypes.ProxyConfig>
+          const ajaxMethods = proxyAjax.query
+          if (ajaxMethods) {
+            const resConfigs = proxyConfig.response || proxyConfig.props || {}
+            Object.assign(newProxyConfig.ajax, {
+              query(params: VxeGridPropTypes.ProxyAjaxQueryParams, ...args: any[]) {
+                return Promise.resolve(ajaxMethods(params, ...args)).then((rest) => {
+                  let currData = []
+                  if (pagerConfig) {
+                    const resultProp = resConfigs.result
+                    currData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: null as any, $grid: null, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || []
+                  } else {
+                    const listProp = resConfigs.list
+                    currData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: null as any, $grid: null, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || []
+                  }
+                  cacheDataMap(currData || [])
+                  return rest
+                })
+              }
+            })
+          }
+          return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts, proxyConfig: newProxyConfig })
+        }
+      }
+      return Object.assign({}, gridOpts, { checkboxConfig: checkboxOpts })
+    })
+
+    const computeSelectLabel = computed(() => {
+      const { modelValue, lazyOptions } = props
+      const { fullValMaps, fullData } = internalData
+      const valueField = computeValueField.value
+      const labelField = computeLabelField.value
+      if (!fullData) {
+        return ''
+      }
+      return (XEUtils.isArray(modelValue) ? modelValue : [modelValue])
+        .map((val) => {
+          const cacheItem = fullValMaps[val]
+          if (cacheItem) {
+            return cacheItem.item[labelField]
+          }
+          if (lazyOptions) {
+            const lazyItem = lazyOptions.find((item) => item[valueField] === val)
+            if (lazyItem) {
+              return lazyItem[labelField]
+            }
+          }
+          return val
+        })
+        .join(', ')
+    })
+
+    const computePopupWrapperStyle = computed(() => {
+      const popupOpts = computePopupOpts.value
+      const { height, width } = popupOpts
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      if (height) {
+        stys.height = toCssUnit(height)
+      }
+      return stys
+    })
+
+    const computeMaps: VxeTableSelectPrivateComputed = {}
+
+    const $xeTableSelect = {
+      xID,
+      props,
+      context,
+      reactData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeTableSelectConstructor & VxeTableSelectPrivateMethods
+
+    const gridEventKeys: ValueOf<VxeTableSelectEmits>[] = ['form-submit', 'form-reset', 'form-collapse', 'page-change']
+    const gridEvents: Record<string, any> = {}
+    gridEventKeys.forEach((name) => {
+      gridEvents[getOnName(XEUtils.camelCase(name))] = (params: any) => {
+        dispatchEvent(name, params, params.$event)
+      }
+    })
+
+    const dispatchEvent = (type: ValueOf<VxeTableSelectEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $tableSelect: $xeTableSelect }, params))
+    }
+
+    const emitModel = (value: any) => {
+      emit('update:modelValue', value)
+    }
+
+    const tableSelectMethods: TableSelectMethods = {
+      dispatchEvent
+    }
+
+    const tableSelectPrivateMethods: TableSelectPrivateMethods = {}
+
+    const getRowid = (option: any) => {
+      const rowKeyField = computeRowKeyField.value
+      const rowid = option[rowKeyField]
+      return rowid ? encodeURIComponent(rowid) : ''
+    }
+
+    const getRowsByValue = (modelValue: VxeTableSelectPropTypes.ModelValue) => {
+      const { fullValMaps } = internalData
+      const checkboxOpts = computeCheckboxOpts.value
+      const rowKeyField = computeRowKeyField.value
+      const valueField = computeValueField.value
+      const labelField = computeLabelField.value
+      const rows: any[] = []
+      const vals = XEUtils.eqNull(modelValue) ? [] : XEUtils.isArray(modelValue) ? modelValue : [modelValue]
+      if (checkboxOpts.reserve) {
+        vals.forEach((val) => {
+          const cacheItem = fullValMaps[val]
+          rows.push(
+            cacheItem
+              ? cacheItem.item
+              : {
+                  [rowKeyField]: val,
+                  [valueField]: val,
+                  [labelField]: val
+                }
+          )
+        })
+      } else {
+        vals.forEach((val) => {
+          const cacheItem = fullValMaps[val]
+          if (cacheItem) {
+            rows.push(cacheItem.item)
+          }
+        })
+      }
+      return rows
+    }
+
+    const updateModel = (modelValue: VxeTableSelectPropTypes.ModelValue) => {
+      const { multiple } = props
+      nextTick(() => {
+        const $grid = refGrid.value
+        if ($grid) {
+          const selectList = getRowsByValue(modelValue)
+          if (selectList.length) {
+            if (multiple) {
+              $grid.setCheckboxRow(selectList, true)
+            } else {
+              $grid.setRadioRow(selectList[0])
+            }
+          }
+        }
+      })
+    }
+
+    const loadData = (data: any[]) => {
+      cacheDataMap(data)
+      handleData()
+    }
+
+    const loadColumn = (columns?: VxeTableSelectPropTypes.Columns) => {
+      if (!columns || !columns.length) {
+        return
+      }
+      const { multiple } = props
+      const tableCols: VxeTableSelectPropTypes.Columns = []
+      let hasRadioCol = false
+      let hasCheckboxCol = false
+      columns.forEach((column) => {
+        if (!hasRadioCol && column.type === 'radio') {
+          hasRadioCol = true
+        } else if (!hasCheckboxCol && column.type === 'checkbox') {
+          hasCheckboxCol = true
+        }
+        tableCols.push(column)
+      })
+      if (multiple) {
+        if (!hasCheckboxCol) {
+          tableCols.unshift({
+            type: 'checkbox',
+            width: 70
+          })
+        }
+      } else {
+        if (!hasRadioCol) {
+          tableCols.unshift({
+            type: 'radio',
+            width: 70
+          })
+        }
+      }
+      reactData.tableColumns = tableCols
+    }
+
+    const cacheDataMap = (dataList: any[]) => {
+      const { options } = props
+      const rowKeyField = computeRowKeyField.value
+      const valueField = computeValueField.value
+      const gridOpts = computeGridOpts.value
+      const { treeConfig, pagerConfig } = gridOpts
+      const rowMaps: Record<
+        string,
+        {
+          item: any
+          index: number
+          _index: number
+          items: any[]
+          parent: any
+          nodes: any[]
+        }
+      > = {}
+      const keyMaps: Record<string, boolean> = {}
+      if (treeConfig) {
+        // 暂不支持
+      } else {
+        XEUtils.arrayEach(dataList || options || [], (item, index, items) => {
+          let rowid = getRowid(item)
+          if (!rowid) {
+            rowid = getRowUniqueId()
+          }
+          if (keyMaps[rowid]) {
+            errLog('vxe.error.repeatKey', [rowKeyField, rowid])
+          }
+          keyMaps[rowid] = true
+          const value = item[valueField]
+          if (rowMaps[value]) {
+            errLog('vxe.error.repeatKey', [valueField, value])
+          }
+          rowMaps[value] = { item, index, _index: index, items, parent: null, nodes: [] }
+        })
+      }
+      internalData.fullData = dataList || options || []
+      internalData.fullValMaps = pagerConfig ? Object.assign({}, internalData.fullValMaps, rowMaps) : rowMaps
+      handleOptList()
+      updateModel(props.modelValue)
+    }
+
+    const handleOptList = () => {
+      const { remote, modelValue, filterable } = props
+      const { searchValue } = reactData
+      const { fullData, fullValMaps } = internalData
+      const valueField = computeValueField.value
+      const labelField = computeLabelField.value
+      const filterOpts = computeFilterOpts.value
+      const frMethod = filterOpts.filterMethod
+      const searchStr = `${searchValue || ''}`.toLowerCase()
+      let avList: any[] = []
+      if (remote) {
+        avList = fullData
+      } else {
+        if (filterable && frMethod) {
+          avList = searchStr
+            ? fullData.filter((row) =>
+              frMethod({
+                $tableSelect: $xeTableSelect,
+                row,
+                filterValue: searchValue,
+                value: modelValue
+              })
+            )
+            : fullData
+        } else if (filterable) {
+          avList = searchStr ? fullData.filter((row) => `${row[labelField] || row[valueField]}`.toLowerCase().indexOf(searchStr) > -1) : fullData
+        } else {
+          avList = fullData
+        }
+      }
+      avList.forEach((item, index) => {
+        const cacheItem = fullValMaps[item[valueField]]
+        if (cacheItem) {
+          cacheItem._index = index
+        }
+      })
+      internalData.afterVisibleList = avList
+      return nextTick()
+    }
+
+    const updateZindex = () => {
+      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()
+      }
+    }
+
+    const updatePlacement = () => {
+      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,
+          defaultPlacement: popupOpts.defaultPlacement,
+          appendTo: popupOpts.appendTo,
+          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 = () => {
+      const { loading, remote, filterable } = props
+      const { fullData } = internalData
+      const isDisabled = computeIsDisabled.value
+      const remoteOpts = computeRemoteOpts.value
+      if (!loading && !isDisabled) {
+        if (internalData.vpTimeout) {
+          clearTimeout(internalData.vpTimeout)
+        }
+        if (internalData.hpTimeout) {
+          clearTimeout(internalData.hpTimeout)
+        }
+        if (!reactData.initialized) {
+          reactData.initialized = true
+        }
+        if (filterable) {
+          if (remote && remoteOpts.enabled && remoteOpts.autoLoad && !fullData.length) {
+            handleSearchEvent()
+          }
+        }
+        reactData.isActivated = true
+        reactData.isAniVisible = true
+        internalData.vpTimeout = setTimeout(() => {
+          reactData.visiblePanel = true
+          updateModel(props.modelValue)
+          internalData.vpTimeout = undefined
+          handleFocusSearch()
+          updatePlacement()
+        }, 10)
+        updateZindex()
+        updatePlacement()
+      }
+    }
+
+    const hideOptionPanel = () => {
+      const { filterable } = props
+      const filterOpts = computeFilterOpts.value
+      reactData.visiblePanel = false
+      if (filterable) {
+        if (filterOpts.clearOnClose) {
+          reactData.searchValue = ''
+        }
+      }
+      if (internalData.vpTimeout) {
+        clearTimeout(internalData.vpTimeout)
+      }
+      if (internalData.hpTimeout) {
+        clearTimeout(internalData.hpTimeout)
+      }
+      internalData.hpTimeout = setTimeout(() => {
+        reactData.isAniVisible = false
+        internalData.hpTimeout = undefined
+      }, 350)
+    }
+
+    const handleData = () => {
+      const { afterVisibleList } = internalData
+      reactData.tableData = afterVisibleList
+      return nextTick()
+    }
+
+    const modelSearchEvent = (value: string) => {
+      reactData.searchValue = value
+    }
+
+    const focusSearchEvent = () => {
+      reactData.isActivated = true
+    }
+
+    const handleSearchEvent = () => {
+      const { modelValue, remote } = props
+      const { searchValue } = reactData
+      const remoteOpts = computeRemoteOpts.value
+      const queryMethod = remoteOpts.queryMethod
+      if (remote && queryMethod && remoteOpts.enabled) {
+        reactData.searchLoading = true
+        Promise.resolve(queryMethod({ $tableSelect: $xeTableSelect, searchValue, value: modelValue }))
+          .then(() => nextTick())
+          .catch(() => nextTick())
+          .finally(() => {
+            reactData.searchLoading = false
+          })
+      } else {
+        handleOptList()
+        handleData()
+      }
+    }
+
+    const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true })
+
+    const changeEvent = (evnt: Event, selectValue: any, row: any) => {
+      emitModel(selectValue)
+      if (selectValue !== props.modelValue) {
+        dispatchEvent('change', { value: selectValue, row, option: row }, evnt)
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, selectValue)
+        }
+      }
+    }
+
+    const clearValueEvent = (evnt: Event, selectValue: any) => {
+      changeEvent(evnt, selectValue, null)
+      dispatchEvent('clear', { value: selectValue }, evnt)
+    }
+
+    const clearEvent = (params: any, evnt: Event) => {
+      const $grid = refGrid.value
+      if ($grid) {
+        $grid.clearRadioRow()
+        $grid.clearCheckboxRow()
+      }
+      clearValueEvent(evnt, null)
+      hideOptionPanel()
+    }
+
+    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
+      const { visiblePanel } = reactData
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        const el = refElem.value
+        const panelElem = refOptionPanel.value
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        if (visiblePanel && !reactData.isActivated) {
+          hideOptionPanel()
+        }
+      }
+    }
+
+    const handleGlobalBlurEvent = () => {
+      const { visiblePanel, isActivated } = reactData
+      if (visiblePanel) {
+        hideOptionPanel()
+      }
+      if (isActivated) {
+        reactData.isActivated = false
+      }
+      if (visiblePanel || isActivated) {
+        const $input = refInput.value
+        if ($input) {
+          $input.blur()
+        }
+      }
+    }
+
+    const handleGlobalResizeEvent = () => {
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        updatePlacement()
+      }
+    }
+
+    const handleGlobalScrollEvent = () => {
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        updatePlacement()
+      }
+    }
+
+    const handleFocusSearch = () => {
+      if (props.filterable) {
+        nextTick(() => {
+          const inpSearch = refInpSearch.value
+          if (inpSearch) {
+            inpSearch.focus()
+          }
+        })
+      }
+    }
+
+    const focusEvent = (evnt: FocusEvent) => {
+      const isDisabled = computeIsDisabled.value
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          reactData.triggerFocusPanel = true
+          showOptionPanel()
+          setTimeout(() => {
+            reactData.triggerFocusPanel = false
+          }, 150)
+        }
+      }
+      dispatchEvent('focus', {}, evnt)
+    }
+
+    const clickEvent = (evnt: MouseEvent) => {
+      togglePanelEvent(evnt)
+      dispatchEvent('click', {}, evnt)
+    }
+
+    const blurEvent = (evnt: FocusEvent) => {
+      reactData.isActivated = false
+      dispatchEvent('blur', {}, evnt)
+    }
+
+    const togglePanelEvent = (params: any) => {
+      const { $event } = params
+      $event.preventDefault()
+      if (reactData.triggerFocusPanel) {
+        reactData.triggerFocusPanel = false
+      } else {
+        if (reactData.visiblePanel) {
+          hideOptionPanel()
+        } else {
+          showOptionPanel()
+        }
+      }
+    }
+
+    const radioChangeEvent: VxeGridEvents.RadioChange = (params) => {
+      const { $event, row } = params
+      const valueField = computeValueField.value
+      const value = row[valueField]
+      changeEvent($event, value, row)
+      hideOptionPanel()
+    }
+
+    const checkboxChangeEvent: VxeGridEvents.CheckboxChange = (params) => {
+      const { $grid, $event, row } = params
+      const checkboxOpts = computeCheckboxOpts.value
+      const valueField = computeValueField.value
+      if ($grid) {
+        const checkboxRecords = $grid.getCheckboxRecords()
+        if (checkboxOpts.reserve) {
+          checkboxRecords.push(...$grid.getCheckboxReserveRecords())
+        }
+        const value = checkboxRecords.map((row) => {
+          return row[valueField]
+        })
+        changeEvent($event, value, row)
+      }
+    }
+
+    const checkboxAllEvent: VxeGridEvents.CheckboxAll = (params) => {
+      checkboxChangeEvent(params)
+    }
+
+    Object.assign($xeTableSelect, tableSelectMethods, tableSelectPrivateMethods)
+
+    const renderVN = () => {
+      const { className, loading, filterable, remote } = props
+      const { initialized, isActivated, isAniVisible, visiblePanel, tableColumns, searchValue, tableData, searchLoading } = reactData
+      const vSize = computeSize.value
+      const isDisabled = computeIsDisabled.value
+      const selectLabel = computeSelectLabel.value
+      const btnTransfer = computeBtnTransfer.value
+      const formReadonly = computeFormReadonly.value
+      const popupOpts = computePopupOpts.value
+      const selectGridOpts = computeSelectGridOpts.value
+      const rowOpts = computeRowOpts.value
+      const filterOpts = computeFilterOpts.value
+      const popupWrapperStyle = computePopupWrapperStyle.value
+      const { appendTo } = popupOpts
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+      const prefixSlot = slots.prefix
+      const ppClassName = popupOpts.className
+
+      if (formReadonly) {
+        return h(
+          'div',
+          {
+            ref: refElem,
+            class: ['vxe-table-select--readonly', className]
+          },
+          [
+            h(
+              'span',
+              {
+                class: 'vxe-table-select-label'
+              },
+              selectLabel
+            )
+          ]
+        )
+      }
+      return h(
+        'div',
+        {
+          ref: refElem,
+          class: [
+            'vxe-table-select',
+            className ? (XEUtils.isFunction(className) ? className({ $tableSelect: $xeTableSelect }) : className) : '',
+            {
+              [`size--${vSize}`]: vSize,
+              'is--filterable': filterable,
+              'is--visible': visiblePanel,
+              'is--disabled': isDisabled,
+              'is--loading': loading,
+              'is--active': isActivated
+            }
+          ]
+        },
+        [
+          h(
+            VxeInputComponent,
+            {
+              ref: refInput,
+              clearable: props.clearable,
+              placeholder: loading ? getI18n('vxe.select.loadingText') : props.placeholder,
+              editable: false,
+              disabled: isDisabled,
+              type: 'text',
+              prefixIcon: props.prefixIcon,
+              suffixIcon: loading ? getIcon().TABLE_SELECT_LOADED : visiblePanel ? getIcon().TABLE_SELECT_OPEN : getIcon().TABLE_SELECT_CLOSE,
+              modelValue: loading ? '' : selectLabel,
+              onClear: clearEvent,
+              onClick: clickEvent,
+              onFocus: focusEvent,
+              onBlur: blurEvent,
+              onSuffixClick: togglePanelEvent
+            },
+            prefixSlot
+              ? {
+                  prefix: () => prefixSlot({})
+                }
+              : {}
+          ),
+          h(
+            Teleport,
+            {
+              to: getPopupContainer(appendTo),
+              disabled: btnTransfer ? !initialized : true
+            },
+            [
+              h(
+                'div',
+                {
+                  ref: refOptionPanel,
+                  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,
+                      'ani--enter': !loading && visiblePanel
+                    }
+                  ],
+                  placement: reactData.panelPlacement,
+                  style: reactData.panelStyle
+                },
+                initialized
+                  ? [
+                      h(
+                        'div',
+                        {
+                          class: 'vxe-table-select--panel-wrapper'
+                        },
+                        [
+                          filterable
+                            ? h(
+                              'div',
+                              {
+                                class: 'vxe-table-select--panel-search'
+                              },
+                              [
+                                h(VxeInputComponent, {
+                                  ref: refInpSearch,
+                                  class: 'vxe-table-select-search--input',
+                                  modelValue: searchValue,
+                                  clearable: true,
+                                  disabled: false,
+                                  readonly: false,
+                                  placeholder: getI18n('vxe.treeSelect.search'),
+                                  prefixIcon: getIcon().INPUT_SEARCH,
+                                  'onUpdate:modelValue': modelSearchEvent,
+                                  onFocus: focusSearchEvent,
+                                  onChange: triggerSearchEvent,
+                                  onSearch: triggerSearchEvent
+                                })
+                              ]
+                            )
+                            : renderEmptyElement($xeTableSelect),
+                          headerSlot
+                            ? h(
+                              'div',
+                              {
+                                class: 'vxe-table-select--panel-header'
+                              },
+                              headerSlot({})
+                            )
+                            : renderEmptyElement($xeTableSelect),
+                          h(
+                            'div',
+                            {
+                              class: 'vxe-table-select--panel-body'
+                            },
+                            [
+                              h(
+                                'div',
+                                {
+                                  ref: refGridWrapper,
+                                  class: 'vxe-table-select-grid--wrapper',
+                                  style: popupWrapperStyle
+                                },
+                                [
+                                  VxeTableGridComponent
+                                    ? h(
+                                      VxeTableGridComponent,
+                                      {
+                                        ...selectGridOpts,
+                                        ...gridEvents,
+                                        class: 'vxe-table-select--grid',
+                                        ref: refGrid,
+                                        loading: remote && searchLoading,
+                                        rowConfig: rowOpts,
+                                        data: tableData,
+                                        columns: tableColumns.length ? tableColumns : selectGridOpts.columns,
+                                        height: '100%',
+                                        autoResize: true,
+                                        onRadioChange: radioChangeEvent,
+                                        onCheckboxChange: checkboxChangeEvent,
+                                        onCheckboxAll: checkboxAllEvent
+                                      },
+                                      Object.assign({}, slots, {
+                                        header: undefined,
+                                        footer: undefined,
+                                        prefixSlot: undefined
+                                      })
+                                    )
+                                    : renderEmptyElement($xeTableSelect)
+                                ]
+                              )
+                            ]
+                          ),
+                          footerSlot || (filterable && searchValue && !remote && filterOpts.showResultCount)
+                            ? h(
+                              'div',
+                              {
+                                class: 'vxe-table-select--panel-footer'
+                              },
+                              footerSlot
+                                ? footerSlot({})
+                                : [
+                                    h(
+                                      'div',
+                                      {
+                                        class: 'vxe-table-select--search-count'
+                                      },
+                                      searchLoading ? '' : getI18n('vxe.tableSelect.filterCount', [tableData.length])
+                                    )
+                                  ]
+                            )
+                            : renderEmptyElement($xeTableSelect)
+                        ]
+                      )
+                    ]
+                  : []
+              )
+            ]
+          )
+        ]
+      )
+    }
+
+    watch(
+      () => props.options,
+      (val) => {
+        loadData(val || [])
+      }
+    )
+
+    watch(
+      () => props.columns,
+      (val) => {
+        loadColumn(val)
+      }
+    )
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        updateModel(val)
+      }
+    )
+
+    loadColumn(props.columns)
+    loadData(props.options || [])
+
+    onMounted(() => {
+      const { gridConfig } = props
+      if (gridConfig && gridConfig.proxyConfig) {
+        if (gridConfig.proxyConfig.autoLoad !== false) {
+          reactData.initialized = true
+        }
+      }
+      globalEvents.on($xeTableSelect, 'mousedown', handleGlobalMousedownEvent)
+      globalEvents.on($xeTableSelect, 'blur', handleGlobalBlurEvent)
+      globalEvents.on($xeTableSelect, 'resize', handleGlobalResizeEvent)
+      globalEvents.on($xeTableSelect, 'scroll', handleGlobalScrollEvent)
+    })
+
+    onUnmounted(() => {
+      globalEvents.off($xeTableSelect, 'mousedown')
+      globalEvents.off($xeTableSelect, 'blur')
+      globalEvents.off($xeTableSelect, 'resize')
+      globalEvents.off($xeTableSelect, 'scroll')
+      XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
+    })
+
+    nextTick(() => {
+      if (!VxeTableGridComponent) {
+        errLog('vxe.error.reqComp', ['vxe-grid'])
+      }
+    })
+
+    provide('$xeTableSelect', $xeTableSelect)
+
+    $xeTableSelect.renderVN = renderVN
+
+    return $xeTableSelect
+  },
+  render() {
+    return this.renderVN()
+  }
+})