element ui - el-table 表头筛选

news2024/7/2 4:32:40

element ui - el-table 表头筛选

  • 前言
    • **场景**:根据表头筛选出表格中符合条件的数据;
    • **效果**:
  • 情况一:表格没有分页
    • 方法
    • 代码


前言

场景:根据表头筛选出表格中符合条件的数据;

效果

在这里插入图片描述
在这里插入图片描述
筛选结果
在这里插入图片描述


情况一:表格没有分页

方法

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

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

代码

html 部分:

 <el-table-column
	prop="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);  // 1
        console.log(row);   // 当前列数据,相当于scope.row
        console.log(column);  // 包含element-ui 属性的对象
        // column['property'] ==> "report_category"
   		const property = column['property']
   		return row[property] === value
	}
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录--栈与队列-用栈实现队列

使用栈实现队列的下列操作&#xff1a; push(x) -- 将一个元素放入队列的尾部。 pop() -- 从队列首部移除元素。 peek() -- 返回队列首部的元素。 empty() -- 返回队列是否为空。 需要两个栈一个输入栈&#xff0c;一个输出栈&#xff0c;这里要注意输入栈和输出栈的关系。 i…

CSDN中,如何创建目录或标题

创建目录或标题 1.复制&#xff0c;自动生成目录2.复制&#xff0c;自动生成标题3.CSDN标准写法如下图 1.复制&#xff0c;自动生成目录 [TOC]或 [TOC](这里写目录标题) # 一级目录 ## 二级目录 ### 三级目录2.复制&#xff0c;自动生成标题 # 一级目录 ## 二级目录 ### 三级目…

Java 多种获取项目路径下的文件

目标文件放在项目的resources文件夹下 的 mytxt文件里面&#xff0c;文件名叫 file Test.txt&#xff1a; 其实可以看到&#xff0c;项目运行后&#xff0c;这个文件被丢到了target文件夹下&#xff1a; 拿到这个文件的 InputStream &#xff1a; 比如我们在FileUtil里面写个获…

懒人制作企业期刊的秘籍

企业期刊是展示企业文化、提升形象、传递信息的重要工具。但是&#xff0c;制作企业期刊需要投入大量的时间和精力&#xff0c;对于忙碌的企业来说是一项艰巨的任务。 所以肯定也有人需要一款不会花费大量时间就能制作出高级感的企业期刊&#xff0c;大家不妨试试FLBOOK在线制…

Feign远程接口调用

概述 目的&#xff1a;解决微服务调用问题。如何从微服务A调用微服务B提供的接口。 特性&#xff1a; 声明式语法&#xff0c;简化接口调用代码开发。像调用本地方法一样调用其他微服务中的接口。集成了Eureka服务发现&#xff0c;可以从注册中心中发现微服务。集成了Spring…

SpringBoot:返回响应,统一封装

说明 接口的返回响应&#xff0c;封装成统一的数据格式&#xff0c;再返回给前端。 返回响应&#xff0c;统一封装实体&#xff0c;数据结构如下。 代码 package com.example.core.model;import io.swagger.v3.oas.annotations.media.Schema; import lombok.*;/*** 返回响应…

英飞凌TC3xx--深度手撕HSM安全启动(四)--TC3xx HSM使能和配置技巧

上一章,我们简单聊了下英飞凌TC3xx的HSM的系统框架、相关UCB、Host和HSM通信模块。今天着重分析HSM的使能。 1. 系统引入HSM的思考 为什么要增加HSM 信息安全方面考虑,系统的安全启动、ECU之间安全数据的交互、ECU内部的敏感信息保存 TC3xx使能HSM后,HSM的代码应该…

spring aop源码解析

spring知识回顾 spring的两个重要功能&#xff1a;IOC、AOP&#xff0c;在ioc容器的初始化过程中&#xff0c;会触发2种处理器的调用&#xff0c; 前置处理器(BeanFactoryPostProcessor)后置处理器(BeanPostProcessor)。 前置处理器的调用时机是在容器基本创建完成时&#xff…

安防监控系统/视频云存储/视频AI智能分析:人形检测算法应用汇总

随着人工智能的飞速发展&#xff0c;TSINGSEE青犀智能AI算法功能也日渐丰富&#xff0c;除了常见的人脸、工服、安全帽检测以外&#xff0c;人形检测算法的应用也十分广泛&#xff0c;主要可以应用在以下场景&#xff1a; 1、安防监控系统 人形检测算法可以应用于监控摄像头中…

