@hbdlzy/ui-core 0.1.5 → 0.1.7

package/src/components/BaseTable/BaseTable.vue

@@ -1,5 +1,38 @@
 <template>
   <div class="base-table">
+    <svg class="base-table__svg-sprite" aria-hidden="true" focusable="false">
+      <symbol :id="`${baseTableIconPrefix}-search`" viewBox="0 0 17.814 14.035">
+        <path fill="currentColor" d="M172.218,201.2a5.254,5.254,0,1,0-1.057.786l2.85,3.721a.659.659,0,0,0,1.047-.8l-2.841-3.709Zm-7.7-3.8a4.056,4.056,0,1,1,4.055,4.044,4.054,4.054,0,0,1-4.055-4.044Zm-2.554-3.968h-3.954a.657.657,0,1,1,0-1.313h3.952a.657.657,0,1,1,0,1.313Zm-.159,8.751h-3.8a.656.656,0,1,1,0-1.312h3.793a.656.656,0,1,1,0,1.312Zm-.78-3.958h-3.016a.659.659,0,1,1,0-1.319h3.015a.659.659,0,1,1,0,1.319Zm4.246,7.929h-7.261a.659.659,0,0,1,0-1.319h7.261a.659.659,0,1,1,0,1.319Z" transform="translate(-157.354 -192.113)" />
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-search-y`" viewBox="0 0 17.814 14.035">
+        <path fill="#0938f7" d="M172.218,201.2a5.254,5.254,0,1,0-1.057.786l2.85,3.721a.659.659,0,0,0,1.047-.8l-2.841-3.709Zm-7.7-3.8a4.056,4.056,0,1,1,4.055,4.044,4.054,4.054,0,0,1-4.055-4.044Zm-2.554-3.968h-3.954a.657.657,0,1,1,0-1.313h3.952a.657.657,0,1,1,0,1.313Zm-.159,8.751h-3.8a.656.656,0,1,1,0-1.312h3.793a.656.656,0,1,1,0,1.312Zm-.78-3.958h-3.016a.659.659,0,1,1,0-1.319h3.015a.659.659,0,1,1,0,1.319Zm4.246,7.929h-7.261a.659.659,0,0,1,0-1.319h7.261a.659.659,0,1,1,0,1.319Z" transform="translate(-157.354 -192.113)" />
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-select`" viewBox="0 0 16.04 12.653">
+        <path fill="currentColor" d="M0,12.653V11.248H11.792v1.406ZM9.328,4.429H16.04l-3.356,3.8ZM0,7.029V5.624H7.823V7.029ZM0,1.406V0H14.5V1.406Z" />
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-select-y`" viewBox="0 0 16.04 12.653">
+        <path fill="#0938f7" d="M0,12.653V11.248H11.792v1.406ZM9.328,4.429H16.04l-3.356,3.8ZM0,7.029V5.624H7.823V7.029ZM0,1.406V0H14.5V1.406Z" />
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-sort-none`" viewBox="0 0 15.351 16.031">
+        <g transform="translate(-1299.19 -185.182)">
+          <path fill="currentColor" d="M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z" transform="translate(1213.82 57.182)" />
+          <path fill="currentColor" d="M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z" transform="translate(1213.856 57.182)" />
+        </g>
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-sort-up`" viewBox="0 0 15.351 16.031">
+        <g transform="translate(-1299.19 -185.182)">
+          <path fill="#8c8c8c" d="M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z" transform="translate(1213.82 57.182)" />
+          <path fill="#0938f7" d="M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z" transform="translate(1213.856 57.182)" />
+        </g>
+      </symbol>
+      <symbol :id="`${baseTableIconPrefix}-sort-down`" viewBox="0 0 15.351 16.031">
+        <g transform="translate(-1299.19 -185.182)">
+          <path fill="#0938f7" d="M100.721,140.352l-3.679,3.679-3.679-3.679h2.944v-8.831h1.472v8.831h2.944Z" transform="translate(1213.82 57.182)" />
+          <path fill="#8c8c8c" d="M92.692,131.679H89.749v8.831H88.277v-8.831H85.333L89.013,128l3.679,3.679Z" transform="translate(1213.856 57.182)" />
+        </g>
+      </symbol>
+    </svg>
+
     <div v-if="shouldRenderToolbar" class="base-table__toolbar">
       <div class="base-table__toolbar-left">
         <slot name="toolbar"></slot>
@@ -76,53 +109,202 @@
         </template>
 
         <template v-else-if="shouldRenderBuiltInHeader(column)" #header>
-          <div class="base-table__header">
-            <span class="base-table__header-label">{{ column.label }}</span>
-
-            <div class="base-table__header-actions">
-              <el-dropdown
-                :ref="bindHeaderSearchDropdown(column)"
-                class="base-table__header-dropdown"
-                trigger="click"
-                :hide-on-click="false"
-                placement="bottom"
-                popper-class="base-table__header-search-dropdown"
+          <div
+            class="base-table__header"
+            :class="[
+              `base-table__header--${resolveHeaderContentAlign(column)}`,
+              {
+                'base-table__header--has-actions': hasHeaderSearch(column),
+                'base-table__header--has-sort': isHeaderSortable(column)
+              }
+            ]"
+          >
+            <span class="base-table__header-main">
+              <span class="base-table__header-label">{{ column.label }}</span>
+              <span
+                v-if="isHeaderSortable(column)"
+                class="base-table__header-sort"
+                :class="{ 'is-active': isHeaderSortActive(column) }"
+                aria-hidden="true"
+              >
+                <SvgIcon
+                  :prefix="baseTableIconPrefix"
+                  :icon-class="getHeaderSortIconName(column)"
+                  class-name="base-table__header-sort-icon"
+                />
+              </span>
+            </span>
+
+            <div v-if="hasHeaderSearch(column)" class="base-table__header-actions">
+              <button
+                :ref="bindHeaderSearchTrigger(column)"
+                class="base-table__header-icon"
+                :class="{ 'is-active': hasHeaderSearchValue(column) }"
+                type="button"
+                @click.stop="toggleHeaderSearch(column)"
               >
-                <button
-                  class="base-table__header-icon"
-                  :class="{ 'is-active': hasHeaderSearchValue(column) }"
-                  type="button"
+                <SvgIcon
+                  :prefix="baseTableIconPrefix"
+                  :icon-class="getHeaderSearchIconName(column)"
+                  class-name="base-table__header-search-icon"
+                />
+              </button>
+
+              <teleport to="body">
+                <div
+                  v-if="isHeaderSearchVisible(column)"
+                  :key="getHeaderSearchStateKey(column)"
+                  class="base-table__header-search-panel"
+                  :style="getHeaderSearchPanelStyle(column)"
+                  @click.stop
+                  @mousedown.stop
                 >
-                  <span class="base-table__header-icon-mark" aria-hidden="true"></span>
-                </button>
+                  <div
+                    v-if="isHeaderSearchSelect(column)"
+                    class="base-table__header-select"
+                  >
+                    <button
+                      class="base-table__header-select-trigger"
+                      type="button"
+                      @click="toggleHeaderSearchSelect(column)"
+                    >
+                      <span
+                        v-if="isHeaderSearchMultiple(column) && getHeaderSearchSelectedLabels(column).length"
+                        class="base-table__header-select-tags"
+                      >
+                        <span
+                          v-for="label in getHeaderSearchSelectedLabels(column).slice(0, 2)"
+                          :key="label"
+                          class="base-table__header-select-tag"
+                        >
+                          {{ label }}
+                        </span>
+                        <span
+                          v-if="getHeaderSearchSelectedLabels(column).length > 2"
+                          class="base-table__header-select-tag base-table__header-select-tag--count"
+                        >
+                          +{{ getHeaderSearchSelectedLabels(column).length - 2 }}
+                        </span>
+                      </span>
+                      <span
+                        v-else
+                        class="base-table__header-select-text"
+                        :class="{ 'is-placeholder': !hasHeaderSearchValue(column) }"
+                      >
+                        {{ getHeaderSearchSelectLabel(column) }}
+                      </span>
+                      <span
+                        class="base-table__header-select-arrow"
+                        :class="{ 'is-open': isHeaderSearchSelectOpen(column) }"
+                        aria-hidden="true"
+                      ></span>
+                    </button>
+
+                    <div
+                      v-if="isHeaderSearchSelectOpen(column)"
+                      class="base-table__header-select-options"
+                    >
+                      <button
+                        v-if="!isHeaderSearchMultiple(column)"
+                        class="base-table__header-select-option"
+                        :class="{ 'is-selected': !hasHeaderSearchValue(column) }"
+                        type="button"
+                        @click="handleHeaderSearchSelectEmpty(column)"
+                      >
+                        {{ getHeaderSearchPlaceholder(column) }}
+                      </button>
+                      <button
+                        v-for="option in getHeaderSearchOptions(column)"
+                        :key="String(getHeaderSearchOptionValue(option, column))"
+                        class="base-table__header-select-option"
+                        :class="{ 'is-selected': isHeaderSearchOptionSelected(option, column) }"
+                        type="button"
+                        :disabled="isHeaderSearchOptionDisabled(option, column)"
+                        @click="handleHeaderSearchSelectValue(column, getHeaderSearchOptionValue(option, column))"
+                      >
+                        <span class="base-table__header-select-option-label">
+                          {{ getHeaderSearchOptionLabel(option, column) }}
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+
+                  <div
+                    v-else-if="isHeaderSearchCascader(column)"
+                    class="base-table__header-cascader"
+                  >
+                    <button
+                      class="base-table__header-select-trigger"
+                      type="button"
+                      @click="toggleHeaderSearchSelect(column)"
+                    >
+                      <span
+                        class="base-table__header-select-text"
+                        :class="{ 'is-placeholder': !hasHeaderSearchValue(column) }"
+                      >
+                        {{ getHeaderSearchCascaderLabel(column) }}
+                      </span>
+                      <span
+                        class="base-table__header-select-arrow"
+                        :class="{ 'is-open': isHeaderSearchSelectOpen(column) }"
+                        aria-hidden="true"
+                      ></span>
+                    </button>
 
-                <template #dropdown>
-                  <el-dropdown-menu class="base-table__header-search-menu">
                     <div
-                      class="base-table__header-search-panel"
-                      :style="{ width: toCssValue(getHeaderSearchWidth(column)) || '280px' }"
-                      @click.stop
+                      v-if="isHeaderSearchSelectOpen(column)"
+                      class="base-table__header-cascader-panel"
                     >
-                      <el-input
-                        :model-value="getHeaderSearchValue(column)"
-                        :placeholder="getHeaderSearchPlaceholder(column)"
-                        clearable
-                        @update:model-value="updateHeaderSearchValue(column, $event)"
-                        @keyup.enter="handleHeaderSearch(column)"
-                      />
-
-                      <div class="base-table__header-search-footer">
-                        <el-button link type="primary" @click="handleHeaderSearch(column)">
-                          {{ getHeaderSearchSearchText(column) }}
-                        </el-button>
-                        <el-button link @click="handleHeaderSearchReset(column)">
-                          {{ getHeaderSearchResetText(column) }}
-                        </el-button>
+                      <div
+                        v-for="(levelOptions, levelIndex) in getHeaderSearchCascaderColumns(column)"
+                        :key="levelIndex"
+                        class="base-table__header-cascader-menu"
+                      >
+                        <button
+                          v-for="option in levelOptions"
+                          :key="`${levelIndex}-${String(getHeaderSearchOptionValue(option, column))}`"
+                          class="base-table__header-cascader-option"
+                          :class="{
+                            'is-active': isHeaderSearchCascaderOptionActive(column, option, levelIndex),
+                            'is-selected': isHeaderSearchCascaderOptionSelected(column, option, levelIndex)
+                          }"
+                          type="button"
+                          :disabled="isHeaderSearchOptionDisabled(option, column)"
+                          @click="handleHeaderSearchCascaderOption(column, option, levelIndex)"
+                        >
+                          <span class="base-table__header-cascader-label">
+                            {{ getHeaderSearchOptionLabel(option, column) }}
+                          </span>
+                          <span
+                            v-if="hasHeaderSearchOptionChildren(option, column)"
+                            class="base-table__header-cascader-arrow"
+                            aria-hidden="true"
+                          ></span>
+                        </button>
                       </div>
                     </div>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
+                  </div>
+
+                  <input
+                    v-else
+                    class="base-table__header-search-input"
+                    type="text"
+                    :value="getHeaderSearchInputValue(column)"
+                    :placeholder="getHeaderSearchPlaceholder(column)"
+                    @input="handleHeaderSearchInput(column, $event)"
+                    @keyup.enter="handleHeaderSearch(column)"
+                  />
+
+                  <div class="base-table__header-search-footer">
+                    <el-button link type="primary" @click="handleHeaderSearch(column)">
+                      {{ getHeaderSearchSearchText(column) }}
+                    </el-button>
+                    <el-button link @click="handleHeaderSearchReset(column)">
+                      {{ getHeaderSearchResetText(column) }}
+                    </el-button>
+                  </div>
+                </div>
+              </teleport>
             </div>
           </div>
         </template>
@@ -207,15 +389,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, useSlots, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, useSlots, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import type { TableInstance } from 'element-plus'
+import SvgIcon from '../SvgIcon'
 import type {
   BaseTableAction,
+  BaseTableAlign,
   BaseTableCellPayload,
   BaseTableColumn,
   BaseTableCssValue,
   BaseTableExpose,
   BaseTableHeaderSearchConfig,
+  BaseTableHeaderSearchPrimitiveValue,
+  BaseTableHeaderSearchValue,
   BaseTableLoadedPayload,
   BaseTableOption,
   BaseTablePagination,
@@ -227,6 +414,8 @@ import type {
   BaseTableSortPayload
 } from './BaseTable.types'
 
+let baseTableIconSeed = 0
+
 defineOptions({
   name: 'BaseTable'
 })
@@ -286,8 +475,14 @@ const loading = ref(false)
 const sourceRows = ref<BaseTableRow[]>(normalizeRows(props.data))
 const rows = ref<BaseTableRow[]>(normalizeRows(props.data))
 const selectionRows = ref<BaseTableRow[]>([])
-const headerSearchValues = reactive<Record<string, string>>({})
-const headerSearchDropdownRefs = ref<Record<string, { handleClose?: () => void }>>({})
+const headerSearchValues = reactive<Record<string, BaseTableHeaderSearchValue>>({})
+const headerSearchVisible = reactive<Record<string, boolean>>({})
+const headerSearchSelectOpen = reactive<Record<string, boolean>>({})
+const headerSearchCascaderActivePaths = reactive<Record<string, BaseTableHeaderSearchPrimitiveValue[]>>({})
+const headerSearchTriggerRects = reactive<Record<string, DOMRect>>({})
+const headerSearchTriggerRefs = ref<Record<string, HTMLElement>>({})
+const baseTableIconPrefix = `base-table-icon-${++baseTableIconSeed}`
+let headerSearchPositionFrame = 0
 const sortState = reactive({
   prop: props.defaultSort?.prop,
   order: props.defaultSort?.order || null
@@ -353,6 +548,9 @@ watch(
 )
 
 onMounted(() => {
+  window.addEventListener('scroll', scheduleHeaderSearchPositionUpdate, true)
+  window.addEventListener('resize', scheduleHeaderSearchPositionUpdate)
+
   if (props.request && props.autoLoad) {
     void load()
     return
@@ -363,6 +561,16 @@ onMounted(() => {
   }
 })
 
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', scheduleHeaderSearchPositionUpdate, true)
+  window.removeEventListener('resize', scheduleHeaderSearchPositionUpdate)
+
+  if (headerSearchPositionFrame) {
+    window.cancelAnimationFrame(headerSearchPositionFrame)
+    headerSearchPositionFrame = 0
+  }
+})
+
 function syncPagination(value?: Partial<BaseTablePagination>) {
   const nextPageSizes = value?.pageSizes
 
@@ -527,8 +735,12 @@ function handleInputChange(value: string, row: BaseTableRow, column: BaseTableCo
   })
 }
 
+function resolveHeaderContentAlign(column: BaseTableColumn<BaseTableRow>): BaseTableAlign {
+  return column.headerAlign || column.align || 'left'
+}
+
 function shouldRenderBuiltInHeader(column: BaseTableColumn<BaseTableRow>) {
-  return hasHeaderSearch(column)
+  return hasHeaderSearch(column) || isHeaderSortable(column)
 }
 
 function hasHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
@@ -551,47 +763,199 @@ function getHeaderSearchStateKey(column: BaseTableColumn<BaseTableRow>) {
   return resolveHeaderSearchParamKey(column) || getColumnProp(column) || getColumnKey(column)
 }
 
-function setHeaderSearchDropdownRef(
-  instance: { handleClose?: () => void } | null,
+function resolveHeaderSearchParamKey(column: BaseTableColumn<BaseTableRow>) {
+  const config = getHeaderSearchConfig(column)
+  const legacyParamKey = (column as Record<string, any>).otherProps
+
+  return config?.paramKey || legacyParamKey || getColumnProp(column) || ''
+}
+
+function setHeaderSearchTriggerRef(
+  instance: Element | ComponentPublicInstance | null,
   column: BaseTableColumn<BaseTableRow>
 ) {
   const stateKey = getHeaderSearchStateKey(column)
 
-  if (!instance) {
-    delete headerSearchDropdownRefs.value[stateKey]
+  if (!(instance instanceof HTMLElement)) {
+    delete headerSearchTriggerRefs.value[stateKey]
     return
   }
 
-  headerSearchDropdownRefs.value[stateKey] = instance
+  headerSearchTriggerRefs.value[stateKey] = instance
 }
 
-function bindHeaderSearchDropdown(column: BaseTableColumn<BaseTableRow>) {
-  return (instance: { handleClose?: () => void } | null) => {
-    setHeaderSearchDropdownRef(instance, column)
+function bindHeaderSearchTrigger(column: BaseTableColumn<BaseTableRow>) {
+  return (instance: Element | ComponentPublicInstance | null) => {
+    setHeaderSearchTriggerRef(instance, column)
   }
 }
 
-function resolveHeaderSearchParamKey(column: BaseTableColumn<BaseTableRow>) {
-  const config = getHeaderSearchConfig(column)
-  const legacyParamKey = (column as Record<string, any>).otherProps
+function isHeaderSearchVisible(column: BaseTableColumn<BaseTableRow>) {
+  return Boolean(headerSearchVisible[getHeaderSearchStateKey(column)])
+}
 
-  return config?.paramKey || legacyParamKey || getColumnProp(column) || ''
+function toggleHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const nextVisible = !headerSearchVisible[stateKey]
+
+  if (nextVisible) {
+    closeAllHeaderSearch()
+    updateHeaderSearchTriggerRect(column)
+    syncHeaderSearchCascaderActivePath(column)
+  }
+
+  headerSearchVisible[stateKey] = nextVisible
+  headerSearchSelectOpen[stateKey] = false
+}
+
+function closeAllHeaderSearch() {
+  Object.keys(headerSearchVisible).forEach((key) => {
+    headerSearchVisible[key] = false
+    headerSearchSelectOpen[key] = false
+  })
+}
+
+function updateHeaderSearchTriggerRect(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const rect = headerSearchTriggerRefs.value[stateKey]?.getBoundingClientRect()
+
+  if (rect) {
+    headerSearchTriggerRects[stateKey] = rect
+  }
 }
 
-function getHeaderSearchValue(column: BaseTableColumn<BaseTableRow>) {
-  return headerSearchValues[getHeaderSearchStateKey(column)] || ''
+function updateVisibleHeaderSearchPosition() {
+  props.columns.forEach((column) => {
+    if (hasHeaderSearch(column) && isHeaderSearchVisible(column)) {
+      updateHeaderSearchTriggerRect(column)
+    }
+  })
+}
+
+function scheduleHeaderSearchPositionUpdate() {
+  if (headerSearchPositionFrame) {
+    return
+  }
+
+  headerSearchPositionFrame = window.requestAnimationFrame(() => {
+    headerSearchPositionFrame = 0
+    updateVisibleHeaderSearchPosition()
+  })
+}
+
+function getHeaderSearchPanelStyle(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const triggerRect = headerSearchTriggerRects[stateKey]
+  const width = toCssValue(getHeaderSearchWidth(column)) || '280px'
+
+  if (!triggerRect) {
+    return {
+      width
+    }
+  }
+
+  const panelWidth = Number.parseFloat(String(getHeaderSearchWidth(column))) || 280
+  const maxLeft = Math.max(8, window.innerWidth - panelWidth - 8)
+  const left = Math.min(maxLeft, Math.max(8, triggerRect.right - panelWidth))
+  const top = triggerRect.bottom + 8
+
+  return {
+    width,
+    left: `${left}px`,
+    top: `${top}px`
+  }
+}
+
+function getHeaderSearchValue(column: BaseTableColumn<BaseTableRow>): BaseTableHeaderSearchValue {
+  const stateKey = getHeaderSearchStateKey(column)
+  const value = headerSearchValues[stateKey]
+
+  if (value !== undefined) {
+    return value
+  }
+
+  return getHeaderSearchEmptyValue(column)
+}
+
+function getHeaderSearchInputValue(column: BaseTableColumn<BaseTableRow>) {
+  const value = getHeaderSearchValue(column)
+  return Array.isArray(value) ? value.join(' ') : String(value)
 }
 
 function hasHeaderSearchValue(column: BaseTableColumn<BaseTableRow>) {
-  return Boolean(getHeaderSearchValue(column).trim())
+  return isHeaderSearchValueFilled(getHeaderSearchValue(column))
+}
+
+function updateHeaderSearchValue(column: BaseTableColumn<BaseTableRow>, value: unknown) {
+  headerSearchValues[getHeaderSearchStateKey(column)] = normalizeHeaderSearchValue(column, value)
+}
+
+function handleHeaderSearchInput(column: BaseTableColumn<BaseTableRow>, event: Event) {
+  updateHeaderSearchValue(column, (event.target as HTMLInputElement | null)?.value || '')
+}
+
+function isHeaderSearchSelect(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.type === 'select'
+}
+
+function isHeaderSearchCascader(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.type === 'cascader'
+}
+
+function isHeaderSearchChoice(column: BaseTableColumn<BaseTableRow>) {
+  return isHeaderSearchSelect(column) || isHeaderSearchCascader(column)
+}
+
+function isHeaderSearchMultiple(column: BaseTableColumn<BaseTableRow>) {
+  return isHeaderSearchSelect(column) && getHeaderSearchConfig(column)?.multiple === true
+}
+
+function isHeaderSearchClearable(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.clearable !== false
+}
+
+function isHeaderSearchFilterable(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.filterable === true
+}
+
+function getHeaderSearchIconName(column: BaseTableColumn<BaseTableRow>) {
+  const iconName = isHeaderSearchChoice(column) ? 'select' : 'search'
+  return hasHeaderSearchValue(column) ? `${iconName}-y` : iconName
+}
+
+function isHeaderSortable(column: BaseTableColumn<BaseTableRow>) {
+  return Boolean(resolveColumnSortable(column))
+}
+
+function isHeaderSortActive(column: BaseTableColumn<BaseTableRow>) {
+  return String(sortState.prop || '') === String(getColumnProp(column) || '') && Boolean(sortState.order)
+}
+
+function getHeaderSortIconName(column: BaseTableColumn<BaseTableRow>) {
+  if (!isHeaderSortActive(column)) {
+    return 'sort-none'
+  }
+
+  return sortState.order === 'ascending' ? 'sort-up' : 'sort-down'
 }
 
-function updateHeaderSearchValue(column: BaseTableColumn<BaseTableRow>, value: string) {
-  headerSearchValues[getHeaderSearchStateKey(column)] = normalizeHeaderSearchValue(value)
+function isHeaderSearchSelectOpen(column: BaseTableColumn<BaseTableRow>) {
+  return Boolean(headerSearchSelectOpen[getHeaderSearchStateKey(column)])
+}
+
+function toggleHeaderSearchSelect(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const nextOpen = !headerSearchSelectOpen[stateKey]
+
+  if (nextOpen) {
+    syncHeaderSearchCascaderActivePath(column)
+  }
+
+  headerSearchSelectOpen[stateKey] = nextOpen
 }
 
 function getHeaderSearchPlaceholder(column: BaseTableColumn<BaseTableRow>) {
-  return getHeaderSearchConfig(column)?.placeholder || '请输入搜索内容'
+  return getHeaderSearchConfig(column)?.placeholder || (isHeaderSearchChoice(column) ? '请选择' : '请输入搜索内容')
 }
 
 function getHeaderSearchWidth(column: BaseTableColumn<BaseTableRow>) {
@@ -606,6 +970,218 @@ function getHeaderSearchResetText(column: BaseTableColumn<BaseTableRow>) {
   return getHeaderSearchConfig(column)?.resetText || '重置'
 }
 
+function getHeaderSearchOptions(column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchConfig(column)?.options || column.options || []
+}
+
+function getHeaderSearchOptionValue(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  const valueKey = getHeaderSearchConfig(column)?.optionValueKey || column.optionValueKey || 'value'
+  return normalizeHeaderSearchPrimitiveValue((option as Record<string, any>)[valueKey])
+}
+
+function getHeaderSearchOptionLabel(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  const labelKey = getHeaderSearchConfig(column)?.optionLabelKey || column.optionLabelKey || 'label'
+  const label = (option as Record<string, any>)[labelKey]
+  return label === undefined || label === null ? '' : String(label)
+}
+
+function isHeaderSearchOptionDisabled(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  const disabledKey = getHeaderSearchConfig(column)?.optionDisabledKey || 'disabled'
+  return Boolean((option as Record<string, any>)[disabledKey])
+}
+
+function getHeaderSearchOptionChildren(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  const childrenKey = getHeaderSearchConfig(column)?.optionChildrenKey || 'children'
+  const children = (option as Record<string, any>)[childrenKey]
+  return Array.isArray(children) ? children as BaseTableOption[] : []
+}
+
+function hasHeaderSearchOptionChildren(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  return getHeaderSearchOptionChildren(option, column).length > 0
+}
+
+function getHeaderSearchSelectLabel(column: BaseTableColumn<BaseTableRow>) {
+  const selectedLabels = getHeaderSearchSelectedLabels(column)
+
+  if (!selectedLabels.length) {
+    return getHeaderSearchPlaceholder(column)
+  }
+
+  return selectedLabels.join('、')
+}
+
+function getHeaderSearchSelectedLabels(column: BaseTableColumn<BaseTableRow>) {
+  const selectedValues = toComparableValues(getHeaderSearchValue(column))
+
+  return selectedValues.map((selectedValue) => {
+    const matchedOption = getHeaderSearchOptions(column).find((option) => {
+      return String(getHeaderSearchOptionValue(option, column)) === selectedValue
+    })
+
+    return matchedOption ? getHeaderSearchOptionLabel(matchedOption, column) : selectedValue
+  })
+}
+
+function isHeaderSearchOptionSelected(option: BaseTableOption, column: BaseTableColumn<BaseTableRow>) {
+  const optionValue = String(getHeaderSearchOptionValue(option, column))
+  return toComparableValues(getHeaderSearchValue(column)).includes(optionValue)
+}
+
+function handleHeaderSearchSelectEmpty(column: BaseTableColumn<BaseTableRow>) {
+  updateHeaderSearchValue(column, getHeaderSearchEmptyValue(column))
+  headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false
+}
+
+function handleHeaderSearchSelectValue(
+  column: BaseTableColumn<BaseTableRow>,
+  optionValue: BaseTableHeaderSearchPrimitiveValue
+) {
+  if (!isHeaderSearchMultiple(column)) {
+    updateHeaderSearchValue(column, optionValue)
+    headerSearchSelectOpen[getHeaderSearchStateKey(column)] = false
+    return
+  }
+
+  const currentValues = Array.isArray(getHeaderSearchValue(column))
+    ? [...getHeaderSearchValue(column) as BaseTableHeaderSearchPrimitiveValue[]]
+    : []
+  const comparableValue = String(optionValue)
+  const matchedIndex = currentValues.findIndex((item) => String(item) === comparableValue)
+
+  if (matchedIndex >= 0) {
+    currentValues.splice(matchedIndex, 1)
+  } else {
+    currentValues.push(optionValue)
+  }
+
+  updateHeaderSearchValue(column, currentValues)
+}
+
+function handleHeaderSearchSelectOption(column: BaseTableColumn<BaseTableRow>, option: BaseTableOption) {
+  handleHeaderSearchSelectValue(column, getHeaderSearchOptionValue(option, column))
+}
+
+function getHeaderSearchCascaderValue(column: BaseTableColumn<BaseTableRow>) {
+  return normalizeHeaderSearchPathValue(getHeaderSearchValue(column))
+}
+
+function syncHeaderSearchCascaderActivePath(column: BaseTableColumn<BaseTableRow>) {
+  if (!isHeaderSearchCascader(column)) {
+    return
+  }
+
+  const stateKey = getHeaderSearchStateKey(column)
+  headerSearchCascaderActivePaths[stateKey] = getHeaderSearchCascaderValue(column)
+}
+
+function getHeaderSearchCascaderActivePath(column: BaseTableColumn<BaseTableRow>) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const activePath = headerSearchCascaderActivePaths[stateKey]
+
+  if (activePath) {
+    return activePath
+  }
+
+  return getHeaderSearchCascaderValue(column)
+}
+
+function getHeaderSearchCascaderColumns(column: BaseTableColumn<BaseTableRow>) {
+  const columns: BaseTableOption[][] = []
+  let levelOptions = getHeaderSearchOptions(column)
+  const activePath = getHeaderSearchCascaderActivePath(column)
+  let levelIndex = 0
+
+  while (levelOptions.length) {
+    columns.push(levelOptions)
+
+    const activeValue = activePath[levelIndex]
+    const activeOption = levelOptions.find((option) => {
+      return String(getHeaderSearchOptionValue(option, column)) === String(activeValue)
+    })
+
+    if (!activeOption) {
+      break
+    }
+
+    levelOptions = getHeaderSearchOptionChildren(activeOption, column)
+    levelIndex += 1
+  }
+
+  return columns
+}
+
+function getHeaderSearchCascaderLabel(column: BaseTableColumn<BaseTableRow>) {
+  const path = getHeaderSearchCascaderValue(column)
+
+  if (!path.length) {
+    return getHeaderSearchPlaceholder(column)
+  }
+
+  return getHeaderSearchCascaderPathLabels(column, path).join(' / ')
+}
+
+function getHeaderSearchCascaderPathLabels(
+  column: BaseTableColumn<BaseTableRow>,
+  path = getHeaderSearchCascaderValue(column)
+) {
+  const labels: string[] = []
+  let levelOptions = getHeaderSearchOptions(column)
+
+  path.forEach((value) => {
+    const matchedOption = levelOptions.find((option) => {
+      return String(getHeaderSearchOptionValue(option, column)) === String(value)
+    })
+
+    if (!matchedOption) {
+      labels.push(String(value))
+      levelOptions = []
+      return
+    }
+
+    labels.push(getHeaderSearchOptionLabel(matchedOption, column))
+    levelOptions = getHeaderSearchOptionChildren(matchedOption, column)
+  })
+
+  return labels
+}
+
+function isHeaderSearchCascaderOptionActive(
+  column: BaseTableColumn<BaseTableRow>,
+  option: BaseTableOption,
+  levelIndex: number
+) {
+  const activePath = getHeaderSearchCascaderActivePath(column)
+  return String(activePath[levelIndex]) === String(getHeaderSearchOptionValue(option, column))
+}
+
+function isHeaderSearchCascaderOptionSelected(
+  column: BaseTableColumn<BaseTableRow>,
+  option: BaseTableOption,
+  levelIndex: number
+) {
+  const selectedPath = getHeaderSearchCascaderValue(column)
+  return String(selectedPath[levelIndex]) === String(getHeaderSearchOptionValue(option, column))
+}
+
+function handleHeaderSearchCascaderOption(
+  column: BaseTableColumn<BaseTableRow>,
+  option: BaseTableOption,
+  levelIndex: number
+) {
+  const stateKey = getHeaderSearchStateKey(column)
+  const optionValue = getHeaderSearchOptionValue(option, column)
+  const nextPath = [
+    ...getHeaderSearchCascaderActivePath(column).slice(0, levelIndex),
+    optionValue
+  ]
+
+  headerSearchCascaderActivePaths[stateKey] = nextPath
+
+  if (!hasHeaderSearchOptionChildren(option, column)) {
+    updateHeaderSearchValue(column, nextPath)
+  }
+}
+
 async function handleHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
   closeHeaderSearch(column)
   paginationState.currentPage = 1
@@ -620,7 +1196,7 @@ async function handleHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
 }
 
 async function handleHeaderSearchReset(column: BaseTableColumn<BaseTableRow>) {
-  updateHeaderSearchValue(column, '')
+  updateHeaderSearchValue(column, getHeaderSearchEmptyValue(column))
   closeHeaderSearch(column)
   paginationState.currentPage = 1
   emitPagination()
@@ -634,7 +1210,9 @@ async function handleHeaderSearchReset(column: BaseTableColumn<BaseTableRow>) {
 }
 
 function closeHeaderSearch(column: BaseTableColumn<BaseTableRow>) {
-  headerSearchDropdownRefs.value[getHeaderSearchStateKey(column)]?.handleClose?.()
+  const stateKey = getHeaderSearchStateKey(column)
+  headerSearchVisible[stateKey] = false
+  headerSearchSelectOpen[stateKey] = false
 }
 
 function buildHeaderSearchParams() {
@@ -644,13 +1222,13 @@ function buildHeaderSearchParams() {
     }
 
     const paramKey = resolveHeaderSearchParamKey(column)
-    const value = getHeaderSearchValue(column).trim()
+    const value = getHeaderSearchValue(column)
 
-    if (!paramKey || !value) {
+    if (!paramKey || !isHeaderSearchValueFilled(value)) {
       return result
     }
 
-    result[paramKey] = value
+    result[paramKey] = normalizeHeaderSearchRequestValue(column, value)
     return result
   }, {})
 }
@@ -667,7 +1245,7 @@ function filterLocalRows(data: BaseTableRow[]) {
     .filter((column) => hasHeaderSearch(column) && hasHeaderSearchValue(column))
     .map((column) => ({
       column,
-      keyword: getHeaderSearchValue(column).trim().toLowerCase()
+      value: getHeaderSearchValue(column)
     }))
 
   if (!activeColumns.length) {
@@ -675,24 +1253,144 @@ function filterLocalRows(data: BaseTableRow[]) {
   }
 
   return normalizeRows(data).filter((row) => {
-    return activeColumns.every(({ column, keyword }) => {
+    return activeColumns.every(({ column, value: searchValue }) => {
       const columnProp = getColumnProp(column)
       if (!columnProp) {
         return true
       }
 
       const value = getCellValue(row, column)
-      return toSearchableText(value).includes(keyword)
+      if (isHeaderSearchSelect(column)) {
+        return matchesHeaderSearchSelectValue(value, searchValue)
+      }
+
+      if (isHeaderSearchCascader(column)) {
+        return matchesHeaderSearchCascaderValue(value, searchValue)
+      }
+
+      return toSearchableText(value).includes(toHeaderSearchKeyword(searchValue))
     })
   })
 }
 
-function normalizeHeaderSearchValue(value: unknown) {
+function getHeaderSearchEmptyValue(column: BaseTableColumn<BaseTableRow>): BaseTableHeaderSearchValue {
+  return isHeaderSearchMultiple(column) || isHeaderSearchCascader(column) ? [] : ''
+}
+
+function normalizeHeaderSearchValue(
+  column: BaseTableColumn<BaseTableRow>,
+  value: unknown
+): BaseTableHeaderSearchValue {
+  if (isHeaderSearchCascader(column)) {
+    return normalizeHeaderSearchPathValue(value)
+  }
+
+  if (!isHeaderSearchSelect(column)) {
+    if (value === undefined || value === null) {
+      return ''
+    }
+
+    return String(value)
+  }
+
+  if (isHeaderSearchMultiple(column)) {
+    const values = Array.isArray(value) ? value : [value]
+    return values
+      .filter((item) => isHeaderSearchValueFilled(item))
+      .map((item) => normalizeHeaderSearchPrimitiveValue(item))
+  }
+
+  if (Array.isArray(value)) {
+    const firstFilledValue = value.find((item) => isHeaderSearchValueFilled(item))
+    return firstFilledValue === undefined ? '' : normalizeHeaderSearchPrimitiveValue(firstFilledValue)
+  }
+
   if (value === undefined || value === null) {
     return ''
   }
 
-  return String(value)
+  return normalizeHeaderSearchPrimitiveValue(value)
+}
+
+function normalizeHeaderSearchPrimitiveValue(value: unknown): BaseTableHeaderSearchPrimitiveValue {
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return value
+  }
+
+  return String(value ?? '')
+}
+
+function normalizeHeaderSearchPathValue(value: unknown): BaseTableHeaderSearchPrimitiveValue[] {
+  const values = Array.isArray(value) ? value : [value]
+
+  return values
+    .filter((item) => !Array.isArray(item) && isHeaderSearchValueFilled(item))
+    .map((item) => normalizeHeaderSearchPrimitiveValue(item))
+}
+
+function normalizeHeaderSearchRequestValue(
+  column: BaseTableColumn<BaseTableRow>,
+  value: BaseTableHeaderSearchValue
+) {
+  if (Array.isArray(value)) {
+    return [...value]
+  }
+
+  if (isHeaderSearchSelect(column)) {
+    return value
+  }
+
+  return String(value).trim()
+}
+
+function isHeaderSearchValueFilled(value: unknown): boolean {
+  if (Array.isArray(value)) {
+    return value.some((item) => isHeaderSearchValueFilled(item))
+  }
+
+  return value !== undefined && value !== null && String(value).trim() !== ''
+}
+
+function toHeaderSearchKeyword(value: BaseTableHeaderSearchValue) {
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item).trim()).join(' ').toLowerCase()
+  }
+
+  return String(value).trim().toLowerCase()
+}
+
+function matchesHeaderSearchSelectValue(rowValue: unknown, searchValue: BaseTableHeaderSearchValue) {
+  const selectedValues = toComparableValues(searchValue)
+
+  if (!selectedValues.length) {
+    return true
+  }
+
+  const rowValues = toComparableValues(rowValue)
+  return rowValues.some((item) => selectedValues.includes(item))
+}
+
+function matchesHeaderSearchCascaderValue(rowValue: unknown, searchValue: BaseTableHeaderSearchValue) {
+  const selectedPath = normalizeHeaderSearchPathValue(searchValue)
+
+  if (!selectedPath.length) {
+    return true
+  }
+
+  const rowPath = normalizeHeaderSearchPathValue(rowValue)
+
+  if (!rowPath.length) {
+    return false
+  }
+
+  return selectedPath.every((item, index) => String(rowPath[index]) === String(item))
+}
+
+function toComparableValues(value: unknown) {
+  const values = Array.isArray(value) ? value : [value]
+  return values
+    .filter((item) => isHeaderSearchValueFilled(item))
+    .map((item) => String(item))
 }
 
 function toSearchableText(value: unknown): string {
@@ -979,11 +1677,13 @@ function findHeaderSearchColumn(key: string) {
   })
 }
 
-async function setHeaderSearchValue(key: string, value: string, shouldReload = true) {
+async function setHeaderSearchValue(key: string, value: BaseTableHeaderSearchValue, shouldReload = true) {
   const matchedColumn = findHeaderSearchColumn(key)
   const stateKey = matchedColumn ? getHeaderSearchStateKey(matchedColumn) : key
 
-  headerSearchValues[stateKey] = normalizeHeaderSearchValue(value)
+  headerSearchValues[stateKey] = matchedColumn
+    ? normalizeHeaderSearchValue(matchedColumn, value)
+    : value
 
   if (!shouldReload) {
     return
@@ -1017,8 +1717,11 @@ async function resetHeaderSearch(key?: string) {
     Object.keys(headerSearchValues).forEach((stateKey) => {
       delete headerSearchValues[stateKey]
     })
-    Object.keys(headerSearchDropdownRefs.value).forEach((stateKey) => {
-      headerSearchDropdownRefs.value[stateKey]?.handleClose?.()
+    Object.keys(headerSearchVisible).forEach((stateKey) => {
+      headerSearchVisible[stateKey] = false
+    })
+    Object.keys(headerSearchSelectOpen).forEach((stateKey) => {
+      headerSearchSelectOpen[stateKey] = false
     })
   }
 
@@ -1060,6 +1763,13 @@ defineExpose<BaseTableExpose>({
   min-height: 0;
 }
 
+.base-table__svg-sprite {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
 .base-table__toolbar {
   display: flex;
   align-items: center;
@@ -1094,21 +1804,75 @@ defineExpose<BaseTableExpose>({
   min-width: 0;
 }
 
+.base-table__header--center.base-table__header--has-actions::before {
+  content: '';
+  display: block;
+  width: 24px;
+  flex: 0 0 24px;
+}
+
+.base-table__header--center {
+  justify-content: center;
+}
+
+.base-table__header--right {
+  justify-content: flex-end;
+}
+
+.base-table__header-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
 .base-table__header-label {
-  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.base-table__header--left .base-table__header-main {
+  flex: 1 1 auto;
+}
+
+.base-table__header--center .base-table__header-main,
+.base-table__header--right .base-table__header-main {
+  flex: 0 1 auto;
+}
+
+.base-table__header-sort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: #8c8c8c;
+}
+
+.base-table__header-sort.is-active {
+  color: #0938f7;
+}
+
+.base-table__header-sort-icon {
+  width: 15.351px;
+  height: 16.031px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
 .base-table__header-actions {
   display: flex;
   align-items: center;
-  margin-left: auto;
   flex-shrink: 0;
 }
 
+.base-table__header--left .base-table__header-actions {
+  margin-left: auto;
+}
+
 .base-table__header-icon {
   display: inline-flex;
   align-items: center;
@@ -1130,48 +1894,268 @@ defineExpose<BaseTableExpose>({
   background: rgba(64, 158, 255, 0.12);
 }
 
-.base-table__header-icon-mark {
+.base-table__header-search-icon {
+  width: 17.814px;
+  height: 14.035px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.base-table :deep(.el-table__cell.is-sortable .caret-wrapper) {
+  display: none;
+}
+
+.base-table__header-search-panel {
+  position: fixed;
+  z-index: 3000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: var(--el-popover-padding, 12px);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-popover-border-radius, 4px);
+  background: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
+  box-sizing: border-box;
+}
+
+.base-table__header-search-input {
+  width: 100%;
+  height: 32px;
+  padding: 1px 11px;
+  border: none;
+  border-radius: var(--el-border-radius-base);
+  outline: none;
+  color: var(--el-text-color-regular);
+  background: var(--el-fill-color-blank);
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  box-sizing: border-box;
+  font-size: var(--el-font-size-base);
+  line-height: 30px;
+  transition: box-shadow var(--el-transition-duration);
+}
+
+.base-table__header-search-input:hover {
+  box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+}
+
+.base-table__header-search-input:focus {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.base-table__header-search-input::placeholder {
+  color: var(--el-text-color-placeholder);
+}
+
+.base-table__header-select,
+.base-table__header-cascader {
   position: relative;
-  display: inline-block;
-  width: 14px;
-  height: 14px;
+  width: 100%;
+}
+
+.base-table__header-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 11px;
+  border: none;
+  border-radius: var(--el-border-radius-base);
+  outline: none;
+  color: var(--el-text-color-regular);
+  background: var(--el-fill-color-blank);
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
   box-sizing: border-box;
-  border: 2px solid currentColor;
-  border-radius: 999px;
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  line-height: 24px;
+  text-align: left;
+  transition: box-shadow var(--el-transition-duration);
 }
 
-.base-table__header-icon-mark::after {
-  content: '';
-  position: absolute;
-  right: -6px;
-  bottom: -4px;
-  width: 7px;
-  height: 2px;
-  border-radius: 999px;
-  background: currentColor;
-  transform: rotate(45deg);
-  transform-origin: center;
+.base-table__header-select-trigger:hover,
+.base-table__header-select-trigger:focus {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+
+.base-table__header-select-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.base-table__header-select-text.is-placeholder {
+  color: var(--el-text-color-placeholder);
 }
 
-.base-table__header-dropdown {
+.base-table__header-select-tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.base-table__header-select-tag {
   display: inline-flex;
   align-items: center;
+  max-width: 92px;
+  min-height: 22px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-regular);
+  box-sizing: border-box;
+  font-size: 12px;
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.base-table__header-search-panel {
+.base-table__header-select-tag--count {
+  flex: 0 0 auto;
+  color: var(--el-color-primary);
+}
+
+.base-table__header-select-arrow {
+  width: 8px;
+  height: 8px;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  color: var(--el-text-color-placeholder);
+  transform: rotate(45deg);
+  transition: transform var(--el-transition-duration);
+  flex: 0 0 auto;
+}
+
+.base-table__header-select-arrow.is-open {
+  transform: rotate(225deg);
+}
+
+.base-table__header-select-options {
+  max-height: 180px;
+  margin-top: 6px;
+  padding: 4px 0;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  background: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
+  overflow-y: auto;
+}
+
+.base-table__header-select-option {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 12px;
+  border: none;
+  color: var(--el-text-color-regular);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  line-height: 32px;
+  text-align: left;
 }
 
-:deep(.base-table__header-search-menu) {
-  padding: 0;
+.base-table__header-select-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-:deep(.base-table__header-search-dropdown) {
-  padding: 0;
-  border-radius: 12px;
+.base-table__header-select-option:hover {
+  background: var(--el-fill-color-light);
+}
+
+.base-table__header-select-option.is-selected {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+
+.base-table__header-select-option:disabled {
+  color: var(--el-text-color-placeholder);
+  cursor: not-allowed;
+}
+
+.base-table__header-cascader-panel {
+  display: flex;
+  max-width: calc(100vw - 24px);
+  min-height: 180px;
+  max-height: 260px;
+  margin-top: 6px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--el-border-radius-base);
+  background: var(--el-bg-color-overlay);
+  box-shadow: var(--el-box-shadow-light);
+  overflow: auto;
+}
+
+.base-table__header-cascader-menu {
+  min-width: 132px;
+  padding: 4px 0;
+  border-right: 1px solid var(--el-border-color-lighter);
+  box-sizing: border-box;
+}
+
+.base-table__header-cascader-menu:last-child {
+  border-right: none;
+}
+
+.base-table__header-cascader-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 10px 0 12px;
+  border: none;
+  color: var(--el-text-color-regular);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--el-font-size-base);
+  line-height: 32px;
+  text-align: left;
+}
+
+.base-table__header-cascader-option:hover,
+.base-table__header-cascader-option.is-active {
+  background: var(--el-fill-color-light);
+}
+
+.base-table__header-cascader-option.is-selected {
+  color: var(--el-color-primary);
+  font-weight: 700;
+}
+
+.base-table__header-cascader-option:disabled {
+  color: var(--el-text-color-placeholder);
+  cursor: not-allowed;
+}
+
+.base-table__header-cascader-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.base-table__header-cascader-arrow {
+  width: 7px;
+  height: 7px;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  color: var(--el-text-color-placeholder);
+  transform: rotate(-45deg);
+  flex: 0 0 auto;
 }
 
 .base-table__header-search-footer {