前言：效果圖

image.png

組件可實(shí)現(xiàn)的功能

1. 鼠標(biāo)上移出現(xiàn)篩選條件；
2. 自定義key、value；
3. 選擇篩選條件列表數(shù)據(jù)刷新；
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全局注冊(cè)

import headerFilter from '@/components/headerFilter'// 此處按你的實(shí)際文件路徑來(lái)
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>

參數(shù)釋義（均必填）：

filter-list 下拉的篩選條件數(shù)組；
filter-value 指定篩選數(shù)組中的哪個(gè)字段作為value；
filter-label 指定篩選數(shù)組中的哪個(gè)字段作為label；
current-value 綁定的值，含義如v-model；
filterChange 選中值變化之后的觸發(fā)方法，拿到的值是當(dāng)前選中的value

示例：
假設(shè)有一個(gè)statusList的狀態(tài)篩選數(shù)組：

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

假設(shè)定義篩選值綁定的字段為：statusId
假設(shè)觸發(fā)篩選的方法為：filterChangeStatus

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

則傳參定義應(yīng)設(shè)為：

filter-list 下拉的篩選條件數(shù)組===statusList；
filter-value 指定篩選數(shù)組中的哪個(gè)字段作為value===id；
filter-label 指定篩選數(shù)組中的哪個(gè)字段作為label===name；
current-value 綁定的值，含義如v-model===statusId；
filterChange 選中值變化之后的觸發(fā)方法，拿到的值是當(dāng)前選中的value===filterChangeStatus

我是阿星，希望你今天過(guò)的愉快。