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

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 项目中&#xff0c;使用 br 压缩通常是为了减少文件大小&#xff0c;从而加快网页加载速度。br 是一种由 Google 开发的压缩格式&#xff0c;全称为 Brotli。在 Vue 2 项目中&#xff0c;你可以通过配置构建工具&#xff08;如 Webpack&#xff09;来启用对 .br 文…...

jdk-21_linux-x64_bin.tar.gz Linux jdk21压缩包安装保姆级(详细安装教程)

jdk-21_linux-x64_bin.tar.gz 解压版详细安装教程 一、简洁版&#xff08;需要对 Linux 操作有一定基础&#xff09;二、图文详细教程1、前置准备2、解压安装3、配置环境变量4、验证成功 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/#java2…...

DataWhale-三月学习任务-大语言模型初探(一、二、五章学习)

本次学习计划&#xff0c;参考赵鑫老师团队出版的大语言模型一书&#xff0c;链接如下&#xff1a; 书籍及参考资料链接 第一章节 从技术路径上来说&#xff0c;语言模型&#xff08;LanguageModel, LM&#xff09;是提升机器语言智能&#xff08;Language Intelligence&…...

【设计模式】掌握建造者模式:如何优雅地解决复杂对象创建难题?

概述 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于&#xff1a;某个对象的构建过程复杂的情况。 由于实现了构建和装配的解耦。…...

Nuxt.js 全栈开发指南:构建现代 Web 应用的终极解决方案

一、Nuxt.js 的核心价值与演进 1.1 现代 Web 开发的挑战与破局 根据 2023 年 Web Almanac 统计&#xff0c;全球 Top 1000 网站中有 68% 采用服务端渲染方案。Nuxt.js 作为 Vue 生态的 SSR 框架&#xff0c;完美解决了以下痛点&#xff1a; SEO 困境&#xff1a;传统 SPA 的…...

PPT内视频播放无法播放的原因及解决办法

PPT内视频无法播放&#xff0c;通常是视频编解码的问题。目前我遇到的常见的视频编码格式有H.264&#xff0c;H.265&#xff0c;VP9&#xff0c;AV1这4种。H.264编解码的视频&#xff0c;Windows原生系统可以直接播放&#xff0c;其他的视频编码格式需要安装对应的视频编解码插…...

关于ModbusTCP/RTU协议转Ethernet/IP(CIP)协议的方案

IGT-DSER智能网关模块支持西门子、倍福(BECKHOFF)、罗克韦尔AB&#xff0c;以及三菱、欧姆龙等各种品牌的PLC之间通讯&#xff0c;支持Ethernet/IP(CIP)、Profinet(S7)&#xff0c;以及FINS、MC等工业自动化常用协议&#xff0c;同时也支持PLC与Modbus协议的工业机器人、智能仪…...

为什么要开源?

互联网各领域资料分享专区(不定期更新): Sheet 正文 开源(Open Source)是软件、硬件或知识产品将其源代码或设计公开,允许任何人自由使用、修改和分发的模式。开源的核心不仅是“免费”,更是一种协作和透明的理念。以下是开源的主要动因和优势: 一、技术驱动:提升质量…...

WPF在特定领域的应用:打造一款专业的图像编辑工具

WPF在特定领域的应用&#xff1a;打造一款专业的图像编辑工具 一、前言二、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 系统调用&#xff0c;获取键盘输入 :sys_read putchar和clear 上班&#xff1a;实现一个简单的shell 测试上电 我们下面来实现一个简单的shell 添加 read 系统调用&#xff0c;获取键盘输入 :sys_read /* Read count bytes from the file pointed to by fi…...

‌Visual Studio Code(VS Code)支持的编程语言

‌JavaScript‌&#xff1a;VS Code 原生支持 JavaScript&#xff0c;提供语法高亮、代码折叠、自动补全等功能。推荐使用ESLint和Prettier进行代码格式化和错误检查‌。 ‌TypeScript‌&#xff1a;作为 JavaScript 的超集&#xff0c;TypeScript 在 VS Code 中也得到原生支持…...

探索AI对冲基金:开源自动化交易系统的革新之路

在量化交易领域,人工智能技术的应用正悄然改变传统对冲基金的运作模式。GitHub上的开源项目ai-hedge-fund为开发者和金融从业者提供了一个独特的实践平台。该项目通过多智能体系统架构,整合市场数据分析、量化策略生成、风险管理和投资组合优化等核心功能,实现了从数据采集到…...

C语言每日一练——day_3(快速上手C语言)

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第三天。&#xff08;会连续更新&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…...

vue3中接收props的两种写法

在 Vue 3 中&#xff0c;接收 props 有两种主要的写法&#xff0c;分别是运行时声明和基于类型的声明。下面为你详细介绍这两种写法。 1. 运行时声明 运行时声明是 Vue 2 中就已经存在的方式&#xff0c;在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来…...

Django下防御Race Condition

