当前位置: 首页 > news >正文

antd table 自定义表头过滤表格内容

注意:该功能只能过滤可一次性返回全部数据的表格,通过接口分页查询的请自主按照需求改动哈~

实现步骤:


1.在要过滤的列表表头增加过滤图标,点击图标显示浮窗
2.浮窗内显示整列可选选项,通过勾选单选或者全选、搜索框来过滤表格内容


效果如下:

表格页面index.vue:

<template><div><a-table :columns="column" :data-source="data" @change="change"><template v-for="(col, index) in column"><span :slot="col.slots.title" v-if="col.filterable" :key="index"><!--  --><popover-filter:ref="'popover_' + col.slots.title":key="col.dataIndex":label="col.dataIndex":field="col.dataIndex":shoppingType="0":filters="col.filtersList"@filter="handleFilterTable"/><span slot-scope="text, record">{{ text }}{{ record }}</span></span></template></a-table></div>
</template>
<script>
import PopoverFilter from "./popover-filter.vue";
export default {components: {PopoverFilter},data() {return {column: [],data: [],filters: {},allData: []};},mounted() {const columns = [{title: "序号",dataIndex: "id",customRender: (text, row, index) => {return index + 1;},width: 86},{//title: "Name",dataIndex: "name",width: "20%",slots: { title: "name" },filterable: true,onFilter: function(value, record) {console.log("value", value);return record.name.indexOf(value) != -1;}},{//title: "Gender",dataIndex: "gender",filters: [],width: "20%",filterable: true,slots: { title: "gender" }},{title: "Email",dataIndex: "email"}];this.column = columns;this.data = [{ name: "jone ke", gender: "Male", email: "23293238@qq.com" },{ name: "meary", gender: "Male1", email: "23293238@qq.com" },{ name: "lu xi", gender: "Doke", email: "23293238@qq.com" },{ name: "jiner", gender: "Doke1", email: "23293238@qq.com" },{ name: "geng", gender: "Doke1", email: "23293238@qq.com" }];this.allData = [...this.data];//要显示过滤的列,dataIndexlet filterList = ["name", "gender"];this.column.forEach(item => {if (filterList.includes(item.dataIndex)) {//获取每列所有数据,去除重复项item.filtersList = [...new Set(this.data.map(e => e[item.dataIndex]))];}});//console.log("this.column", this.column);},methods: {change(a, b, c) {console.log(a);console.log(b);console.log(c);},handleFilterTable(checkedList, field, label) {console.log(checkedList, field, label);this.filters[field] = checkedList;this.data = [...this.allData];Object.keys(this.filters).forEach(e => {this.data = this.data.filter(i =>this.filters[e].length > 0 ? this.filters[e].includes(i[e]) : true);});},changeFilter(checkedList, field) {console.log(checkedList, field);//this.filterInfo[this.typeValue][field] = checkedList;}}
};
</script>
<style lang="less" scoped></style>

浮窗组件popover-filter.vue:

<template><div class="filter-column"><!-- visible=true面板显示时或者有勾选项时icon图标高亮 --><divclass="popover-title":class="{ 'popover-title-active': visible || this.selected.length }"><span>{{ label }}</span><span class="caret-wrapper"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span><a-popoveroverlayClassName="popover"width="190"ref="filter"popper-class="m-popper"v-model="visible"trigger="click":overlayStyle="{ width: '200px' }"><span class="filter-icon" @click.stop="handleClick"></span><template slot="content"><a-inputplaceholder="请输入关键词"suffix-icon="a-icon-search"size="small"@input="handleFilter($event)"v-model="keyWord"><a-icon slot="prefix" type="search" /></a-input><div class="popover-filter" v-loading="loading"><a-checkbox:indeterminate="indeterminate":checked="checkAll"@change="handleCheckAllSource">全选{{ filters.length ? `(${filters.length})` : "" }}</a-checkbox><a-checkbox-groupv-model="checkedValue"class="popover-checkbox-group"@change="handleCheck"><a-checkboxv-for="item in filterOptions":key="item":value="item"><span>{{ item }}</span></a-checkbox></a-checkbox-group></div><div class="popover-btn-group"><a-buttontype="text"size="small"class="popover-btn popover-btn-reset":class="{ 'popover-btn-active': checkedValue.length > 0 }"@click="handleReset">重置</a-button><a-buttontype="primary"size="small"class="popover-btn"@click="handleSearch">确定</a-button></div></template></a-popover></div></div>
</template><script>
export default {components: {},props: {label: {type: String,default: ""},field: {type: String,default: ""},shoppingType: {type: Number,default: 0},filters: {type: Array,default: () => []}},data() {return {// 是否显示筛选框showFilter: false,interval: null,keyWord: "",loading: false,// 当前选择项checkedValue: [],selected: [],// 选择项列表options: [],filterOptions: [],checkAll: false,indeterminate: false,visible: false};},watch: {showFilter: {handler(val) {if (val) {this.getList();} else {this.keyWord = "";}}}},created() {},mounted() {this.options = this.filters;this.filterOptions = [...this.options];},methods: {handleClick() {//this.filterOptions = [...this.options];//this.$emit("click");this.visible = !this.visible;if (this.visible) {//面板显示时回显勾选this.checkedValue = [...this.selected];//显示全部勾选项this.getList();//清空搜索框this.keyWord = "";//判断全选勾选框状态this.checkAll = this.checkedValue.length === this.filterOptions.length;this.indeterminate =this.checkedValue.length > 0 &&this.checkedValue.length < this.filterOptions.length;}},handleFilter() {if (this.interval) {clearTimeout(this.interval);}this.interval = setTimeout(() => {this.filterOptions = this.options.filter(ele =>ele.toLowerCase().includes(this.keyWord.trim().toLowerCase()));console.log("搜索");clearTimeout(this.interval);this.interval = null;}, 1000);},getList() {// this.loading = true;// const params = {// 	shoppingType: this.shoppingType,// 	fieldStr: this.field,// };// this.axios// 	.post(`${this.$baseUrl}/mds/web/shopping/getCartSelect`, params)// 	.then((res) => {// 		this.loading = false;// 		if (res.data.code == "200") {// 			console.log("来源", res);// 			this.options = res.data.data || [];// 			this.filterOptions = [...this.options];// 			this.selected = this.selected.filter(ele => this.options.includes(ele));// 			this.checkedValue = [...this.selected];// 			this.$emit('changeFilter', this.checkedValue, this.field);// 		}// 	})// 	.catch((res) => {// 		this.loading = false;// 	});this.filterOptions = [...this.options];},handleCheck(val) {console.log("val", val, this.checkedValue);const count = val.length;this.checkAll = count === this.filterOptions.length;this.indeterminate = count > 0 && count < this.filterOptions.length;},handleCheckAllSource() {if (this.checkedValue.length == this.filterOptions.length) {this.checkedValue = [];this.checkAll = false;} else {this.checkedValue = this.filterOptions;this.checkAll = true;}},handleReset() {this.checkedValue = [];this.checkAll = false;this.indeterminate = false;this.keyWord = "";this.filterOptions = [...this.options];/* this.$refs.filter.doClose();this.$emit("filter", this.checkedValue, this.field); */},handleSearch() {this.selected = [...this.checkedValue];this.visible = false;this.$emit("filter", this.checkedValue, this.field, this.label);},close() {this.$refs.filter.doClose();}}
};
</script>
<style lang="less" scoped>
.filter-column {.caret-wrapper {width: 10px;margin: 0 2px 0 8px;.sort-caret {left: 0;}}.popover-title::after {display: none;}.filter-icon {width: 22px;height: 22px;display: inline-block;background: url("../../assets/filter-default.svg") 50% no-repeat;position: absolute;top: 50%;transform: translateY(-50%);margin-left: 4px;cursor: pointer;&:hover {background: url("../../assets/filter.svg") 50% no-repeat;background-color: #d3dbea;border-radius: 2px;}}.popover-title-active .filter-icon {background: url("../../assets/filter.svg") 50% no-repeat !important;background-color: #d3dbea !important;border-radius: 2px;}
}
</style>
<style>
.popover .ant-popover-inner-content {padding: 12px;
}
.popover-filter {margin: 8px -12px;padding: 4px 12px;border-top: 1px solid #dee2ed;border-bottom: 1px solid #dee2ed;max-height: 200px;overflow-y: auto;
}
.popover-filter .ant-checkbox-wrapper {margin-left: 0;width: 100%;margin-bottom: 4px;
}
.popover-filter .popover-checkbox-group .ant-checkbox-wrapper {margin-left: 0;width: 100%;margin-bottom: 4px;
}
.popover-btn-group {display: flex;justify-content: space-between;
}
</style>

相关文章:

antd table 自定义表头过滤表格内容

注意&#xff1a;该功能只能过滤可一次性返回全部数据的表格&#xff0c;通过接口分页查询的请自主按照需求改动哈~ 实现步骤&#xff1a; 1.在要过滤的列表表头增加过滤图标&#xff0c;点击图标显示浮窗 2.浮窗内显示整列可选选项&#xff0c;通过勾选单选或者全选、搜索框来…...

Elasticsearch实战:从搜索到数据分析的全面应用指南

Elasticsearch&#xff08;简称 ES&#xff09;是一个强大的分布式搜索引擎和分析工具&#xff0c;它能够快速处理海量数据&#xff0c;并提供全文检索、结构化搜索、数据分析等功能。在现代系统中&#xff0c;它不仅是搜索的核心组件&#xff0c;也是数据分析的有力工具。 本文…...

BEPUphysicsint定点数3D物理引擎介绍

原文&#xff1a;BEPUphysicsint定点数3D物理引擎介绍 - 哔哩哔哩 帧同步的游戏中如果用物理引擎&#xff0c;为了保证不同设备上的结果一致,需要采用定点数来计算迭代游戏过程中的物理运算。也就是我们通常说的定点数物理引擎(确定性物理引擎)。本系列教程给大家详细的讲解如…...

宠物领养平台构建:SpringBoot技术路线图

摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为了解决现有问题而产生的。针对于宠物领养…...

解决Flink读取kafka主题数据无报错无数据打印的重大发现(问题已解决)

亦菲、彦祖们&#xff0c;今天使用idea开发的时候&#xff0c;运行flink程序&#xff08;读取kafka主题数据&#xff09;的时候&#xff0c;发现操作台什么数据都没有只有满屏红色日志输出&#xff0c;关键干嘛&#xff1f;一点报错都没有&#xff0c;一开始我觉得应该执行程序…...

python自动化测开面试题汇总(持续更新)

介绍他们测某云&#xff0c;底层是linux可以挂多个磁盘&#xff0c;有现有的接口&#xff0c;用python实现热插拔&#xff0c;查看它的功能&#xff0c;项目目前用到的是python,linux和虚拟云&#xff0c;结合你之前的项目介绍下三者(3min之内) 列表判断是否有重复元素 求1-9的…...

1-1 Gerrit实用指南

注&#xff1a;学习gerrit需要拥有git相关知识&#xff0c;如果没有学习过git请先回顾git相关知识点 黑马程序员git教程 一小时学会git git参考博客 git 实操博客 1.0 定义 Gerrit 是一个基于 Web 的代码审查系统&#xff0c;它使用 Git 作为底层版本控制系统。Gerrit 的主要功…...

docker如何安装redis

第一步 如果未指定redis&#xff0c;则安装的是最新版的 docker pull redis 创建一个目录 mkdir /usr/local/docker/redis 然后直接可以下载redis&#xff0c;这是方式确实不怎么好&#xff0c;应该找在官网上找对应的redis配置文件 wget http://download.redis.io/redis-stab…...

省级新质生产力数据(蔡湘杰版本)2012-2022年

测算方式&#xff1a;参考《当代经济管理》蔡湘杰&#xff08;2024&#xff09;老师研究的做法&#xff0c;本文以劳动者、劳动对象和劳动资料为准则层&#xff0c;从新质生产力“量的积累、质的提升、新的拓展”三维目标出发&#xff0c;构建新质生产力综合评价指标体系&#…...

【游资悟道】-作手新一悟道心法

作手新一经典语录节选&#xff1a; 乔帮主传完整版&#xff1a;做股票5年&#xff0c;炼成18式&#xff0c;成为A股低吸大神&#xff01;从小白到大神&#xff0c;散户炒股的六个过程&#xff0c;不看不知道自己水平 围着主线做&#xff0c;多研究龙头&#xff0c;研究涨停&am…...

Diffusion中的Unet (DIMP)

针对UNet2DConditionModel模型 查看Unet的源码&#xff0c;得知Unet的down,mid,up blocks的类型分别是&#xff1a; down_block_types: Tuple[str] ("CrossAttnDownBlock2D","CrossAttnDownBlock2D","CrossAttnDownBlock2D","DownBlock2…...

编译以前项目更改在x64下面时报错:函数“PVOID GetCurrentFiber(void)”已有主体

win32下面编译成功&#xff0c;但是x64报错 1>GetWord.c 1>md5.c 这两个文件无法编译 1>C:\Program Files (x86)\Windows Kits\10\Include\10.0.22000.0\um\winnt.h(24125,1): error C2084: 函数“PVOID GetCurrentFiber(void)”已有主体 1>C:\Program Files (x…...

【AIGC】大模型面试高频考点-数据清洗篇

【AIGC】大模型面试高频考点-数据清洗篇 &#xff08;一&#xff09;常用文本清洗方法1.去除无用的符号2.去除表情符号3.文本只保留汉字4.中文繁体、简体转换5.删除 HTML 标签和特殊字符6.标记化7.小写8.停用词删除9.词干提取和词形还原10.处理缺失数据11.删除重复文本12.处理嘈…...

当测试时间与测试资源有限时,你会如何优化测试策略?

1.优先级排序&#xff1a;根据项目的需求和紧急程度进行优先级排序&#xff0c;将测试用例用例划分优先级&#xff0c;合理安排测试资源 和时间。这样能够保障在有限的时间内测试到最关键的功能 2.提前介入测试&#xff1a;在开发过程中提前进行测试&#xff0c;可以迅速发现问…...

基于R语言森林生态系统结构、功能与稳定性分析与可视化

在生态学研究中&#xff0c;森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性&#xff0c;还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…...

如何使用 Python 实现插件式架构

使用 Python 实现插件式架构可以通过动态加载和调用模块或类&#xff0c;构建一个易于扩展和维护的系统。以下是实现插件式架构的步骤和核心思想。 1. 插件式架构核心概念 主程序&#xff1a;负责加载、管理插件&#xff0c;并调用插件的功能。插件&#xff1a;独立的模块或类…...

【北京迅为】iTOP-4412全能版使用手册-第二十章 搭建和测试NFS服务器

iTOP-4412全能版采用四核Cortex-A9&#xff0c;主频为1.4GHz-1.6GHz&#xff0c;配备S5M8767 电源管理&#xff0c;集成USB HUB,选用高品质板对板连接器稳定可靠&#xff0c;大厂生产&#xff0c;做工精良。接口一应俱全&#xff0c;开发更简单,搭载全网通4G、支持WIFI、蓝牙、…...

【纯原生js】原生实现h5落地页面中的单选组件按钮及功能

h5端的按钮系统自带的一般都很丑&#xff0c;需要我们进行二次美化&#xff0c;比如单选按钮复选框之类的&#xff0c;那怎么对其进行html和css的改造&#xff1f; 实现效果 实现代码 <section id"tags"><h2>给景区添加标题</h2><label><…...

深入浅出:开发者如何快速上手Web3生态系统

Web3作为互联网的未来发展方向&#xff0c;正在逐步改变传统互联网架构&#xff0c;推动去中心化技术的发展。对于开发者而言&#xff0c;Web3代表着一个充满机遇与挑战的新领域&#xff0c;学习和掌握Web3的基本技术和工具&#xff0c;将为未来的项目开发提供强大的支持。那么…...

通过深度点图表示的隐式场实现肺树结构的高效解剖标注文献速递-生成式模型与transformer在医学影像中的应用

Title 题目 Efficient anatomical labeling of pulmonary tree structures via deeppoint-graph representation-based implicit fields 通过深度点图表示的隐式场实现肺树结构的高效解剖标注 01 文献速递介绍 近年来&#xff0c;肺部疾病&#xff08;Decramer等&#xff…...

数据结构 (17)广义表

前言 数据结构中的广义表&#xff08;Generalized List&#xff0c;又称列表Lists&#xff09;是一种重要的数据结构&#xff0c;它是对线性表的一种推广&#xff0c;放松了对表元素的原子限制&#xff0c;容许它们具有其自身的结构。 一、定义与表示 定义&#xff1a;广义表是…...

论文笔记 SliceGPT: Compress Large Language Models By Deleting Rows And Columns

欲买桂花同载酒&#xff0c;终不似&#xff0c;少年游。 数学知识 秩&#xff1a; 矩阵中最大线性无关的行/列向量数。行秩与列秩相等。 线性无关&#xff1a;对于N个向量而言&#xff0c;如果任取一个向量 v \textbf{v} v&#xff0c;不能被剩下的N-1个向量通过线性组合的方式…...

前端工具的选择和安装

选择和安装前端工具是前端开发过程中的重要步骤。现代前端开发需要一些工具来提高效率和协作能力。以下是一些常用的前端工具及其选择和安装指南。 1. 代码编辑器 选择一个好的代码编辑器可以显著提高开发效率。以下是几款流行的代码编辑器&#xff1a; Visual Studio Code (…...

Fantasy中定时器得驱动原理

一、服务器框架启动 public static async FTask Start(){// 启动ProcessStartProcess().Coroutine();await FTask.CompletedTask;while (true){ThreadScheduler.Update();Thread.Sleep(1);}} 二、主线程 Fantasy.ThreadScheduler.Update internal static void Update(){MainS…...

【反转链表】力扣 445. 两数相加 II

一、题目 二、思路 加法运算是从低位开始&#xff0c;向高位进位&#xff0c;因此需要将两个链表进行反转&#xff0c;再进行对齐后的相加操作。力扣 2. 两数相加 三、题解 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode …...

SpringBoot 项目中使用 spring-boot-starter-amqp 依赖实现 RabbitMQ

文章目录 前言1、application.yml2、RabbitMqConfig3、MqMessage4、MqMessageItem5、DirectMode6、StateConsumer&#xff1a;消费者7、InfoConsumer&#xff1a;消费者 前言 本文是工作之余的随手记&#xff0c;记录在工作期间使用 RabbitMQ 的笔记。 1、application.yml 使…...

Uniapp 安装安卓、IOS模拟器并调试

一、安装Android模拟器并调试 1. 下载并安装 Android Studio 首先下载 Mac 环境下的 Android Studio 的安装包&#xff0c;为dmg 格式。 下载完将Android Studio 向右拖拽到Applications中&#xff0c;接下来等待安装完成就OK啦&#xff01; 打开过程界面如下图所示&#xf…...

JavaScript 中的原型和原型链

JavaScript 中的原型和原型链也是一个相对较难理解透彻的知识点&#xff0c;下面结合详细例子来进行说明&#xff1a; 一、原型的概念 在 JavaScript 中&#xff0c;每个函数都有一个 prototype 属性&#xff0c;这个属性指向一个对象&#xff0c;这个对象就是所谓的 “原型对…...

数组变换(两倍)

数组变换 以最大元素为基准元素&#xff0c;判读其他元素能否通过 x 2 成为最大值&#xff01; 那么怎么判断呢&#xff1a; max % arr[i] 0arr[i] * 2 ^n max int x 2 ^ n max / arr[i] 3.只需判断 这个 x 是不是 2 的 n 次放就可以了&#xff01; 判断 是否为 2 的 n 次 …...

GBN协议、SR协议

1、回退N步&#xff08;Go-Back-N,GBN&#xff09;协议&#xff1a; 总结&#xff1a; GBN协议的特点&#xff1a; &#xff08;1&#xff09;累计确认机制&#xff1a;当发送方收到ACKn时&#xff0c;表明接收方已正确接收序号为n以及序号小于n的所有分组&#xff0c;发送窗…...

wordpress打教程/手机系统优化软件哪个好

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼//2.21 桶排序#include#include#define SIZE 100void bucket_sort(unsigned *,int);//桶排序函数的原型void print(unsigned *,int);//打印函数的原型int main(){unsigned array[SIZE];int i0;//为数组元素随机赋值for(i0;iarray[i…...

自己做网站视频教学/网站优化要做哪些

什么是计算机网络把分布不同地理区域的计算机与专门的外部设备通讯线路互联成一个规模大、功能强的网络系统&#xff0c;从而使众多计算机可以方便的互相传递信息&#xff0c;共享硬件、软件、数据信息等资源。计算机网络的主要功能资源共享信息传输与集中处理均衡负荷与分布处…...

中 网站建设 扬州/投放广告找什么平台

已知两个非降序链表序列S1与S2&#xff0c;设计函数构造出S1与S2的交集新链表S3。 输入格式: 输入分两行&#xff0c;分别在每行给出由若干个正整数构成的非降序序列&#xff0c;用−1表示序列的结尾&#xff08;−1不属于这个序列&#xff09;。数字用空格间隔。 输出格式: …...

wordpress 博客页面/关键词网站

导读 正则表达式是什么&#xff1f;有什么用&#xff1f;正则表达式(Regular Expression)是一种文本规则&#xff0c;可以用来校验、查找、替换与规则匹配的文本。 又爱又恨的正则 正则表达式是一个强大的文本匹配工具&#xff0c;但是它的规则实在很繁琐&#xff0c;而且理解起…...

外贸建站哪家/百度免费咨询

2019独角兽企业重金招聘Python工程师标准>>> 报错信息 com.fasterxml.jackson.databind.exc.InvalidDefinitionException: No serializer found for class org.hibernate.proxy.pojo.javassist.JavassistLazyInitializer and no properties discovered to create Be…...

如何推动一个教学网站的建设/网站关键词优化排名怎么做

网络情愁——文/代腾飞 2008年12月1日 于成都你坐在电脑那头我坐在电脑这头一根网线牵着我们的手向着彼此心的方向在走于是开始了一段美丽的邂逅 每一天&#xff0c;每一刻我都会准时坐在电脑面前为你守候让无线电波为你传来我诚挚的问候让我穿过网络的时空时刻陪伴在你左右让…...