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

基于antd封装的二次业务筛选组件-table-filter

文档地址:https://flowerofsummer.github.io/components/

业务筛选组件

支持各种类型的高级搜索组件

基础用法

  • 组件响应式布局,默认显示两行,可以通过 maxLineCount 配置最多显示行数
  • 每行个数: 如果含有 time-range,则在<1600,显示 3 个,否则显示 4 个;如果不含有 time-range,则在<1600,显示 4 个,否则显示 5 个;每行固定显示几个也可以自己配置 filterCount,默认值即是前面的 [3, 4, 5]
  • label:默认 label 110px(约 6 个中文字符,超出…tooltip 显示),固定宽度也可以自己配置 labelWidth
<template><div><table-filter:items="fileds":filter-count="[4,5,6]"/></div>
</template>
<script lang="ts" setup>
const fileds = [{label: 'ip',prop: 'searchIpRef',type: 'textarea',defaultValue: '',customAttrs: {placeholder: '支持多个IP, 一行一个',allowClear: true}}, {label: '标签',prop: 'searchTag',type: 'select',// defaultValue: [],options: [{value: '',label: '所有'},{value: 'RUNNING',label: '运行中'},{value: 'TERMINATED',label: '已关机',},{value: 'CREATE_FAIL',label: '创建失败',},],customAttrs: {placeholder: '请选择'}}, {label: '名称',prop: 'name2',type: 'tree-select',defaultValue: [],options: [{value: 'RUNNING',label: '运行中'},{value: 'TERMINATED',label: '已关机',},{value: 'CREATE_FAIL',label: '创建失败',},],customAttrs: {placeholder: '请选择'}}, {label: '名称',prop: 'name3',type: 'textarea',defaultValue: '',customAttrs: {placeholder: '支持多个IP',allowClear: true}},{label: '时间',prop: 'time',type: 'time-range',defaultValue: []},{label: '名称',prop: 'name5',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name6',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name7',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name8',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name9',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name10',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name11',type: 'input',customAttrs: {placeholder: '请输入'}}
]
</script>

YTableFilter

属性

参数说明类型可选值默认值是否必填
searchLoading查询按钮 loadingboolean-false
isSearchImdate是否立即搜索boolean-true
isShowReset是否显示重置boolean-true
filterCount自定义 每行显示个数,配置必须 3 位数组number[]-[3,4,5]
labelWidth自定义 label 的宽度string-110px
maxLineCount最多显示行数bumber-2

事件

事件名说明参数列表参数说明
onSearch查询方法--

方法

事件名说明参数列表参数说明
changeFiledData修改 prop 字段值,清空其他字段值,并搜索(prop: tring, value: any)prop: 对应的字段名;value: 对应字段的值

FilterItem

属性(主要针对 select 类型的属性)

参数说明类型可选值默认值是否必填
label筛选名称string--
type筛选组件类型stringComponentType-
prop绑定字段string--
defaultValue默认值[String, Array, Number]--
isImdateRequest是否修改后立即请求boolean-true
customAttrs组件原生属性Object--
options组件(select/tree-select)绑定 optionsArray-[]
optionsRquest获取 options 的接口方法Function--
optionsParams联动的字段(联动请求)Array-[]
isFixedDefault更新 options 后,使用默认值 valueboolean-false
isInDataoptions 请求返回数据是否直接在 data 返回boolean-false
isShowAll是否给 options 新增全部选项boolean-true
dataFiledoptions 数据请求返回在 data 中的字段string-items
isDefault0是否用第一项作为默认值boolean-false

componentType

enum ComponentType {input = 'input',select = 'select','tree-select' = 'tree-select','time-range' = 'time-range',textarea = 'textarea'
}

相关文章:

基于antd封装的二次业务筛选组件-table-filter

文档地址&#xff1a;https://flowerofsummer.github.io/components/ 业务筛选组件 支持各种类型的高级搜索组件 基础用法 组件响应式布局&#xff0c;默认显示两行&#xff0c;可以通过 maxLineCount 配置最多显示行数每行个数&#xff1a; 如果含有 time-range&#xff0…...

逆向-还原代码之max 再画堆栈图 (Interl 64)

// source code #include <stdio.h> void max(int * a, int * b) { if (*a < *b) *a *b; } int main() { int a 5, b 6; max(&a, &b); printf("a, b max %d\n", a); return 0; } // 再画堆栈图 下周一&#xff08;2.27…...

GitHub标星30K+的Java面试八股文长啥样?

2023年的互联网行业竞争越来越严峻&#xff0c;面试也是越来越难&#xff0c;一直以来我都想整理一套完美的面试宝典&#xff0c;奈何难抽出时间&#xff0c;这套1000道的Java面试手册我整理了整整1个月&#xff0c;上传到Git上目前star数达到了30K 一、32 道 MySQL 面试题 1&…...

CVE-2022-39197 POC(CobaltStrike XSS <=4.7)漏洞复现

漏洞说明 根据9.20日CobaltStrike官方发布的最新4.7.1版本的更新日志中介绍&#xff0c;<4.7的teamserver版本存在XSS漏洞&#xff0c;从而可以造成RCE远程代码执行 一位名为“Beichendream”的独立研究人员联系我们&#xff0c;告知我们他们在团队服务器中发现的一个 XSS …...

我们来说说蹿红的AIGC到底是什么?ChatGPT又是什么?

近期&#xff0c;人工智能&#xff08;AI&#xff09;领域动作频频&#xff0c;OPENAI公司Chat GPT的出现&#xff0c;标志着人工智能的研究与应用已经进入了一个崭新的发展阶段&#xff0c;国内腾讯、阿里巴巴、百度、易网、国外微软、谷歌、苹果、IBM、Amazon&#xff0c;等互…...

新手如何从零开始搭建配置Windows云服务器?

新手如何从零开始搭建配置Windows云服务器&#xff1f;本文是搭建 Windows 云服务器入门教程&#xff0c;主要介绍如何从零开始&#xff0c;以最简单的方式搭建和配置你的Windows 云服务器。如果您之前没有搭建云服务器的经验&#xff0c;建议您按照本文介绍的方式来购买和配置…...

百趣代谢组学-抑郁症居然“男女有别”,脑膜淋巴管起关键作用!

文章标题&#xff1a;A functional role of meningeal lymphatics in sex difference of stress susceptibility in mice 发表期刊&#xff1a;Nature Communications 影响因子&#xff1a;17.694 发表时间&#xff1a;2022年8月 作者单位&#xff1a;中山大学中山医学院 …...

C语言实现用堆解决 TOP-K 问题

目录 TopK函数实现 如何测试 完整源码 生活中我们经常能见到TopK问题&#xff0c;例如&#xff1a;专业前10名、世界500强、富豪榜、游戏中前100的活跃玩家等。 所以&#xff0c;TopK问题即求出一组数据中前K个最大或最小的元素&#xff0c;一般情况下&#xff0c;数据量都…...

MySQL 数据库基础命令

MySQL 基础命令 一.了解数据库 1、了解数据库对象 1.表&#xff1a; 用于以有组织方式存储数据。以行和列的格式包含数据。 2.索引&#xff1a; 是内部表结构&#xff0c;MySQL 用它基于一列或多列的值来提供对表中各行的快速访问。 3.视图&#xff1a; 是虚拟表&#…...

说一下this,实现apply、call

理解this 在ES5中&#xff0c;this的指向始终坚持一个原理&#xff1a;“this永远指向最后调用它的那个对象”&#xff0c;切记这句话。下面看几个例子。 例一 var obj {name: zhangsan,say: function() {console.log(this.name);} }obj.say() // zhangsan 最基本的使用&am…...

华为OD机试真题Python实现【总最快检测效率】真题+解题思路+代码(20222023)

总最快检测效率 题目 在系统、网络均正常情况下,组织核酸采样员和志愿者对人群进行核酸检测筛查。 每名采样员的效率不同,采样效率为N人/小时。 由于外界变化,采样员的效率会以M人/小时为粒度发生变化,M 为采样效率浮动粒度, M=N*10%,输入保证N*10%的结果为整数。 采样…...

【历史上的今天】2 月 23 日:Enigma 密码机申请专利;戴尔电脑创始人出生;Mellanox 收购 EZchip

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 2 月 23 日&#xff0c;在 2006 年的今天&#xff0c;都灵冬奥会自由式滑雪男子空中技巧决赛在意大利都灵萨奥兹杜尔克斯滑雪场举行。中国选手韩晓鹏战胜众多好…...

新手入门吉他推荐,第一把吉他从这十款选绝不踩雷!初学者吉他选购指南【新手必看】

一、新手购琴注意事项&#xff1a; 1、预算范围 一把合适的吉他对于初学者来说会拥有一个很好的音乐启蒙。选一款性价比高&#xff0c;做工材料、音质和手感相对较好的吉他自然不会是一件吃亏的事。**初学者第一把琴的预算&#xff0c;我觉得最低标准也是要在500元起&#xf…...

XSS注入进阶练习篇(三) XSS原型链污染

XSS原型链污染1.原型链的概念1.1 构造函数的缺点1.2 prototype 属性的作用1.3 原型链1.4 constructor属性1.5 prototype和__proto__2. 原型链污染2.1 原型链污染是什么&#xff1f;2.2 原型链污染的条件2.3 原型连污染实例2.3.1 hackit 20182.3.2 challenge-04223.总结1.原型链…...

【Java基础 下】 025 -- 阶段项目(斗地主)

目录 斗地主 一、斗地主游戏1 -- 准洗发&#xff08;控制台版&#xff09; 1、准备牌 2、洗牌 3、发牌 4、看牌 二、斗地主游戏2 -- 给牌排序①&#xff08;利用序号进行排序&#xff09; 2、洗牌 3、发牌 4、看牌 三、斗地主游戏2 -- 给牌排序②&#xff08;给每一张牌计算价值…...

华为OD机试真题Python实现【矩阵最值】真题+解题思路+代码(20222023)

题目 给定一个仅包含0和1的n*n二维矩阵 请计算二维矩阵的最大值 计算规则如下 每行元素按下标顺序组成一个二进制数(下标越大约排在低位), 二进制数的值就是该行的值,矩阵各行之和为矩阵的值允许通过向左或向右整体循环移动每个元素来改变元素在行中的位置 比如 [1,0,1,1,1]…...

TypeScript笔记(三)

前言 上一篇文章我们主要介绍了TypeScript的基本类型boolean、number、string、void、null和undefine&#xff0c;还介绍了任意类型any和联合类型&#xff0c;这篇文章我们将会了解对象类型Interface和数组的相关知识。 对象的类型——接口 在TypeScript中&#xff0c;我们使…...

C++(41)-低版本升级到VS2019项目时遇到的问题(2)

1.错误码&#xff1a;MSB8066 代码为3 QT 项目老版本升级到新版本造成的&#xff0c; 1.重新加载项目&#xff1a; 扩展->QT VS tools->Open QT project files-> 2.添加QT模块&#xff1a;QT Project-Settings -> QT Modules2.无法打开QT的头文件 3.…...

git 实战应用

基本使用1.1、使用git想要让 git 对一个目录进行版本控制需要一下步骤&#xff1a;进入要管理的文件夹执行初始化命令git init查看目录下的文件状态git status管理指定文件// 添加指定文件 git add ***.txt// 添加未被管理的所有文件 git add .生成版本git commit -m 描述信息提…...

Linux重启命令shutdown与reboot

在linux命令中reboot是重新启动&#xff0c;shutdown -r now是立即停止然后重新启动&#xff0c;都说他们两个是一样的&#xff0c;其实是有一定的区别的。 shutdown 命令可以安全地关闭或重启Linux系统&#xff0c;它在系统关闭之前给系统上的所有登录用户提示一条警告信息。…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...