SZYGM1.0/src/components/TableHeaderCell/index.vue

<template>
  <div class="table-header-cell el-table-v2__header-cell-text">
    <template v-if="!filterable || filterStyle === 'arrow'">
      {{ label }}
    </template>
    <template v-if="filterable">
      <el-popover
        class="table-header-cell-popover"
        placement="bottom"
        trigger="click"
        @show="expand = true"
        @hide="expand = false"
      >
        <span
          v-if="filterStyle === 'underline'"
          slot="reference"
          :class="['btn-filter', { 'btn-filter-active': active }]"
          >{{ label }}</span
        >
        <i
          v-if="filterStyle === 'arrow'"
          slot="reference"
          :class="[
            'filter-arrow',
            'el-icon-arrow-down',
            { 'arrow-active': active, 'arrow-expand': expand },
          ]"
        />
        <el-form>
          <el-form-item :label="label">
            <el-select
              v-model="selections"
              size="small"
              placeholder="筛选"
              multiple
              filterable
              default-first-option
              collapse-tags
              clearable
              @change="
                newVal => {
                  $emit('update:filter-values', newVal)
                }
              "
            >
              <el-option
                v-for="(option, index) in filterOptions"
                :key="option.value + index"
                :value="option.value"
                :label="option.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-popover>
    </template>
    <template v-if="sortable">
      <span class="caret-wrapper" @click="sortChange">
        <i class="sort-caret ascending" />
        <i class="sort-caret descending" />
      </span>
    </template>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  filterStyle: {
    type: String as PropType<'arrow' | 'underline'>,
    default: 'arrow',
  },
  filterOptions: {
    type: Array as PropType<{ label: string, value: string }[]>,
  },
  filterValues: {
    type: Array<string>,
  },
  sortable: {
    type: Boolean,
    default: false,
  },
  sortRule: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:sortRule'])

const selections = ref<string[]>([])
const expand = ref(false)
const active = computed(() => !!props.filterValues?.length)
const filterable = computed(() => !!props.filterOptions)
watchEffect(() => {
  if (props.filterValues) {
    selections.value = props.filterValues
  }
})
const sortChange = () => {
  const sortRule =
    props.sortRule === ''
      ? 'ascending'
      : props.sortRule === 'ascending'
        ? 'descending'
        : ''
  emit('update:sortRule', sortRule)
}
</script>

<style lang="scss" scoped>
.filter-arrow {
  cursor: pointer;
  transition: 0.3s transform;

  &.arrow-expand {
    transform: rotate(-180deg);
  }

  &.arrow-active {
    color: #2d7cff;
    font-weight: bold;
  }
}

.btn-filter {
  cursor: pointer;
  position: relative;

  &:hover {
    color: #2d7cff;
  }

  &::after {
    content: '';
    display: block;
    width: calc(100% + 4px);
    position: absolute;
    bottom: -4px;
    left: -2px;
    border-bottom: 1px solid #101116;
  }

  &.btn-filter-active,
  &:hover {
    &::after {
      border-bottom: 2px solid #2d7cff;
    }
  }
}

.el-select-dropdown__item.hover {
  background: #d2d6df;
}
</style>