基于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系统,它在系统关闭之前给系统上的所有登录用户提示一条警告信息。…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
