<template>
<div class="app-container">
<div>
<el-table :data="tableList" @filter-change="filterChange">
<el-table-column
label="手机品牌"
align="center"
prop="phoneBrand"
:filters="phoneBrandList"
:column-key="columnKey[0]"
:filter-multiple="false" />
<el-table-column
label="发布时间"
align="center"
prop="time"
:filters="timeList"
:column-key="columnKey[1]"
:filter-multiple="false" />
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "phone",
data(){
return {
//表格数据
tableList:[],
//表头筛选
columnKey:['phoneBrand1','time1'],
//筛选表头列表
phoneBrandList:[
{
text: "苹果",
value: "苹果"
},{
text: "华为",
value: "华为"
}],
timeList:[{
text:"2013",
value:"2013"
},{
text:"2014",
value:"2014"
}]
}
},
created(){
//获取到表格数据
this.getList();
},
methods: {
filterChange(filters){
for(const key in filters){
if(key == "phoneBrand1"){
let phoneBrand2 = filters['phoneBrand1'][0];
}else if(key == "time1"){
let time2 = filters['time1'][0];
}
}
//带上筛选条件获取表格数据
this.getList();
}
}
}
</script>
以上为element-ui表格多条件筛选筛选,:filter-multiple="false"表示是否为单选
如果筛选列表从若依的字典中获取,则列表获取方法为:
//获取字典数据转为筛选列表
this.getDicts("字典名").then(response => {
let list = response.data;
for(let i=0;i<list.length;i++){
this.筛选列表.push({
text:list[i].dictLabel,
value:list[i].dictValue
});
}
}
若果要将筛选列表进行滚动,则设置css:
<style lang="scss" scoped>
::v-deep .el-table-filter__list{
max-height: 500px;
overflow-y: auto;
}
</style>
类名按自己的实际情况来写
注:如果设置的css在页面上设置生效,但是在代码中不生效
解决办法(但是不推荐)
//全局生效
<style lang="scss">
.el-table-filter__list{
max-height: 500px;
overflow-y: auto;
}
</style>