【raETable】🎉开源啦！开源啦！开源啦！🎉

今天开源一个特别好用的项目raETable

只需要简单的配置，就可以实现一个页面

经过五一假期的整理，已经完成基本的发布了，欢迎各位大佬前来测试

文档地址：mmdctjj.github.io/raetable/

githup地址：github.com/mmdctjj/rae…

也欢迎大佬们star、issues

raETable的由来

raETable是react antd 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

<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"
/>
)

页面渲染如下