element ui - el-table 表头筛选

element ui - el-table 表头筛选

  • 前言
  • 情况一:表格没有分页
    • 方法
    • 代码


前言

场景:根据表头筛选出表格中符合条件的数据;
效果
在这里插入图片描述
在这里插入图片描述
筛选结果
在这里插入图片描述


情况一:表格没有分页

方法

在列中设置 filtersfilter-method 属性即可开启该列的筛选。

  • filters :筛选的下拉列表,是一个json数组,里面的json对象是 { text: ‘’, value: ‘’ } 的格式,text是下拉选项的显示内容,value则为选择的值;
  • filter-method :筛选时触发的方法,是一个函数,会传入三个参数:value, row 和 column,它的作用是决定某些数据是否显示。

代码

html 部分:

 <el-table-columnprop="report_category"label="举报大类":filters="reportCategoryList":filter-method="filterHandler">
</el-table-column>

js 部分:

data() {return {// 下拉列表:reportCategoryList: [{{ text: '通用', value: 1 },{ text: '发布违规信息', value: 2 },{ text: '恶意游戏行为', value: 3 }...}]}
},
methods: {// 过滤:filterHandler(value, row, column) {console.log(value);  // 1console.log(row);   // 当前列数据,相当于scope.rowconsole.log(column);  // 包含element-ui 属性的对象// column['property'] ==> "report_category"const property = column['property']return row[property] === value}
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/115039.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cpp/Qt-day020918Qt

目录 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两…

在Windos 10专业版搭建Fyne(Go 跨平台GUI)开发环境

目录 在Windos 10专业版搭建Fyne&#xff08;Go 跨平台GUI&#xff09;开发环境一 Fyne 和 MSYS2简介1.1 Fyne1.2 MSYS2 二 安装 MSYS22.1 下载MSYS22.2 安装2.3 环境变量设置2.4 检测安装环境 三 参考文档 在Windos 10专业版搭建Fyne&#xff08;Go 跨平台GUI&#xff09;开发…

第三、四、五场面试

第三场 共享屏幕做题&#xff08;三道简单题&#xff09; 替换空格成%20&#xff08;双指针&#xff09; 删除升序链表中的重复元素&#xff08;指针&#xff09;有效的括号&#xff08;栈&#xff09; 第四场、第五场 自我介绍 项目拷打 整个项目架构rpc模块的情况分析的数…

【lesson8】操作系统的理解和类比

文章目录 操作系统是什么&#xff1f;为什么要有操作系统&#xff1f;怎么做&#xff1f;学校的例子&#xff08;理解管理&#xff09;银行的例子&#xff08;类比操作系统&#xff09; 操作系统是什么&#xff1f; 操作系统是一款软件&#xff0c;是为了进行软硬件资源管理的…

芯片SoC设计你了解吗?

数字IC设计根据岗位性质一般包含SOC设计&#xff0c;前端设计&#xff0c;ASIC设计&#xff0c;逻辑设计&#xff0c;IP设计&#xff0c;CPU设计等。 有人说&#xff1a;做IP设计就是翻译官&#xff0c;做SOC设计就是连连看。 SoC设计是做什么的&#xff1f;与IP设计有什么不同…

【计算机网络】IP协议

文章目录 TCP与 IP之间的关系IP地址的认识协议报头格式1. 报头和有效载荷如何分离&#xff1f;2. 8位协议3. 4位版本4. 8位服务类型5. 16位总长度6. 8位生存时间 TTL 网段划分IP地址的划分 子网划分CIDR的提出如何理解CIDR TCP与 IP之间的关系 如&#xff1a;假设 你上高中时&…

前后台分离开发 YAPI平台 前端工程化之Vue-cli

目录 YAPI介绍前端工程化之Vue-cli前端工程化简介前端工程化入门——Vue-cli环境准备Vue项目简介创建Vue项目vue项目目录结构介绍vue项目运行方法 Vue项目开发流程 前后台混合开发这种开发模式有如下缺点&#xff1a; 沟通成本高&#xff1a;后台人员发现前端有问题&#xff0…

每天几道Java面试题:IO流(第五天)

目录 第五幕 、第一场&#xff09;街边 友情提醒 背面试题很枯燥&#xff0c;加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。 第五幕 、 第一场&#xff09;街边 【衣衫褴褛老者&#xff0c;保洁阿姨&#xff0c;面试者老王】 衣衫褴褛老…

第三天:实现网络编程基于tcp/udp协议在Ubuntu与gec6818开发板之间双向通信

互联网地址 每一台设备接入互联网后&#xff0c;都会举报一个唯一的地址编号 IP地址 INTERNET地址 internet地址 &#xff1a;它是协议上的一个逻辑地址 目前来说&#xff0c;我们主要的IP地址有两类 IPV4 IPV6 IPV4 其实就是使用一个32bit整数作为IP IPV6 其实就是使用一…

LabVIEW开发基于物联网的多功能功率分析仪

LabVIEW开发基于物联网的多功能功率分析仪 根据技术规则&#xff0c;电气元件网络中的单个被创建为在标称正弦波振动制造频率下运行。失真顺序的电流和电压波与正弦波不同&#xff0c;它们或多或少地扭曲成形状。它是由交流网络中非线性组件的存在引起的&#xff0c;例如静态转…

无人机“长坡”上,谁是滚出“厚雪球”的长期主义者?

“股神”巴菲特&#xff0c;曾提出过“长坡厚雪”的理论&#xff1a; 人生就像滚雪球&#xff0c;重要的是发现很湿的雪和很长的坡。 运用到企业经营上&#xff0c;“长坡”指的是企业所布局的领域发展潜力足、空间大&#xff1b;而“湿雪”&#xff0c;指的是企业竞争力强、…

Dokcer搭建Apache Guacamole堡垒机

一、什么是堡垒机 “堡垒机” 这个词通常指的是 “堡垒机器”&#xff08;Bastion Host&#xff09;的简称。堡垒机是一种计算机系统或网络设备&#xff0c;用于增强计算机网络的安全性。它在网络中充当一个重要的安全关口&#xff0c;通过限制对内部网络的访问&#xff0c;帮…