VUE, element-plus, table分页表格列增加下拉筛选多选框,请求后台

简介

为了方便表格查询时可以筛选列的值,需要给列增加筛选框(多选框),element-plus提供了列的filter字段,但是基于表格数据的筛选,不会重新请求后台,而且当前表格数据有多少个条目,就会执行filter method多少遍,如果符合要求的条目就会展示出来,基于它自带的filter想去改造为请求后台就很复杂,性能很差(因为我只需要请求一次后台)。

因此,我需要自己写一个组件,给表格的列增加一个下拉按钮,是一个多选框可以筛选列的值,然后自己去根据每次的筛选请求一次后台数据。

实际效果如下:

话不多说,直接上code。

vue组件代码

这里手动给列增加了一个下拉框,鼠标移动上去会自动展开,然后是个多选框,绑定了值,点击筛选按钮会去执行新的查询,点击重置会清空这一列的filter信息。

// statusFilter是status列的筛选信息,默认都不选
statusFilter: []
      <el-table-column prop="status" label="Status" width="145px"><template v-slot:header="{ column }">{{ column.label }}<el-popover placement="bottom" trigger="hover"><el-checkbox-group v-model="statusFilter"><el-checkbox style="display:block;" label="READY" value="READY" size="small" /><el-checkbox style="display:block;" label="UNHEALTHY" value="UNHEALTHY" size="small" /><el-checkbox style="display:block;" label="INITIALIZING" value="INITIALIZING" size="small" /><el-checkbox style="display:block;" label="CHECKING" value="CHECKING" size="small" /></el-checkbox-group><div style="margin-top: 5px"><el-button size="small" @click="handleRefresh">筛选</el-button><el-button size="small" @click="handleRefreshResetStatus">重置</el-button></div><template #reference><el-icon class="clickable-pointer"><ArrowDownBold /></el-icon></template></el-popover></template></el-table-column>

至于refresh table的方法就是简单的刷新表格,重新请求后台,只需要每次请求后台时,把filter参数的信息带上去查询后台就可以了,后台需要支持filter字段。

重置的话,把filter的值重置为[],然后依然请求后台就可以了。

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

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

相关文章

荣耀MagicOS 9.0发布会及开发者大会丨一图读懂应用服务及商业合作分论坛

更多优质流量变现服务&#xff0c;可点击荣耀广告变现服务查看&#xff1b; 荣耀远航计划——应用市场【耀闪行动】全新上线&#xff0c;更多激励及资源扶持可点击荣耀应用市场耀闪行动查看。

香港大学联合上海AI LAB,提出首个人机交互一体化大模型

导读&#xff1a; 具身智能为人与机器人的交互带来了更多便利&#xff0c;利用大语言模型&#xff08;LLMs&#xff09;的推理能力&#xff0c;能够将人类的语言指令逐步转换为机器人可以理解的指令信号。 然而&#xff0c;由于缺乏环境信息作为机器人理解环境和人类指令的上…

FPGA开发verilog语法基础1

文章目录 主体内容1.1 逻辑值1.2 数字进制格式1.3 数据类型1.3.1 寄存器类型1.3.2 线网类型1.3.3 参数类型1.3.4 存储器类型 参考资料 主体内容 1.1 逻辑值 1&#xff0c;逻辑0&#xff0c;表示低电平 2&#xff0c;逻辑1&#xff0c;表示高电平 3&#xff0c;逻辑X&#xff0…

网站安全问题都有哪些,分别详细说明

网站安全问题涉及多个方面&#xff0c;以下是一些常见的网站安全问题及其详细说明&#xff1a; 数据泄露 问题描述&#xff1a;数据泄露是指网站存储的用户敏感信息&#xff08;如用户名、密码、信用卡信息等&#xff09;被非法获取。黑客可能通过SQL注入、XSS攻击等手段窃取这…

学习分布式系统我来助你!【基本知识、基础理论、设计模式、应用场景、工程应用、缓存等全包含!】

基本知识 什么是分布式 分布式系统是一种通过网络连接多个独立计算机节点&#xff0c;共同协作完成任务的系统架构&#xff0c;具有高度的可扩展性、容错性和并发处理能力&#xff0c;广泛应用于大数据处理、云计算、分布式数据库等领域。 通俗来讲&#xff1a;分布式系统就…

git入门操作(2)

文章目录 git入门操作&#xff08;2&#xff09;git diff 查看差异git diff gitignore忽略文件1.在代码仓库创建这个文件2.添加对 log 文件过滤 连接远程仓库与ssh配置远程仓库和本地仓库关联步骤分支基本操作步骤命令&#xff1a; 合并冲突分支合并逻辑1.新建分支 dev&#xf…

网络安全威胁模型浅谈

威胁建模&#xff08;Threat Modeling&#xff09;是一种系统化识别和评估潜在安全威胁的方法&#xff0c;帮助设计和实施有效的安全策略。以下是一些常见的威胁建模方法&#xff1a; 1. **STRIDE**&#xff1a;这是微软开发的一种威胁建模方法&#xff0c;主要关注六种威胁类…

