hooks useModule自定义hooks (二次封装AgGridReact ag-table)自定义表头,自定义表头搜索
场景业务:
多次运用AgGridReact的table 列表
思路:
运用自定义hooks进行二次封装:
通用配置例如:传参的参数,传参的url,需要缓存的key这些键值类
定制化配置例如:需要对table 的一些定制化传参,是否需要分页,表头配置,表头搜索配置
通用配置:
const { SettingTableRender, TableListRender, getTableData,resetSesstion,tableData } = useTableModule({renderKey: {companyName: renderContext,contacts: EllipsisCommont,industries: industriesCell,serviceTypes: bdInfosServiceTypes,businessProgress: bdInfosBusinessProgress,latestFollowUpDate,latestNoteCreatedTime,associationLabel,estimatedDealDate,dealDate:dealTime,website:websiteCell,salesLeadOwner:ownerCell,businessOpportunityLeader:ownerCell,accountManager:ownerCell},configKey: 'COMPANY_AFFILIATES',tableUrl: 'apiurl',tableRequest: getTableList,setParamsList,sessionKey:'tableList'});
定制配置:
{/* 列表 */}{TableListRender({pagination: false,customColumn,key: tabActive,filterSearchRender: {companyName: {render: SelectCompanyName,},contacts: {render: SelectCompanyName,},associationLabel: {render: Select,tPropty: {options: associationLabelOp,},},industries: {render: TreeSelect,tPropty: {treeData: listEnum('industry'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'id', label: 'label', children: 'children' },},},serviceTypes: {render: TreeSelect,tPropty: {treeData: listEnum('serviceType'),showCheckedStrategy: TreeSelect.SHOW_PARENT,treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'name', label: 'label', children: 'children' },},},businessProgress: {render: TreeSelect,tPropty: {treeData: listEnum('businessProgress').filter((i) =>['ACCOUNT_BUSINESS_NOT_FOLLOWED_UP','ACCOUNT_BUSINESS_CUSTOMER_NOT_CONTACTED','ACCOUNT_BUSINESS_PLAN_COMMUNICATION','ACCOUNT_BUSINESS_PLAN_VERIFICATION','ACCOUNT_BUSINESS_NEGOTIATION','ACCOUNT_BUSINESS_CONTRACTED','ACCOUNT_BUSINESS_LOST',].includes(i.name)),treeCheckable: true,treeNodeFilterProp: 'label',fieldNames: { value: 'value', label: 'label', children: 'children' },},},salesLeadOwner: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},businessOpportunityLeader: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},accountManager: {render: TreeSelect,tPropty: {...OwnertProps(listEnum('companyUser')),},},},})}
非常灵活的表单,基于ag-table 的基础功能拖拽,自定义宽度的前提下额外拓展业务需求:自定义表头,自定义表头的sort,以及自定义搜索功能。
重点是在于思路的拓展。
相关文章:
hooks useModule自定义hooks (二次封装AgGridReact ag-table)自定义表头,自定义表头搜索
场景业务: 多次运用AgGridReact的table 列表 思路: 运用自定义hooks进行二次封装: 通用配置例如:传参的参数,传参的url,需要缓存的key这些键值类 定制化配置例如:需要对table 的一些定制化传…...
Manus无需邀请码即可使用的平替方案-OpenManus实测
文章目录 Manus 简介核心定位技术架构核心特点应用场景性能表现用户体验发展计划OpenManus技术架构与设计理念核心功能特性应用场景案例与闭源Manus的差异对比安装使用与实战演示执行过程记录简单案例-快速写一个helloworld的java程序复杂案例-分析特斯拉汽车近三年财务数据并生…...
常用的gpt
1、DeepSeek 好用。可惜现在热度上去了,经常查技术问题会报网络繁忙 2、Qwen Chat Qwen Chat 千问,阿里的gpt。需要注册账号,好用程度感觉跟deepSeek差不多。并且不会像deepSeek一样报网络繁忙 3、文心一样 百度的。相对上2个技术问题较弱…...
【AI】【Unity】关于Unity接入DeepseekAPI遇到的坑
前言 由于deepseek网页端在白天日常抽风,无法正常的使用,所以调用API就成了目前最好的选择,尤其是Deepseek的API价格低得可怕,这不是和白送的一样吗!然后使用过很多本地部署接入API的方式,例如Chatbox、Pa…...
MAX232数据手册:搭建电平转换桥梁,助力串口稳定通信
在现代电子设备的通信领域,串口通信因其简单可靠而被广泛应用。MAX232 芯片作为串口通信中的关键角色,发挥着不可或缺的作用。下面,我们将依据提供的资料,深入解读 MAX232 芯片的各项特性、参数以及应用要点。 一、引脚说明 MAX2…...
vue2项目开启br压缩
<在 Vue 2 项目中,使用 br 压缩通常是为了减少文件大小,从而加快网页加载速度。br 是一种由 Google 开发的压缩格式,全称为 Brotli。在 Vue 2 项目中,你可以通过配置构建工具(如 Webpack)来启用对 .br 文…...
jdk-21_linux-x64_bin.tar.gz Linux jdk21压缩包安装保姆级(详细安装教程)
jdk-21_linux-x64_bin.tar.gz 解压版详细安装教程 一、简洁版(需要对 Linux 操作有一定基础)二、图文详细教程1、前置准备2、解压安装3、配置环境变量4、验证成功 官网下载地址: https://www.oracle.com/java/technologies/downloads/#java2…...
DataWhale-三月学习任务-大语言模型初探(一、二、五章学习)
本次学习计划,参考赵鑫老师团队出版的大语言模型一书,链接如下: 书籍及参考资料链接 第一章节 从技术路径上来说,语言模型(LanguageModel, LM)是提升机器语言智能(Language Intelligence&…...
【设计模式】掌握建造者模式:如何优雅地解决复杂对象创建难题?
概述 将一个复杂对象的构建与表示分离,使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于:某个对象的构建过程复杂的情况。 由于实现了构建和装配的解耦。…...
Nuxt.js 全栈开发指南:构建现代 Web 应用的终极解决方案
一、Nuxt.js 的核心价值与演进 1.1 现代 Web 开发的挑战与破局 根据 2023 年 Web Almanac 统计,全球 Top 1000 网站中有 68% 采用服务端渲染方案。Nuxt.js 作为 Vue 生态的 SSR 框架,完美解决了以下痛点: SEO 困境:传统 SPA 的…...
PPT内视频播放无法播放的原因及解决办法
PPT内视频无法播放,通常是视频编解码的问题。目前我遇到的常见的视频编码格式有H.264,H.265,VP9,AV1这4种。H.264编解码的视频,Windows原生系统可以直接播放,其他的视频编码格式需要安装对应的视频编解码插…...
关于ModbusTCP/RTU协议转Ethernet/IP(CIP)协议的方案
IGT-DSER智能网关模块支持西门子、倍福(BECKHOFF)、罗克韦尔AB,以及三菱、欧姆龙等各种品牌的PLC之间通讯,支持Ethernet/IP(CIP)、Profinet(S7),以及FINS、MC等工业自动化常用协议,同时也支持PLC与Modbus协议的工业机器人、智能仪…...
为什么要开源?
互联网各领域资料分享专区(不定期更新): Sheet 正文 开源(Open Source)是软件、硬件或知识产品将其源代码或设计公开,允许任何人自由使用、修改和分发的模式。开源的核心不仅是“免费”,更是一种协作和透明的理念。以下是开源的主要动因和优势: 一、技术驱动:提升质量…...
WPF在特定领域的应用:打造一款专业的图像编辑工具
WPF在特定领域的应用:打造一款专业的图像编辑工具 一、前言二、WPF 基础概念2.1 什么是 WPF2.2 WPF 的核心特性 三、图像编辑工具的需求分析3.1 基本功能3.2 高级功能 四、使用 WPF 实现图像编辑工具4.1 项目搭建4.2 图像加载与显示4.3 基本编辑操作4.4 图层管理4.5…...
从0开始的操作系统手搓教程43——实现一个简单的shell
目录 添加 read 系统调用,获取键盘输入 :sys_read putchar和clear 上班:实现一个简单的shell 测试上电 我们下面来实现一个简单的shell 添加 read 系统调用,获取键盘输入 :sys_read /* Read count bytes from the file pointed to by fi…...
Visual Studio Code(VS Code)支持的编程语言
JavaScript:VS Code 原生支持 JavaScript,提供语法高亮、代码折叠、自动补全等功能。推荐使用ESLint和Prettier进行代码格式化和错误检查。 TypeScript:作为 JavaScript 的超集,TypeScript 在 VS Code 中也得到原生支持…...
探索AI对冲基金:开源自动化交易系统的革新之路
在量化交易领域,人工智能技术的应用正悄然改变传统对冲基金的运作模式。GitHub上的开源项目ai-hedge-fund为开发者和金融从业者提供了一个独特的实践平台。该项目通过多智能体系统架构,整合市场数据分析、量化策略生成、风险管理和投资组合优化等核心功能,实现了从数据采集到…...
C语言每日一练——day_3(快速上手C语言)
引言 针对初学者,每日练习几个题,快速上手C语言。第三天。(会连续更新) 采用在线OJ的形式 什么是在线OJ? 在线判题系统(英语:Online Judge,缩写OJ)是一种在编程竞赛中用…...
vue3中接收props的两种写法
在 Vue 3 中,接收 props 有两种主要的写法,分别是运行时声明和基于类型的声明。下面为你详细介绍这两种写法。 1. 运行时声明 运行时声明是 Vue 2 中就已经存在的方式,在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来…...
Django下防御Race Condition
目录 漏洞原因 环境搭建 复现 A.无锁无事务时的竞争攻击 B.无锁有事务时的竞争攻击 防御 A.悲观锁加事务防御 B.乐观锁加事务防御 总结 漏洞原因 Race Condition 发生在多个执行实体(如线程、进程)同时访问共享资源时,由于执行顺序…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
