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是牺牲了自由度，来换取高效率的开发体验。
后续的任务
- 支持更多的表单组件，支持自定义组件
- 多端设备自适应
