element-ui的表格筛选（后端筛选）

<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>