当前位置: 首页 > 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,以及自定义搜索功能。

重点是在于思路的拓展。

相关文章:

  • 浪涌测试方法与保护电路
  • Halcon 算子 一维码检测识别、项目案例
  • 任务10:三层交换机配置
  • 从零开始实现大语言模型(十四):高阶训练技巧
  • 国内外网络安全政策动态(2025年2月)
  • SyntaxError: Unexpected keyword ‘else‘
  • const iterator 和 const_iterator的区别
  • 华为欧拉系统 Tomcat 安装详解
  • 不同开发语言之for循环的用法、区别总结
  • nginx 代理 redis
  • 【目标检测】【NeuralPS 2023】Gold-YOLO:通过收集与分发机制实现的高效目标检测器
  • nginx-静态资源部署
  • 如何在WPS中接入DeepSeek并使用OfficeAI助手(超细!成功版本)
  • WordPress报502错误问题解决-php-fpm-84.service loaded failed failed LSB: starts php-fpm
  • 天锐蓝盾数据防泄露系统 | 企业内部终端管理
  • docker1
  • [通俗易懂C++]:std::optional
  • Docker Compose企业示例
  • Windows11下玩转 Docker
  • 计算机毕业设计SpringBoot+Vue.js网络海鲜市场系统(源码+文档+PPT+讲解)
  • 网站建设最新技术/知乎营销推广
  • 移动端开发流程/优化推广关键词
  • 电商网站如何做/简述网站建设的基本流程
  • 忻州网站建设网站推广/杭州seo排名收费
  • ps做的网站模板/百度做广告费用
  • 开网站建设公司心得/百度快照入口官网