ChatGPT OpenAI 针对HR与财务岗位一键核对工资表差异

HR人力资源与财务部门关于奖金的计算,两个部门计算的结果有差异如何将差异内容显示。 如何快速找出不相同的单元格。 我们给ChatGPT来提出需求来解决。 prompt: 请写出一个VBA程序找出E3:E12单元格区域与E16:E25单元格区域中不相同的单元格,并填充为红色背景显示,请写出完…

23062QTday1

自己制作一个登录界面 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget>#include <QApplication>#include <QLineEdit> #include <QLabel> #include <QMovie> class Widget : public QWidget {Q_OBJECTpublic:Widget(…

概率统计笔记:从韦恩图的角度区分 条件概率和联合概率

联合概率&#xff1a;两个或多个事件同时发生的概率。用 P(A∩B) 或 P(A,B) 表示 条件概率&#xff1a;在已知某个事件发生的条件下&#xff0c;另一个事件发生的概率。用P(A∣B) 表示在事件 B 发生的条件下&#xff0c;事件 A 发生的概率。 不难发现联合概率的样本空间更大&am…

多线程|多进程|高并发网络编程

一.多进程并发服务器 多进程并发服务器是一种经典的服务器架构&#xff0c;它通过创建多个子进程来处理客户端连接&#xff0c;从而实现并发处理多个客户端请求的能力。 概念&#xff1a; 服务器启动时&#xff0c;创建主进程&#xff0c;并绑定监听端口。当有客户端连接请求…

华为云云耀云服务器L实例评测 | 搭建docker环境

目录 &#x1f352;docker的概念 &#x1f352;Docker 的优点 &#x1fad0;1、快速&#xff0c;一致地交付您的应用程序 &#x1fad0;2、响应式部署和扩展 &#x1fad0;3、在同一硬件上运行更多工作负载 &#x1f352;云耀云服务器L实例 &#x1fad0;产品优势 &#x1f95d…

如何使用反 CSRF 令牌保护您的网站和 Web 应用程序

防止跨站点请求伪造攻击 (CSRF/XSRF)的最常见方法是使用反 CSRF 令牌&#xff0c;该令牌只是一个唯一值集&#xff0c;然后由 Web 应用程序需要。CSRF 是一种客户端攻击&#xff0c;可用于将用户重定向到恶意网站、窃取敏感信息或在用户会话中执行其他操作。幸运的是&#xff0…

组件自定义事件学习笔记

组件自定义事件_绑定 JS中有内置事件比如click&#xff0c;keyup。内置事件是给标签使用的&#xff0c;而自定义事件是给组件使用的。 子组件给父组件传递数据有两种方式 App父组件&#xff0c;School和Student是子组件。 子组件给父组件传递函数类型的props实现&#xff…

【深度学习】 Python 和 NumPy 系列教程(廿五):Matplotlib详解:3、多子图和布局:subplot()函数

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 2、3d绘图类型 3、多子图和布局 1. subplot()函数 简单示例 一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年创建。它以简洁、易读的语法而闻名&#xff0c;并且具有强大的功能…

【Redis】深入理解 Redis 持久化机制 —— RDB 和 AOF

文章目录 一、Redis 的持久化二、RDB 持久化机制2.1 对 RBD 的认识RDB 的概念RDB 持久化机制的优缺点RDB 的相关配置 2.2 RDB 的触发时机2.2 RDB 的触发时机自动触发手动触发&#xff1a;SAVE 和 BGSAVE 2.3 RDB 文件的处理保存 RDB 文件压缩 RDB 文件校验 RDB 文件 三、AOF 持…

Python如何查看内存泄漏

在python中&#xff0c;当一个变量不被引用的时候就会触发垃圾回收机制从而被从内存中删除&#xff0c;但有时一个不注意可能就会出现内存泄漏问题。 Python中可能的会出现内存泄露的情况 (1) 循环引用&#xff1a;当两个或多个对象相互引用&#xff0c;造成的循环引用进而导…

Pytorch学习:torch.argmax(input, dim, keepdim=False)详解

torch.argmax() 返回输入中所有元素的最大值的索引&#xff0c;与torch.max()中返回(values, indices)中的indices类似&#xff0c;它也常被用于深度学习中的分类问题。 在下面程序中&#xff0c;使用torch.argmax() import torcha torch.tensor([[1, 2, 3, 4],[4, 1, 2, 3]…