首先了解一下表格列的筛选
<el-table-column prop="tag" label="标签" width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
:filter-method="filterTag" filter-placement="bottom-end">
<template scope="scope">
<el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" close-transition
{{scope.row.tag}}
</el-tag>
</template>
</el-table-column>
这里是对当前的表格的每一行进行过滤,缺点就是要每一行都进行过滤,如果操作不当就会导致死循环,页面卡死,并且不能进行全局过滤,也就是只能分页的这一页,后面的分页数据不会过滤,导致切换分页就会数据错乱
全部数据的过滤方法
-
@filter-change 要写在table根元素,也就是<el-table @filter-change="filterChange" >
-
需要筛选的项,要写上 column-key="hosttype",这里是指定唯一的key值名
fliterChange(filters){
// 这里拿到对应的列进行数据过滤
const filterskey = filters.hosttype
console.log(filterskey)
if (filterskey.length>0) {
this.blist = this.list.filter(data => {
return Object.keys(data).some(key => {
return data['hosttype'] ===filterskey[0]
})
})
this.total = this.blist.length
return this.blist
}
this.blist = this.list
this.total = this.blist.length
return this.list
}