目录 漏洞原因 环境搭建 复现 A.无锁无事务时的竞争攻击 B.无锁有事务时的竞争攻击 防御 A.悲观锁加事务防御 B.乐观锁加事务防御 总结 漏洞原因 Race Condition 发生在多个执行实体&#xff08;如线程、进程&#xff09;同时访问共享资源时&#xff0c;由于执行顺序…...

apt-offline终极指南:离线环境下的APT包管理解决方案

apt-offline终极指南&#xff1a;离线环境下的APT包管理解决方案 【免费下载链接】apt-offline Offline APT Package Manager 项目地址: https://gitcode.com/gh_mirrors/ap/apt-offline 你是否曾面临这样的困境&#xff1f;服务器在安全隔离的网络中&#xff0c;无法直…...

在单细胞测序数据分析中,barcodes、features和matrix是三个最核心的基础文件,它们共同构成了所有分析的基石。

在GEO&#xff08;Gene Expression Omnibus&#xff09;数据库中下载单细胞数据时&#xff0c;最常见的数据存储和提供形式主要有以下四种类型&#xff1a;10x Genomics 标准格式&#xff08;最主流&#xff09;在GEO的数据集中&#xff0c;我们通常会找到一个包含以下三个核心…...

WorkBuddy杀疯了?一群AI专家帮我打工,我在微信里当赛博虾工头!

梦瑶 发自 凹非寺量子位 | 公众号 QbitAI到底是谁说&#xff0c;给老板打工自己就当不成老板的&#xff1f;又是谁说&#xff0c;龙虾不好用、还不听使唤的&#xff1f;反正这些事儿&#xff0c;现在跟我没啥关系了。毕竟现在的我&#xff0c;已经转头当起了「虾工头」&#xf…...

对抗攻击新思路:为什么Diffusion模型比GAN更适合生成隐蔽攻击样本?

扩散模型在对抗攻击领域的突破性优势&#xff1a;从理论到实践 当我们在讨论机器学习安全时&#xff0c;对抗攻击一直是个令人着迷又充满挑战的话题。想象一下&#xff0c;只需对输入图像做几乎不可察觉的微小改动&#xff0c;就能让最先进的分类模型完全"失明"——这…...

Pixelorama扩展深度解析:3种自动化精灵图切割方案对比

Pixelorama扩展深度解析&#xff1a;3种自动化精灵图切割方案对比 【免费下载链接】Pixelorama A free & open-source 2D sprite editor, made with the Godot Engine! Available on Windows, Linux, macOS and the Web! 项目地址: https://gitcode.com/gh_mirrors/pi/Pi…...

告别Linux卡顿!用RK3562的M0核跑RT-Thread,实现实时控制与Linux并行运行

RK3562多核异构开发实战&#xff1a;用M0核实现Linux与RT-Thread的完美协同 在智能家居控制器项目中&#xff0c;我们遇到了一个典型难题——当Linux系统处理图形界面和网络通信时&#xff0c;电机的实时控制会出现明显延迟。传统解决方案需要两套独立硬件&#xff0c;直到我们…...

研华工控串口(RS232 RS485 RS422)针脚定义及接线示意图

一. 研华工控串口DB9针脚定义&#xff1a;二. 三种方式接线示意图&#xff1a;1.RS-232 模式&#xff08;默认模式&#xff09;点对点通讯&#xff0c;全双工&#xff0c;最长15米机器内DB9 外部RS-23…...

【跟韩工学Ubuntu第5课】-第5章 网络管理:Netplan、路由与防火墙-004篇-Ubuntu Server 网络管理:进阶配置、优化与实战诊断

文章目录 Ubuntu Server 网络管理:进阶配置、优化与实战诊断 (扩容优化版 | 适配高校教学+生产实战 | 30页核心内容) 5.1 网络基础:深入理解与实践查看(扩容+优化) 一、核心概念进阶(新增计算案例+场景区分) 二、必备诊断命令(新增高频参数+中文注释) 三、IPv6 完整配…...

2026年智能系统控制、优化与应用国际学术会议(ISCOA 2026)

【重要信息】 会议官网&#xff1a;https://www.yanfajia.com/action/p/2W49G66K 会议时间&#xff1a;2026年10月16-18日 会议地点&#xff1a;中国 成都 截稿日期&#xff1a;2026年6月1日&#xff08;早鸟优惠咨询&#xff09; 接收或拒收通知&#xff1a;文章投递后…...

解锁毕业论文新姿势:书匠策AI,你的学术超级英雄!

在学术征途上&#xff0c;每一位即将毕业的大学生都怀揣着梦想与挑战&#xff0c;而毕业论文则是那座必须跨越的巍峨大山。面对这座大山&#xff0c;你是否曾感到迷茫、无助&#xff0c;甚至有些力不从心&#xff1f;别怕&#xff0c;今天&#xff0c;就让我带你认识一位学术界…...