前言：效果圖
image.png
組件可實現(xiàn)的功能
- 鼠標上移出現(xiàn)篩選條件；
- 自定義key近范、value嘶摊；
- 選擇篩選條件列表數(shù)據(jù)刷新；
- 全局封裝评矩，所有表頭均可使用
第一步：新建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>
參數(shù)釋義（均必填）：
filter-list下拉的篩選條件數(shù)組；
filter-value指定篩選數(shù)組中的哪個字段作為value斥杜；
filter-label指定篩選數(shù)組中的哪個字段作為label虱颗；
current-value綁定的值，含義如v-model蔗喂；
filterChange選中值變化之后的觸發(fā)方法忘渔，拿到的值是當(dāng)前選中的value
示例：
假設(shè)有一個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ù)組中的哪個字段作為value===id缰儿；
filter-label指定篩選數(shù)組中的哪個字段作為label===name畦粮；
current-value綁定的值，含義如v-model===statusId乖阵；
filterChange選中值變化之后的觸發(fā)方法宣赔，拿到的值是當(dāng)前選中的value===filterChangeStatus
我是阿星，希望你今天過的愉快义起。
