• 2024-08-12ProTable rowSelection 支持多选
    前言:第一次用到多选,gpt非常好用,比之前网页方便太多。 importProTablefrom'@ant-design/pro-table';importReact,{useState}from'react';constTableWithRowSelection=()=>{//使用useState钩子来保存选中的行const[selectedRows,setSelectedRows]
  • 2024-07-18二次封装antd的ProTable、EditableProTable,结合use-antd-resizable-header,做一个列可伸缩的表格组件
    原先是一个项目模块内需求,迭代的时候领导要求项目全面翻新,所有表格都要可伸缩列如果一个一个页面写伸缩列的话,每个页面都要引用一次use-antd-resizable-header,有点累赘找了网上,暂时没看见这个有人整理这个组件。直接上代码importProTablefrom"@ant-design/pro-table";i
  • 2024-05-22antd 的 ProTable 通过rowClassName 设置行的字体颜色时,固定列fixed不生效的问题
    1、其他列是已经生效了,但是固定列是没有生效的 constrowClassName=(record)=>{returntableTreeSearchKey.includes(record.key)?'selected-row':'';};<ProTable ...... rowClassName={rowClassName}> 2、分析原因:固定列的子组件也有color属性,覆盖
  • 2024-04-16antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列
    1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。{title:displayName,dataIndex:propName,key:newPropName,width:widthIndex//,ellipsis:true}但是这引发了另外的问题。react-resizable配置的列可拖动无效了。额外的情况:obj.fixed='
  • 2024-03-23antdesign protable 修改搜索区Form item的placeholder
    默认protable搜索去的placeholder为请输入或者请选择: 需要修改为其他内容,配置 constcolumns=[  {   title:'项目',   dataIndex:'project',   valueEnum:currentUser.projects.reduce((r,c)=>{    r[c]=c;    re
  • 2024-03-19Antd ProTable 设置表格头,可拖动变换列宽度
    ProTable表格本身是不支持,列宽度可拖动的。1、按照一个插件( react-resizable)npm install --save react-resizable2、新建一个工具类ResizableTableUtil.jsimportReactfrom'react';import{Resizable}from'react-resizable';constResizableTitle=(props)=>
  • 2024-03-15React Antd 的ProTable 如何默认展开树结构
    1、defaultExpandAllRows:true  defaultExpandAllRows设为true就可以了<ProTablerowKey="key"columns={rightBomColumnArr}dataSource={rightBomTableTreeData}
  • 2024-02-27react ProTable树默认只展示第一层和第二层
    要在AntDesignPro中的ProTable组件中默认展开第一层和第二层,您可以使用expandable的defaultExpandAllRows选项结合expandedRowKeys来实现。以下是一个示例代码,演示如何在AntDesignPro中的ProTable组件中默认展示第一层和第二层:import{ProTable}from'@an
  • 2024-02-27antd proTable 默认展开所有层
    antdproTable默认展开所有层expandable={{defaultExpandAllRows:true}}importReactfrom'react';import{ProTable}from'@ant-design/pro-table';constcolumns=[{title:'Name',dataIndex:'name',ke
  • 2024-02-22Protable 树结构移除选中行
    信铁寒胜:它里面这个迭代的思想还是比较有用的。要在ProTable树形结构中实现移除选中行的功能,你需要做以下几步:在ProTable的父组件中定义数据源 data 和一个函数用于移除行。在ProTable组件中传入数据源和定义一个列,其中包含一个操作列,可以在该列中添加一个移除按钮。
  • 2024-02-21Antd的ProTable高级表格缓存列设置
    1、目的:要将ProTable组件的列设置缓存到localStorage中,你可以使用浏览器的localStorageAPI。通过监听onColumnsStateChange事件,你可以在每次列的显示和隐藏状态发生变化时,将最新的列设置保存到localStorage中。然后,在组件初始化时,从localStorage中读取之前保存的列设
  • 2024-02-19ProTable双击可编辑
    要实现在AntDesign的Table组件中双击单元格修改内容,你可以通过以下步骤来实现:创建一个React组件,并引入所需的依赖:npminstallantd编写示例代码:importReact,{useState}from'react';import{Table,Input}from'antd';constEditableTable=()=>{c
  • 2024-02-06使用JS来开发ProComponents的ProTable案例
    ProComponents的ProTable组件是基于React和TypeScript开发的,但也可以在JavaScript项目中使用。以下是一个使用JavaScript的ProTable示例:import{useState,useRef}from'react';import{Button}from'antd';importProTablefrom'@ant-design/pro-table&#