基于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 | 查询按钮 loading | boolean | - | 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 | 筛选组件类型 | string | ComponentType | - | 是 |
prop | 绑定字段 | string | - | - | 是 |
defaultValue | 默认值 | [String, Array, Number] | - | - | 否 |
isImdateRequest | 是否修改后立即请求 | boolean | - | true | 否 |
customAttrs | 组件原生属性 | Object | - | - | 否 |
options | 组件(select/tree-select)绑定 options | Array | - | [] | 否 |
optionsRquest | 获取 options 的接口方法 | Function | - | - | 否 |
optionsParams | 联动的字段(联动请求) | Array | - | [] | 否 |
isFixedDefault | 更新 options 后,使用默认值 value | boolean | - | false | 否 |
isInData | options 请求返回数据是否直接在 data 返回 | boolean | - | false | 否 |
isShowAll | 是否给 options 新增全部选项 | boolean | - | true | 否 |
dataFiled | options 数据请求返回在 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
文档地址:https://flowerofsummer.github.io/components/ 业务筛选组件 支持各种类型的高级搜索组件 基础用法 组件响应式布局,默认显示两行,可以通过 maxLineCount 配置最多显示行数每行个数: 如果含有 time-range࿰…...
逆向-还原代码之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; } // 再画堆栈图 下周一(2.27…...
GitHub标星30K+的Java面试八股文长啥样?
2023年的互联网行业竞争越来越严峻,面试也是越来越难,一直以来我都想整理一套完美的面试宝典,奈何难抽出时间,这套1000道的Java面试手册我整理了整整1个月,上传到Git上目前star数达到了30K 一、32 道 MySQL 面试题 1&…...
CVE-2022-39197 POC(CobaltStrike XSS <=4.7)漏洞复现
漏洞说明 根据9.20日CobaltStrike官方发布的最新4.7.1版本的更新日志中介绍,<4.7的teamserver版本存在XSS漏洞,从而可以造成RCE远程代码执行 一位名为“Beichendream”的独立研究人员联系我们,告知我们他们在团队服务器中发现的一个 XSS …...
我们来说说蹿红的AIGC到底是什么?ChatGPT又是什么?
近期,人工智能(AI)领域动作频频,OPENAI公司Chat GPT的出现,标志着人工智能的研究与应用已经进入了一个崭新的发展阶段,国内腾讯、阿里巴巴、百度、易网、国外微软、谷歌、苹果、IBM、Amazon,等互…...
新手如何从零开始搭建配置Windows云服务器?
新手如何从零开始搭建配置Windows云服务器?本文是搭建 Windows 云服务器入门教程,主要介绍如何从零开始,以最简单的方式搭建和配置你的Windows 云服务器。如果您之前没有搭建云服务器的经验,建议您按照本文介绍的方式来购买和配置…...
百趣代谢组学-抑郁症居然“男女有别”,脑膜淋巴管起关键作用!
文章标题:A functional role of meningeal lymphatics in sex difference of stress susceptibility in mice 发表期刊:Nature Communications 影响因子:17.694 发表时间:2022年8月 作者单位:中山大学中山医学院 …...
C语言实现用堆解决 TOP-K 问题
目录 TopK函数实现 如何测试 完整源码 生活中我们经常能见到TopK问题,例如:专业前10名、世界500强、富豪榜、游戏中前100的活跃玩家等。 所以,TopK问题即求出一组数据中前K个最大或最小的元素,一般情况下,数据量都…...
MySQL 数据库基础命令
MySQL 基础命令 一.了解数据库 1、了解数据库对象 1.表: 用于以有组织方式存储数据。以行和列的格式包含数据。 2.索引: 是内部表结构,MySQL 用它基于一列或多列的值来提供对表中各行的快速访问。 3.视图: 是虚拟表&#…...
说一下this,实现apply、call
理解this 在ES5中,this的指向始终坚持一个原理:“this永远指向最后调用它的那个对象”,切记这句话。下面看几个例子。 例一 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
整理 | 王启隆 透过「历史上的今天」,从过去看未来,从现在亦可以改变未来。 今天是 2023 年 2 月 23 日,在 2006 年的今天,都灵冬奥会自由式滑雪男子空中技巧决赛在意大利都灵萨奥兹杜尔克斯滑雪场举行。中国选手韩晓鹏战胜众多好…...
新手入门吉他推荐,第一把吉他从这十款选绝不踩雷!初学者吉他选购指南【新手必看】
一、新手购琴注意事项: 1、预算范围 一把合适的吉他对于初学者来说会拥有一个很好的音乐启蒙。选一款性价比高,做工材料、音质和手感相对较好的吉他自然不会是一件吃亏的事。**初学者第一把琴的预算,我觉得最低标准也是要在500元起…...
XSS注入进阶练习篇(三) XSS原型链污染
XSS原型链污染1.原型链的概念1.1 构造函数的缺点1.2 prototype 属性的作用1.3 原型链1.4 constructor属性1.5 prototype和__proto__2. 原型链污染2.1 原型链污染是什么?2.2 原型链污染的条件2.3 原型连污染实例2.3.1 hackit 20182.3.2 challenge-04223.总结1.原型链…...
【Java基础 下】 025 -- 阶段项目(斗地主)
目录 斗地主 一、斗地主游戏1 -- 准洗发(控制台版) 1、准备牌 2、洗牌 3、发牌 4、看牌 二、斗地主游戏2 -- 给牌排序①(利用序号进行排序) 2、洗牌 3、发牌 4、看牌 三、斗地主游戏2 -- 给牌排序②(给每一张牌计算价值…...
华为OD机试真题Python实现【矩阵最值】真题+解题思路+代码(20222023)
题目 给定一个仅包含0和1的n*n二维矩阵 请计算二维矩阵的最大值 计算规则如下 每行元素按下标顺序组成一个二进制数(下标越大约排在低位), 二进制数的值就是该行的值,矩阵各行之和为矩阵的值允许通过向左或向右整体循环移动每个元素来改变元素在行中的位置 比如 [1,0,1,1,1]…...
TypeScript笔记(三)
前言 上一篇文章我们主要介绍了TypeScript的基本类型boolean、number、string、void、null和undefine,还介绍了任意类型any和联合类型,这篇文章我们将会了解对象类型Interface和数组的相关知识。 对象的类型——接口 在TypeScript中,我们使…...
C++(41)-低版本升级到VS2019项目时遇到的问题(2)
1.错误码:MSB8066 代码为3 QT 项目老版本升级到新版本造成的, 1.重新加载项目: 扩展->QT VS tools->Open QT project files-> 2.添加QT模块:QT Project-Settings -> QT Modules2.无法打开QT的头文件 3.…...
git 实战应用
基本使用1.1、使用git想要让 git 对一个目录进行版本控制需要一下步骤:进入要管理的文件夹执行初始化命令git init查看目录下的文件状态git status管理指定文件// 添加指定文件 git add ***.txt// 添加未被管理的所有文件 git add .生成版本git commit -m 描述信息提…...
Linux重启命令shutdown与reboot
在linux命令中reboot是重新启动,shutdown -r now是立即停止然后重新启动,都说他们两个是一样的,其实是有一定的区别的。 shutdown 命令可以安全地关闭或重启Linux系统,它在系统关闭之前给系统上的所有登录用户提示一条警告信息。…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中,合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式:工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日,在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上,可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞,强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
