前言：效果图

image.png

组件可实现的功能

1. 鼠标上移出现筛选条件；
2. 自定义key、value；
3. 选择筛选条件列表数据刷新；
4. 全局封装，所有表头均可使用

第一步：新建headerFilter组件文件夹

文件夹中新加index.vue文件，代码如下：

<template>
  <el-dropdown @command="filterChange">
    <i :class="['iconfont', 'icon-filter', currentValue !== '' ? 'active' : '']"></i>
    <el-dropdown-menu
      slot="dropdown"
      class="ad-search-dropdown"
    >
      <el-dropdown-item
        v-for="(item, index) in list"
        :key="index"
        :command="item[filterValue]"
        :class="item[[filterValue]] === currentValue ? 'active' : ''"
      >
        {{ item[filterLabel] }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    filterList: {
      type: Array,
      default: () => []
    },
    filterValue: {
      type: String,
      default: '',
      required: true
    },
    filterLabel: {
      type: String,
      default: '',
      required: true
    },
    currentValue: {
      type: String,
      default: ''
    }
  },
  computed: {
    list() {
      let { filterList, filterValue, filterLabel } = this
      if (filterList && filterValue && filterLabel) {
        let arr = [].concat(filterList)
        arr.unshift({
          [filterValue]: '',
          [filterLabel]: '全部'
        })
        return arr
      } else {
        return []
      }
    }
  },
  methods: {
    filterChange(id) {
      this.$emit('filterChange', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dropdown {
  cursor: pointer;
}
</style>

图示：

image.png

第二步：main.js全局注册

import headerFilter from '@/components/headerFilter'// 此处按你的实际文件路径来
Vue.component('headerFilter', headerFilter)

第三步：el-table中使用

<el-table-column
            prop="typeName"
            :width="120"
            show-overflow-tooltip
          >
            <template
              slot="header"
              slot-scope="scope"
            >
              <span>商品分类</span>
              <headerFilter
                :filter-list="typeList"
                filter-value="id"
                filter-label="name"
                :current-value="search.typeId"
                @filterChange="filterChangeType"
              />
            </template>
            <template slot-scope="scope">
              {{ scope.row.typeName || '--' }}
            </template>
          </el-table-column>

参数释义（均必填）：

filter-list 下拉的筛选条件数组；
filter-value 指定筛选数组中的哪个字段作为value；
filter-label 指定筛选数组中的哪个字段作为label；
current-value 绑定的值，含义如v-model；
filterChange 选中值变化之后的触发方法，拿到的值是当前选中的value

示例：
假设有一个statusList的状态筛选数组：

statusList:[
    {
        id: '1',
        name: '已启用'
    },
    {
        id: '0',
        name: '已禁用'
    }
]

假设定义筛选值绑定的字段为：statusId
假设触发筛选的方法为：filterChangeStatus

filterChangeStatus(id) {
      this.statusId = id
      this.getList() // 列表刷新的方法
},

则传参定义应设为：

filter-list 下拉的筛选条件数组===statusList；
filter-value 指定筛选数组中的哪个字段作为value===id；
filter-label 指定筛选数组中的哪个字段作为label===name；
current-value 绑定的值，含义如v-model===statusId；
filterChange 选中值变化之后的触发方法，拿到的值是当前选中的value===filterChangeStatus

我是阿星，希望你今天过的愉快。