CABaggageData2.0/src/components/TableHeaderCellWithFilter/index.vue

<!--
 * @Author: Badguy
 * @Date: 2022-05-25 14:09:35
 * @LastEditTime: 2022-05-25 14:53:56
 * @LastEditors: your name
 * @Description: 表头下拉筛选
 * have a nice day!
-->
<template>
  <el-popover
    placement="bottom"
    trigger="click"
    @show="expand = true"
    @hide="expand = false"
  >
    <i
      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="selection"
          size="small"
          placeholder="筛选"
          default-first-option
          filterable
          clearable
          @change="newVal => { $emit('update:filter-value', newVal) }"
        >
          <el-option
            v-for="(option, optionIndex) in filterOptions"
            :key="option.value + optionIndex"
            :value="option.value"
            :label="option.text"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-popover>
</template>

<script>
export default {
  name: 'TableHeaderCellWithFilter',
  props: {
    filterOptions: {
      type: Array,
      required: true
    },
    filterValue: {
      type: String || Number,
      required: true
    },
    label: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selection: '',
      expand: false
    }
  },
  computed: {
    active() {
      return (this.selection ?? '') !== ''
    }
  },
  watch: {
    filterValue(val) {
      this.selection = val
    }
  }
}
</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;
  }
}
.el-select-dropdown__item.hover {
  background: #d2d6df;
}
</style>