多选展示 
文章图片
单选展示 
文章图片
Html部分代码
{{scope.row.states=='pending' ? '待处理' : (scope.row.states=='processing' ? '处理中' : (scope.row.states=='pass' ? '已处理' : (scope.row.states=='verifying' ? '检测中' : '')))}}
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: "已处理" },
],
}
}
【ElementUI|带筛选功能的el-table】statesOptions为筛选选项
JS部分代码
filterChange(filters) {
this.requestData.states=filters.states.join();
this.handleCurrentChange(1);
//只要是有查询都要更新一下当前页否则数据有时候会不显示
this.getList();
},
注意：this.handleCurrentChange(1);
只要有查询 不管是怎么查询 获取数据列表前 都需要这一行代码 加上后用户体验较好
推荐阅读
- vue|el-table表头如何添加筛选功能
- SpringBoot|设计一个简单的权限管理系统
- 一分钟教你快速 搭建Vue脚手架（Vue-Cli）项目并整合ElementUI
- vue前端|vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目
- vue|Vue 计算属性与监听属性
- 前端学习记
- elementui的使用|elementui中el-tree懒加载数据 默认展开最外层节点
- 前端学习|仿京东放大镜案例
- VUE|Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）