ONLYOFFICE 文档8.2版本已发布:PDF 协作编辑、改进界面、性能优化等更新

ONLYOFFICE 在线编辑器最新版本已经发布&#xff0c;其中包含30多个新功能和500多个错误修复。阅读本文了解所有更新。 关于 ONLYOFFICE 文档 ONLYOFFICE 是一个开源项目&#xff0c;专注于高级和安全的文档处理。坐拥全球超过 1500 万用户&#xff0c;ONLYOFFICE 是在线办公领…

164.最大间距

目录 题目解法1. 初始化步骤2. 创建桶3. 填充桶4. 计算最大间隔遍历桶&#xff1a; 最终结果结论 int minVal *min_element(nums.begin(), nums.end());这里为什么要带*号解释 * 号的作用&#xff1a;总结 题目 给定一个无序的数组 nums&#xff0c;返回 数组在排序之后&…

Tcp_Sever(线程池版本的 TCP 服务器)

Tcp_Sever&#xff08;线程池版本的 TCP 服务器&#xff09; 前言1. 功能介绍及展示1.1 服务端连接1.2 客户端连接&#xff08;可多个用户同时在线连接服务端&#xff09;1.3 功能服务1.3.1 defaultService&#xff08;默认服务&#xff09;1.3.2 transform&#xff08;大小写转…

【Qt】qss 设置通过 addAction 添加的 QToolButton的图标

文章目录 1. 使用 QSS 和状态示例代码2. 使用 QSS 动态更改图标QSS 示例总结 在 Qt 中&#xff0c;QSS 不能直接用于为 QAction 设置图标&#xff0c;因为 QSS 主要用于样式和外观的设置&#xff0c;而不是用于数据&#xff08;如图标&#xff09;的设置。 不过&#xff0c;你…

HTB:Antique[WriteUP]

目录 连接至HTB服务器并启动靶机 1.After running an nmap scan on TCP ports we identify port 23 open. If we run another scan on UDP ports, which port do we find open? 2.What service is running on the UDP port that we identified in the previous question? …

HTTP Content-Type

HTTP Content-Type 概述 在HTTP协议中&#xff0c;Content-Type是一个非常重要的头部字段&#xff0c;它用于指示客户端请求的资源或服务器响应的内容的MIME类型。MIME&#xff08;Multipurpose Internet Mail Extensions&#xff09;类型是一种标准&#xff0c;用于标识文档…

Next.js14快速上手

文章目录 ***客户端***什么是Next项目在线地址官方文档项目创建查看项目目录结构app属于根目录 ***服务端***vercel数据库prisma 客户端 什么是Next Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React Components 来构建用户界面&#xff0c;并使用 Ne…

java实现日志按天打印

<?xml version"1.0" encoding"UTF-8"?> <configuration><!-- 应用名称&#xff1a;和统一配置中的项目代码保持一致&#xff08;小写&#xff09; --><property name"APP_NAME" value"mita-main"/><!--日…

京准电钟解读:NTP网络对时服务器助力厂区改造方案

京准电钟解读&#xff1a;NTP网络对时服务器助力厂区改造方案 京准电钟解读&#xff1a;NTP网络对时服务器助力厂区改造方案 1&#xff09;系统概述 时钟系统可通过网络进行管理及时间校对&#xff0c;为厂区提供高精度、全天时、全天候 的授时服务&#xff0c;统一全厂各种系统…

vue中使用 html2canvas绘制图片并下载

html2canvas 是一个非常流行的库&#xff0c;可以将 HTML 元素转换为 canvas 图像。 1. 安装 html2canvas 首先&#xff0c;你需要安装 html2canvas 库。你可以使用 npm 或 yarn 来安装&#xff1a; npm install html2canvas yarn add html2canvas 2. 在 Vue 组件中使用 h…

AudioSetCaps数据集:包含190万对来自AudioSet录音的音频-字幕对。

2024-10-21&#xff0c;由西北工业大学、西安联丰声学技术有限公司、南洋理工大学、萨里大学和中国科学院声学研究所创建了AudioSetCaps数据集&#xff0c;包含190万对来自AudioSet录音的音频-字幕对。这个数据集在音频-文本检索和自动音频字幕两项下游任务上展现了卓越的性能&…

百度翻译以及另外三款翻译工具推荐!!!

在这个全球化的时代&#xff0c;翻译工具已经成为我们生活中不可或缺的一部分。我们需要使用翻译工具来克服语言障碍&#xff0c;无论是出国旅行、商务谈判还是学术研究。那么&#xff0c;市场上有各种各样的翻译工具。有哪些好用的在线翻译软件呢&#xff1f;别担心&#xff0…

系统架构设计师教程 第2章 2.1-2计算机系统及硬件 笔记

2.1计算机系统概述 ★☆☆☆☆ 计算机系统 (Computer System) 是指用于数据管理的计算机硬件、软件及网络组成的系统。 一般指由硬件子系统和软件子系统组成的系统&#xff0c;简称为计算机。 将连接多个计算机以实现计算机间数据交换能力的网络设备&#xff0c;称为计算机网…