今天开源一个特别好用的项目raETable
只需要简单的配置，就可以实现一个页面
经过五一假期的整理，已经完成基本的发布了，欢迎各位大佬前来测试
文档地址：mmdctjj.github.io/raetable/
githup地址：github.com/mmdctjj/rae…
也欢迎大佬们star、issues
raETable的由来
raETable是reactantd Easy Table 的缩写。旨在让开发者在react中使用 antd的Table时更 easy。
raETable特性
- 💎 大多数配置项继承自 antd，只有少量业务配置项，易学易用
- 🌈 一个 option 可以生成一个 B 端页面，且包含增删改查基本功能
- 🚀 所有组件支持使用对应的 hook 生成
- 🎨 内置多种动画组件
- 🚥 支持自定义组件
- 💡 大量默认配置，开箱即用
为了方便书写，本库所有的组件都省略了ra
raETable适用场景
这个组件库诞生的环境是 B 端业务场景，每个页面都是表格Table、Form组成，虽然每个页面的数据不同，但是逻辑大都相似：标题、条件、表格、业务弹出层四个部分
option有多简单
{ affairName: "靓仔", columns: columns, getLists: getData, addAffair: addData, delAffair: delData, editAffair: editData, pageTitle: "靓仔管理", rowKey: "name" }
你既可以使用传统的书写方式使用jsx、tsx
jsx
复制代码
<EPage affairName="靓仔" addAffair={addData} columns={columns} delAffair={delData} editAffair={editData} getLists={getData} pageTitle="靓仔管理" rowKey="name" />
也可以使用内置的hooks方式
const [opt, setOpt, Dom] = usePage({ affairName: "靓仔", columns: columns, getLists: getData, addAffair: addData, delAffair: delData, editAffair: editData, pageTitle: "靓仔管理", rowKey: "name" }) return <Dom />
他们是等价的，都会得到如下的页面，包括完整的增删改查功能
如果你进行的业务场景与此类似，那么我十分建议你尝试下这个组件库
一些配置项的说明
组件库中大量使用了默认配置，得益于此，你只需要提供经过axios等封装后的异步函数即可，分别：请求列表的getLists、addAffair、delAffair、editAffair，其中getLists是必须的，其余非必须
需要说明的是，如果你不提供非必须的
editAffair，那么页面中就不会有编辑按钮，因为没有对应的操作，那么展示这个按钮就没有意义，addAffair、delAffair同理还有一个问题，需要各位的谅解，文档框架我使用的是dumi，由于继承的类，在自动生成API表格时会追溯到父类，这给整个文档的书写带来不小的困扰，已经在想办法解决了，大家尽量看demo里的代码，文档后续很快就完善起来
接下来的任务
- 开发扩展性功能
- 完善文档
- 适配移动端展示
额外的优化
这个组件库内置了动画，不用配置，页面也很优雅，如果你想你的表格更优雅，可以尝试将下面的less加入到全局
@keyframes table-row-right { 0% { transform: translateY(50%); } 80% { transform: translateY(-1%); } 100% { transform: translateY(0); } } .ant-table-row { transform: translateY(50%); } each(range(100), { .ant-table-row:nth-child(@{key}) { animation: table-row-right 300ms ease-in-out; animation-delay: @key * 30ms; animation-fill-mode: forwards; } })
好了不多啰嗦了，你可以使用下面的方式下载并且体验它
下载
npm instanll raetable -D or pnpm install raetable -D or yarn add raetable -D
使用
import { EPage } from 'raetable'; const columns = [ { dataIndex: 'name', key: 'name', title: 'name', affairType: 'input', conditionType: 'input', }, { dataIndex: 'age', key: 'age', title: 'age', affairType: 'input', conditionType: 'input' }, { dataIndex: 'admin', key: 'admin', title: 'admin', affairType: 'select', conditionType: 'select', select: [ { key: 1, value: true, label: '是' }, { key: 2, value: false, label: '否' }, ] }, { dataIndex: 'eat', key: 'eat', title: 'eat', affairType: 'select', conditionType: 'select', select: [ { value: 1, label: '牛肉', key: 1 }, { value: 2, label: '鸡蛋', key: 2 }, ] }, { dataIndex: 'gender', key: 'gender', title: 'gender', conditionType: 'select', more: true, select: [ { value: 1, label: '男', key: 1 }, { value: 2, label: '女', key: 2 }, ] }, { dataIndex: 'test', key: 'test', title: 'test', more: true, conditionType: 'input' }, { dataIndex: 'test1', key: 'test1', title: 'test1', more: true, conditionType: 'input' }, { dataIndex: 'test2', key: 'test2', title: 'test2', more: true, conditionType: 'input' } ] const datas = [ { name: 'mmdctjj', age: 18, eat: 1, admin: true, gender: 1, test: 'test', test1: 'test1', test2: 'test2', test: 'test3', }, { name: 'xiaofeng', age: 28, eat: 2, admin: false, gender: 1, test: 'test', test1: 'test1', test2: 'test2', test: 'test3', }, { name: 'zhuming', age: 12, eat: 1, admin: false, gender: 1, test: 'test', test1: 'test1', test2: 'test2', test: 'test3', }, ]; const getData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ data: datas, msg: 'ok', code: 200 }) }, 1000) }) } const addData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ msg: 'ok', code: 200 }) }, 1000) }) } const delData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ msg: 'ok', code: 200 }) }, 1000) }) } const editData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ msg: 'ok', code: 200 }) }, 1000) }) } export default () => ( <EPage affairName="靓仔" addAffair={addData} columns={columns} delAffair={delData} editAffair={editData} getLists={getData} pageTitle="靓仔管理" rowKey="name" /> )
页面渲染如下
