raETable是reactantd Easy Table 的缩写。旨在让开发者在react中使用 antd的Table时更 easy。
❝Github: github.com/mmdctjj/raetable
npm: www.npmjs.com/package/raetable
文档：mmdctjj.github.io/raetable
❞
🚀 新功能
🎉 支持颜色选择器组件
随着antd版本更新，RaETable进行了底层antd版本升级，^5.4.6 -> ^5.8.4，并且支持了颜色选择组件。
🎉 表格操作栏目功能更加灵活了
本次更新新增了操作栏目按钮的禁用和隐藏，同时新增按钮文本修改。
现在你可以通过判断表格每行的具体内容或者行数，设置按钮的样式和文本。
<ETable /** 其他属性 */ extend={[ { title: (row, idx) => idx % 2 === 0 ? '标记' : '标记2', disabled: (row, idx) => idx % 2 === 0, onClick, loading: (row, idx) => tagLoading, } ]} /** 其他属性 */ />
🚀RaETable解决了啥问题
在toB日常的开发中，我们通常要针对一个场景对应的一个或多个数据库表做对应的增删改查的功能。
而在新增或编辑、查询、展示时，对应的很多字段都是重复的。
下面是一个场景的简单开发示例：
// 筛选条件 const Condition = () => { const [form] = Form.useForm() return ( <Form form={from}> <Form.Item name="name" label="name"><Input /></Form.Item> <Form.Item name="age" label="age"><Input /></Form.Item> <Form.Item name="admin" label="admin"><Input /></Form.Item> <!-- 略 --> </Form> ) } // 列表展示 const TableList = () => { const columns = [ { title: 'name', dataIndex: 'name', key: 'name' }, { title: 'age', dataIndex: 'age', key: 'age' }, { title: 'admin', dataIndex: 'admin', key: 'admin' }, /** 略 */ ] return ( <Table columns={columns} dataSources={dataSources} /> ) } // 新增或者编辑 const Edit = () => { const [form] = Form.useForm() return ( <Form form={from}> <Form.Item name="name" label="name"><Input /></Form.Item> <Form.Item name="age" label="age"><Input /></Form.Item> <Form.Item name="admin" label="admin"><Input /></Form.Item> <!-- 略 --> </Form> ) } const App = () => { return ( <> <Condition /> <TableList /> <Drawer> <Edit /> </Drawer> </> ) }
上面的示例代码是一个很常见的功能，如果采用 RaETable ，那么代码量可能只需要三分之一。如下：
const App = () => { const columns = [ { title: 'name', dataIndex: 'name', key: 'name', conditionType: 'Input', }, { title: 'age', dataIndex: 'age', key: 'age', conditionType: 'Input', }, { title: 'admin', dataIndex: 'admin', key: 'admin' }, /** 略 */ ] return ( <ETable columns={columns} dataSources={dataSources} // 新增或者编辑之后的回调 onAffairSuccess={onAffairSuccess} // 查询条件变化的回调 onConditionChange={fetch} /> ) }
