vue+elementui的el-table下filters过滤器的使用 小白
vue+elementui的el-table下filters过滤器的使用小白<el-table-column prop="sex" label="性别" :filters="filterList" :filter-method="handleFilterChange"><template slot-scope="scope">{{sexValue[scope.row.mol
·
<el-table-column prop="sex" label="性别" :filters="filterList" :filter-method="handleFilterChange">
<template slot-scope="scope">
{{sexValue[scope.row.mold]}}
</template>
</el-table-column>
//这里是拿到tableData的所有sex性别属性,但是筛选的下拉框只有男/女 所有[...new Set()]去重复
var aaa = [
...new Set(this.tableData.map((item) => this.sexValue[item.sex]))
]
//这里可以用map,但我对reduce情有独钟。
//因为官网规定filters的是Array[{text,value}]这种格式,所有我们弄成官网需要的格式
this.filterList = aaa.reduce((acc, item, index) => {
acc.push({
text: item,
value: index
})
return acc
}, [])
//这样我们就可以看筛选的下拉框了。还有配置下拉规则
根据官网,filter-mothod是筛选的方法,这步可以直接复制,不用改动。column下有个叫’property’的属性,值就是prop绑定的值,这里是sex。所以 row.sex === value 这步应该很清楚了,不理解console就能明白了
//:filter-method="handleFilterChange"
handleFilterChange(value, row, column) {
const property = column['property']
return row[property] === value
},
更多推荐
已为社区贡献3条内容
所有评论(0)