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>

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

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

相关文章

Streamlit 应用从本地部署到服务器并进行访问

目录 1 部署 Streamlit 应用到服务器2 配置服务器允许远程访问3 使用反向代理4 使用 HTTPS5 总结 1 部署 Streamlit 应用到服务器 1 选择一个服务器平台 首先&#xff0c;你需要选择一个服务器平台来部署你的 Streamlit 应用。常见的选择包括&#xff1a; 云服务器&#xff1a…

【分页查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…

CSP-J初赛不会备考咋办?

以下备考攻略仅供参考&#xff0c;如需资料请私信作者&#xff01;求支持&#xff01; 目录 一、编程语言基础 1.语法知识 -变量与数据类型 -运算符 -控制结构 -函数 2.标准库的使用 -输入输出流 -字符串处理 -容器类&#xff08;可选&#xff09; 二、算法与数据结构 1.基…

sentinel使用手册

1.引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId></dependency>2.yaml spring:cloud:sentinel:transport:dashboard: localhost:8090 #sentinel控制台地址…

火语言RPA流程组件介绍--键盘按键

&#x1f6a9;【组件功能】&#xff1a;模拟键盘按键 配置预览 配置说明 按键 点击后,在弹出的软键盘上选择需要的按键 执行后等待时间(ms) 默认值300,执行该组件后等待300毫秒后执行下一个组件. 输入输出 输入类型 万能对象类型(System.Object)输出类型 万能对象类型…

Spring框架整合各种常用日志方法详解

文章目录 Spring框架整合各种常用日志方法详解一、引言二、Spring日志框架整合1、SpringBoot日志整合1.1、引入依赖1.2、配置日志 2、使用Log4j22.1、引入依赖2.2、配置Log4j2 三、在代码中使用日志四、使用lombok.extern.slf4j.Slf4j五、总结 Spring框架整合各种常用日志方法详…

网站布局编辑器前端开发:设计要点与关键考量

一、设计说明 &#xff08;一&#xff09;功能模块 可视化操作区域 这是用户进行网站布局设计的主要画布。通过拖放各种页面元素&#xff08;如文本框、图片、按钮、导航栏等&#xff09;到该区域&#xff0c;用户能够直观地构建网站页面的布局结构。支持对元素的实时缩放、旋…

环形链表系列导学

问题描述 给定一个单链表,可能存在一个环。我们的目标是找到环的入口节点,即从这个节点开始,链表进入循环。如果没有环,则返回 null。 将链表问题转化为数学问题 状态序列与循环 我们可以将链表节点视为状态,每个节点的 next 指针代表状态转移函数 f f f。从头节点开始,我…

springboot vue 开源 会员收银系统 (12)购物车关联服务人员 订单计算提成

前言 完整版演示 http://120.26.95.195/ 开发版演示 http://120.26.95.195:8889/ 在之前的开发进程中&#xff0c;我们完成订单的挂单和取单功能&#xff0c;今天我们完成购物车关联服务人员&#xff0c;用户计算门店服务人员的提成。 1.商品关联服务人员 服务人员可以选择 一…

linux安全管理-账号口令

文章目录 1 设备密码复杂度策略2 设备密码生存周期、最小长度、更改最小间隔天数和过期前警告天数3 使用 PAM 认证禁止指定组之外的用户使用 su 切换到 root4 制作用户权限对照表 1 设备密码复杂度策略 1、配置内容 检查密码复杂度策略中设置的特殊字符、大写字母、小写字母和…

JiaJia-CP-1,2,3的WP(1)

一.JiaJia-CP-1 这是ctfshow里电子取证里面的题&#xff0c;以下下是我做题时的WP 审题&#xff0c;最后提交格式要进行md5 加密&#xff0c;给各位CTFer们找了一个md5加密的网站&#xff08;加紧收藏哦&#xff09;&#xff1a; MD5 在线加密工具 | 菜鸟工具 1.拿到题目&am…

【C语言】关于 JavaScript 与 C语言在函数嵌套定义方面的差异探讨

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;JavaScript&#xff1a;允许函数嵌套定义与闭包的灵活性JavaScript 的闭包机制JavaScript 中嵌套函数的应用场景 &#x1f4af;C 语言&#xff1a;不允许函数嵌套定义的…

Proxy详解

监听对象属性&#xff1a; 在之前&#xff0c;若希望监听一个对象的相关操作&#xff0c;可通过Object.defineProty来进行监听&#xff0c;它必须深度遍历对象里的每一个属性 const obj{name:why,age:18,height:1.65 } // 需求&#xff1a;监听对象属性的所有操作 // 监听属性…

基于SpringBoot共享汽车管理系统【附源码】

基于SpringBoot共享汽车管理系统 效果如下&#xff1a; 系统注册页面 系统登陆页面 系统管理员主页面 用户信息管理页面 汽车投放管理页面 使用订单页面 汽车归还管理页面 研究背景 随着计算机技术和计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所。二十…

【天地图】HTML页面实现车辆轨迹、起始点标记和轨迹打点的完整功能

目录 一、功能演示 二、完整代码 三、参考文档 一、功能演示 运行以后完整的效果如下&#xff1a; 点击开始&#xff0c;小车会沿着轨迹进行移动&#xff0c;点击轨迹点会显示经纬度和时间&#xff1a; 二、完整代码 废话不多说&#xff0c;直接给完整代码&#xff0c;替换…

【Jenkins】docker 部署 Jenkins 踩坑笔记

文章目录 1. docker pull 超时2. 初始化找不到 initialAdminPassword 1. docker pull 超时 docker pull 命令拉不下来 docker pull jenkins/jenkins:lts-jdk17 Error response from daemon: Get "https://registry-1.docker.io/v2/": 编辑docker配置 sudo mkdir -…

Docker: 教程07 - ( 如何对 Docker 进行降级和升级)

如果我们使用 docker 来管理容器&#xff0c;那么保持 docker 引擎的更新将会是十分重要的&#xff0c;这一篇文章我们将会讨论如何对Docker 进行降级和升级。 准备工作 - docker 环境 我们需要拥有一个安装好 docker 的运行环境。 如果你需要了解如何安装 docker 可以通过如…

SOLID原则学习【目录篇】

文章目录 1. 前言2. ‘S’--单一职责原则&#xff08;Single Responsibility Principle&#xff09;3. ‘O’--开闭原则4. ‘L’--里氏替换原则5. ‘I’--接口隔离原则6. ‘D’--依赖倒置原则参考 1. 前言 SOLID原则是面向对象设计&#xff08;OOD&#xff09;中五个核心设计原…

继上一篇,设置弹框次数以及自适应图片弹框,部分机型(vivo)老手机不显示的问题

上一篇写的本来测试好多型号都无事, 今天下午公司的战斗机vivo横空冒出… 晕 弹框直接显示都出不来了,现在还有用这种老的机型的,但是没办法咯~ 前端遇到这种兼容性的问题就要勇于解决 主要解决了这几点: // 添加图片加载事件 <imgv-if"imageUrl":src"image…

Flink在Linux系统上的安装与入门

一、Flink的引入 这几年大数据的飞速发展&#xff0c;出现了很多热门的开源社区&#xff0c;其中著名的有Hadoop、Storm&#xff0c;以及后来的Spark&#xff0c;他们都有着各自专注的应用场景。Spark 掀开了内存计算的先河&#xff0c;也以内存为赌注&#xff0c;赢得了内存计…