vxe-table 列表过滤踩坑_vxe-table筛选

但是这个过滤输入值必须是跟列表的值必须一致才能查到,没做到模糊查询的功能,根据关键字来过滤并没有实现。

下面提供一下具体实现方法:(关键字来过滤)

        filterNameMethod({ option, row  }) {if (row.name.indexOf(option.data) > -1) {console.log(row.name)return row.name}},

2. 通过checkbox 过滤的方式来实现
2-1 checkbox
  单选的实现:
添加 :filter-multiple=“false” 属性就是单选

每次只能选中一个去过滤,具体实现方法:

:filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]" 

注意:这里是因为后端返回的  sex 的id  和 value 的id  能对上所以能实现过滤功能。
如果,后端只返回 sex 对应的label 值呢, 你这时候怎么处理?  sex2: ‘Woman’,   sex2: ‘Man’,

解决方法: 就是把 过滤的数组 filters:数组里面的 label 和value 的值, 都变成一致的 label 值。

:filters="[{label: 'Man', value: 'Man'}, {label: 'Woman', value: 'Woman'}]" 
  <vxe-column field="sex2" title="Sex2" :filters="[{label: 'Man', value: 'Man'}, {label: 'Woman', value: 'Woman'}]" :filter-multiple="false"></vxe-column>

2-2 checkbox   多选的实现:

很简单去掉:**:filter-multiple=“false”**属性就是多选

      <vxe-column field="sex3" title="Sex3" :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"></vxe-column>

注意: 多选如果遇到,后台返回的只有lab值, 无 value 值的情况同单选的处理方法一样,就不写了。

2-3 checkbox 其他方式  下拉框里面的选择后过滤

注意: 返回值和下拉框选择的值必须一致都是label 的值才可以使用。

实现方法:

      <vxe-columnfield="sex4"title="Sex4":filters="[{ data: '' }]":filter-method="filterSexMethod"><template v-slot:filter="{ $panel, column }"><selectv-for="(option, index) in column.filters":key="index"v-model="option.data"@change="$panel.changeOption($event, !!option.data, option)"><optionv-for="(label, cIndex) in sexList":key="cIndex":value="label">{{ label }}</option></select></template></vxe-column>
  data() {return {sexList: ["Man", "Woman"],
}
}filterSexMethod({ option, row }) {return row.sex4 === option.data}

3. 全局过滤筛选方法:

实现方法如下:

    <el-input v-model="searchs" @change="searchList" clearable style="width: 200px" />// 根据数据关键字实现模糊查询功能searchList() {const keyword = this.searchsconst pattern = new RegExp(keyword, 'i'); // 不区分大小写let newData = this.tableData.filter(item => {return pattern.test(item.name)})console.log('newData:', newData)this.tableData = JSON.parse(JSON.stringify(newData))},

目前只是根据 name 去做的全局过滤的,如果想要查询更多列的内容可以在  return pattern.test(item.name) 后面添加: return pattern.test(item.name) || return pattern.test(item.role) …

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-BHYDDsXq-1718770848679)]

[外链图片转存中…(img-YHeHwi7c-1718770848680)]

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

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

相关文章

MATLAB直方图有关的函数

histogram Histogram plot画直方图 histcounts 直方图 bin 计数 histcounts是histogram的主要计算函数。 discretize 将数据划分为 bin 或类别 histogram2 画二元直方图 histcounts2 二元直方图 bin 计数 hist和histc过时了。替换不建议使用的 hist 和 histc 实例 hist → \r…

Representation RL:HarmonyDream: Task Harmonization Inside World Models

ICML2024 paper code Intro 基于状态表征的model-based强化学习方法一般需要学习状态转移模型以及奖励模型。现有方法都是将二者联合训练但普遍缺乏对如何平衡二者之间的比重进行研究。本文提出的HarmonyDream便是通过自动调整损失系数来维持任务间的和谐&#xff0c;即在世界…

低投入+高效率的求职招聘小程序源码系统平台版 带完整的安装代码包以及搭建教程部署教程

系统概述 在当今数字化时代&#xff0c;求职招聘领域的竞争日益激烈。传统的求职招聘方式逐渐显露出效率低下、成本高昂等问题。为了满足市场需求&#xff0c;提高求职招聘的效率和便捷性&#xff0c;同时降低企业和求职者的成本&#xff0c;“低投入高效率的求职招聘小程序源…

某全国增值税发票查验平台 接口JS逆向

注意&#xff0c;本文只提供学习的思路&#xff0c;严禁违反法律以及破坏信息系统等行为&#xff0c;本文只提供思路 本文的验证码网址如下&#xff0c;使用base64解码获得 aHR0cHM6Ly9pbnYtdmVyaS5jaGluYXRheC5nb3YuY24v 这个平台功能没什么好说的&#xff0c;就是发票查验&am…

揭秘融资融券中的生命线——维持担保比例

01 通俗讲解融资融券 1、融资融券交易&#xff0c;又称信用交易&#xff0c;是指投资者向证券公司提交保证金 ①在看涨时&#xff0c;从证券公司借入资金低价买入证券再高价卖出&#xff1b;&#xff08;加杠杆&#xff09; ②在看跌时&#xff0c;从证券公司借入证券高价卖…

打开 RAG 对接大模型的黑盒 —— 9 大隐藏问题

前一段时间&#xff0c;各个大模型在争斗&#xff1a;谁能携带更长、更大的上下文 Prompt&#xff0c;比如 Kimi 说 200 万字&#xff0c;阿里通义千问又说自己能达 1000 万字&#xff1b;大家都知道 Prompt 很重要&#xff0c;但是 RAG 和 长的上下文文本携带 是两个不同的技术…

