热门搜索:
您现在的位置是：首页 > 文章详情

antd-crud v1.0.0 发布，一个 React 增删改查高阶组件

日期：2023-10-20点击：254

antd-crud

一个基于 React + Ant.Design 的增删改查组件。

特征

  • 1、极轻量，只依赖于 Ant.Design 再无其他任何依赖
  • 2、支持基本的【增删改查】和【批量删除】功能
  • 3、支持搜索、自定义分页和自定义排序等功能
  • 4、支持刷新、导出 Excel、数据打印、行高设置等功能
  • 5、更多的 DIY 配置

已完成功能

  •  基本增删改查
  •  分页加载
  •  搜索面板
  •  批量删除
  •  数据刷新
  •  EXCEL 导出
  •  行高设置
  •  打印功能

待完善功能

  •  列设置功能
  •  非表单形式展示的查看页面数据化
  •  编辑或查看页面可选 Modal 或者 Drawer
  •  编辑页面和查看页面分组设置
  •  编辑页面自定义布局
  •  编辑和列表在同一个页面的布局选择

开始使用

 npm i @codeflex/antd-crud
  
 function App() {  const columns: ColumnsConfig<Account> = [  {  title: '姓名',  dataIndex: 'name',  key: 'name',  placeholder:"请输入姓名",  supportSearch:true,  render: (text) => <a>{text}</a>,  },  {  title: '年龄',  dataIndex: 'age',  key: 'age',  supportSearch:true,  },  {  title: '地址',  dataIndex: 'address',  key: 'address',  supportSearch:true,  },  {  title: '标签',  key: 'tags',  dataIndex: 'tags',  supportSearch:true,  render: (_, { tags }) => (  <>  {tags.map((tag) => {  let color = tag.length > 5 ? 'geekblue' : 'green';  if (tag === 'loser') {  color = 'volcano';  }  return (  <Tag color={color} key={tag}>  {tag.toUpperCase()}  </Tag>  );  })}  </>  ),  }  ];  const data: Account[] = [  {  key: '1',  name: 'John Brown',  age: 32,  address: 'New York No. 1 Lake Park',  tags: ['nice', 'developer'],  },  {  key: '2',  name: 'Jim Green',  age: 42,  address: 'London No. 1 Lake Park',  tags: ['loser'],  },  {  key: '3',  name: 'Joe Black',  age: 32,  address: 'Sydney No. 1 Lake Park',  tags: ['cool', 'teacher'],  },  ];  const actions:Actions<Account> = {  onCreate:(account)=>{  console.log("onCreate", account);  }  };  return (  <div style={{width:"960px"}}>  <AntdCrud columns={columns}  dataSource={data}  actions={actions}  pageNumber={1}  pageSize={10}  totalRow={2342}/>  </div>  ) }
 

ColumnConfig 类型说明：

ColumnConfig 继承了 Antd 的 Table 的 Column 的所有配置，参考：https://ant-design.antgroup.com/components/table-cn#column

在此基础上，增加了自己的配置：

  • placeholder: 搜索框和编辑页面的占位内容
  • supportSearch: 是否支持搜素
  • form: 编辑表单的 form 设置，类型为 FormConfig

FormConfig 类型说明：

 type FormConfig = {    // 表单类型，默认为 Input，  // 支持：Input、InputNumber、Hidden、Radio、Checkbox、Rate、  // Switch、DatePicker、Select、Slider、Upload  type: string,    //自定义属性，支持 antd 控件的所有属性配置  attrs?: any,  //验证规则，只在编辑页面起作用  rules?: any[], }

Actions 类型说明：

Actions 是用于定义 AntdCrud 组件的监听方法

Actions 定义的类型如下：

 type Actions<T> = {  //获取数据列表  onFetchList?: (currentPage: number  , pageSize: number  , totalPage: number  , searchParams: any  , sortKey: string  , sortType: "asc" | "desc") => void,  //获取数据详情  onFetchDetail?: (row: T) => T,  //删除单条数据  onDelete?: (row: T) => void,  //批量删除数据  onDeleteBatch?: (rows: T[]) => void,  //数据更新  onUpdate?: (row: T) => void,  //数据创建  onCreate?: (row: T) => void,  //初始化搜索框的值  onFormItemValueInit?:(key:string) => any }
 

需要用户在 Actions 定义以上方法，用于对数据进行操作或查询。

运行演示

 git clone https://gitee.com/antdadmin/antd-crud.git cd antd-crud/example npm install npm run dev
原文链接：https://www.oschina.net/news/262532/antd-crud-1-0-0-released
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章