带筛选功能的el-table

多选展示

单选展示

Html部分代码

column-key=“states” 指定筛选条件字段（filterChange方法有一个参数filters states就说该参数的一个值）
:filter-multiple=“false” 指定多选或单选

data部分

data(){
return{
statesOptions: [
        { value: "pending", text: "待处理" },
        { value: "processing", text: "处理中" },
        { value: "verifying", text: "检测中" },
        { value: "pass", text: "已处理" },
      ],
}
}

statesOptions为筛选选项

JS部分代码

filterChange(filters) {
      this.requestData.states=filters.states.join(); 
      this.handleCurrentChange(1);  //只要是有查询  都要更新一下当前页  否则数据有时候会不显示  
      this.getList();
    },

注意：this.handleCurrentChange(1);
只要有查询 不管是怎么查询 获取数据列表前 都需要这一行代码 加上后用户体验较好