前言：效果图
image.png
组件可实现的功能
- 鼠标上移出现筛选条件；
- 自定义key、value；
- 选择筛选条件列表数据刷新；
- 全局封装，所有表头均可使用
第一步：新建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
我是阿星，希望你今天过的愉快。
