raETable
诞生快一周了,npm
的下载量已经突破600了,十分开心
官网:mmdctjj.github.io/raetable/gu…
github地址:github.com/mmdctjj/rae… (github求star
,求issues
,一起让raETable
变的更好用)
raETable
是什么
raETable
是一款面向toB
业务的开源组件库,基于react
、antd
,通过包装columns
可以自动生成表格、条件筛选Form
、新增编辑Form
,
raETable
旨在让开发者在react
中使用 antd
的Table
时更 easy
,这就是raETable
的由来.
作为raETable
的基石,columns
继承自antd
的ColumnType
类型,开发者只需要记住如下的配置
const columns = [
{
dataIndex: 'food',
title: '食物',
key: 'food',
hideInTable: true, // 是否在表格中隐藏
conditionType: 'input', // 条件栏的类型为Input
affairType: 'select', // 新增编辑是为下拉框Select
select: [ // 下拉框时的值,在列表渲染时也会渲染为label
{ value: '1', lable: '牛肉', key: '1' },
{ value: '2', lable: '羊肉', key: '2' },
],
},
];
选择合适的方案
raETable
最大的优点是提供了两套列表和业务(指新增、编辑、删除、筛选)的联动方案
ETable
组件:开发者处理业务逻辑EPage
组件:RaETable
接管业务逻
ETable
组件:开发者处理业务逻辑
详细的介绍可以看官网组件介绍
import { ETable } from 'raetable';
import { useFetch } from './your/hooks'
import { addOne, deleteOne, editOne, getList } from './your/api'
const columns = [];
export default () => {
// 你的请求函数
const [dataSource, loading, fetch] = useFetch(getList);
const [deleteRes, deleteLoading, deleteFetch] = useFetch(deleteOne);
const [addRes, addLoading, addFetch] = useFetch(addOne);
const [editRes, editLoading, editFetch] = useFetch(editOne);
// 点击确认删除后回调
const onClickDeleteButton = () => {}
// 业务成功后回调
const onAffairSuccess = () => {}
return (
<ETable
affairName="靓仔"
affairWidth={900}
affairContainerType="drawer"
addLoading={addLoading}
backPath="/raetable/guide"
columns={columns}
dataSource={dataSource}
editLoading={editLoading}
loading={loading}
deleteLoading={deleteLoading}
onAffairSuccess={onAffairSuccess}
onConditionChange={fetch}
onClickDeleteButton={onClickDeleteButton}
pageTitle="靓仔管理"
rowSelection={{
type: 'checkbox',
}}
rowKey="name"
/>
);
};
EPage
组件:RaETable
接管业务逻辑
详细的介绍可以看官网组件介绍
import { EPage } from 'raetable';
import { addOne, deleteOne, editOne, getList } from './your/api'
const columns = [];
export default () => (
<EPage
affairName="靓仔"
addAffair={addOne}
columns={columns}
delAffair={deleteOne}
editAffair={editOne}
getLists={getList}
pageTitle="靓仔管理"
rowKey="name"
/>
);
上述量两种方案都会生成具有完整表单功能的页面
和useAntdTable
比较
发布这几天最大的质疑声是这些功能ahooks
都有啊,为啥要重复造轮子?
ahooks
确实是个很伟大的库,raETable
里的一些处理逻辑也使用了ahooks
,但是raETable
比ahooks
的useAntdTable
更加解放双手,全程甚至连Form.Item
也不用写。
其次,useAntdTable
仅仅是表格和Form
联动,并没有集成在一起,更没有照顾到常用的新增,编辑等功能。
换句话说,raETable
是牺牲了自由度,来换取高效率的开发体验。
后续的任务
- 支持更多的表单组件,支持自定义组件
- 多端设备自适应
原文链接:https://juejin.cn/post/7230457573719556155 作者:萌萌哒草头将军