【Python深度学习】——使用Logging记录模型训练过程

【Python深度学习】——使用Logging记录模型训练过程 1. 导入logging库, getLogger()创建日志记录器2. logger.setLevel()设置log级别3. FileHandler()设置日志文件路径4. StreamHandler()将日志输出到控制台5. 其他性质6. 代码示例 1. 导入logging库, getLogger()创建日志记录…

springboot集成官方fastdfs以及fastdfs开启防盗链踩坑

目录 一、fastdfs原理 二、在springboot中使用fastdfs 三、fastdfs开启防盗链功能 四、fastdfs开启token验证踩坑 一、fastdfs原理 FastDFS是一个开源的轻量级分布式文件系统,它通过两个主要角色——跟踪器(Tracker)和存储节点(Storage)——来管理文件。 Tracker 主要…

Python在SQLite中的应用:从入门到进阶

Python在SQLite中的应用&#xff1a;从入门到进阶 Python作为一门高效、灵活的编程语言&#xff0c;广泛应用于各种数据处理和分析任务。而SQLite是一种轻量级的数据库管理系统&#xff0c;特别适合于嵌入式应用和小型项目。在本篇博文中&#xff0c;我们将深入探讨Python在SQ…

【Academy】OS command injection 操作系统命令注入

OS command injection 操作系统命令注入 1. 什么是OS命令注入&#xff1f;2. 注入操作系统命令3. Blind OS命令注入漏洞4. 注入操作系统命令的方法5. 如何防止OS命令注入攻击 1. 什么是OS命令注入&#xff1f; 操作系统命令注入也称为shell注入。它允许攻击者在运行应用程序的…

车载网络安全指南 网络安全框架(二)

返回总目录->返回总目录<- 目录 一、概述 二、网络安全组织管理 三、网络安全活动 四、支撑保障 一、概述 汽车电子系统网络安全活动框架包含汽车电子系统网络安全活动、组织管理以及支持保障。其中,网络安全管理活动是框架的核心,主要指汽车电子系统生命周期各阶段…

Agentic RAG 与图任务编排

一个朴素的 RAG 系统流程是这样的&#xff1a;先由用户提出问题&#xff0c;然后系统基于用户提问进行召回&#xff0c;对召回结果进行重排序&#xff0c;最后拼接提示词后送给 LLM 生成答案。 一部分简单场景下&#xff0c;朴素的 RAG 已经可以满足用户意图明确的场景的要求&a…

无线麦克风推荐哪些品牌,热门领夹无线麦克风哪个好,看本期文章

​在信息爆炸的今天&#xff0c;高品质的无线领夹麦克风能让声音更清晰响亮。技术发展带来多样化选择同时也带来选择困难。根据多年使用经验和行业反馈&#xff0c;我推荐一系列可靠、易用且性价比高的无线领夹麦克风&#xff0c;助你作出明智选择。还要不知道该怎么选无线领夹…

深度学习探索-基础篇-正则化篇

文章目录 一、正则化介绍1.1 正则化的简介1.2 正则化的方法介绍1.3 正则化的用途 二、正则化的详细介绍2.1 L1正则化2.2 L2正则化2.2.1 L2正则化的工作原理2.2.2 如何在训练中应用L2正则化2.2.3 L2正则化的效果 2.3 Weight Decay2.4 Dropout 一、正则化介绍 1.1 正则化的简介 …

AJAX 综合案例-day2

Bootstrap 弹框 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作 步骤&#xff1a; 1. 引入 bootstrap.css 和 bootstrap.js 2. 准备 弹框标签 &#xff0c;确认结构 3. 通过 自定义属性 &#xff0c;控制弹框的 显示 和 隐藏 1. 通过属性…

【中南林业科技大学校园生存指南】学业指南

前言 本专栏所有内容来自同学们所提供的建议&#xff0c;已经征得收集者意见在此发布。 学业指南 关于学业指南的设想源于诸多任课教师对于课程细节的描述不够清晰明确。同学们在获取课程信息&#xff0c;如教师评价、课程覆盖范围及往年考试试卷时&#xff0c;往往依赖于高…

人工智能 -- AI常用算法

人工智能是一门致力于研究、开发和实现智能系统的学科。它通过模拟人类的认知和学习过程&#xff0c;使计算机系统能够执行类似于人类的智能活动。人工智能技术涵盖了多个领域&#xff0c;包括机器学习、深度学习、自然语言处理和专家系统等。这些技术被广泛应用于各个行业&…

08--LVS网站高并发解决方案

前言&#xff1a;LVS&#xff0c;工作稳定&#xff0c;抗负载能力强&#xff0c;属于运维基础&#xff0c;这里将lvs两种模式的部署方式在这里记录一下&#xff0c;并在示例完成后&#xff0c;补充一下基础概念。本章不可避免的涉及到一些网络方面知识&#xff0c;会形象简单的…

PostgreSQL源码分析——pg_waldump

PG中有个可以打印WAL日志信息的工具&#xff0c;pg_waldump&#xff0c;对于开发人员来说&#xff0c;掌握该工具是十分有必要的。 用法 具体用法这里不去详解&#xff0c;可见官网pg_waldump文档。 postgresslpc:~$ pg_waldump --help pg_waldump decodes and displays Pos…

C#.Net筑基-集合知识全解

01、集合基础知识 .Net 中提供了一系列的管理对象集合的类型&#xff0c;数组、可变列表、字典等。从类型安全上集合分为两类&#xff0c;泛型集合 和 非泛型集合&#xff0c;传统的非泛型集合存储为Object&#xff0c;需要类型转。而泛型集合提供了更好的性能、编译时类型安全…