【raETable】🎉开源啦!开源啦!开源啦!🎉

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

【raETable】🎉开源啦!开源啦!开源啦!🎉

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

【raETable】🎉开源啦!开源啦!开源啦!🎉
经过五一假期的整理,已经完成基本的发布了,欢迎各位大佬前来测试

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

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

也欢迎大佬们star、issues

raETable的由来

raETablereact antd Easy Table 的缩写。旨在让开发者在react中使用 antdTable时更 easy。

raETable特性

  • 💎 大多数配置项继承自 antd,只有少量业务配置项,易学易用
  • 🌈 一个 option 可以生成一个 B 端页面,且包含增删改查基本功能
  • 🚀 所有组件支持使用对应的 hook 生成
  • 🎨 内置多种动画组件
  • 🚥 支持自定义组件
  • 💡 大量默认配置,开箱即用

为了方便书写,本库所有的组件都省略了ra

raETable适用场景

这个组件库诞生的环境是 B 端业务场景,每个页面都是表格TableForm组成,虽然每个页面的数据不同,但是逻辑大都相似:标题、条件、表格、业务弹出层四个部分

【raETable】🎉开源啦!开源啦!开源啦!🎉

option有多简单

{
    affairName: "靓仔",
    columns: columns,
    getLists: getData,
    addAffair: addData,
    delAffair: delData,
    editAffair: editData,
    pageTitle: "靓仔管理",
    rowKey: "name"
}

你既可以使用传统的书写方式使用jsxtsx

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

他们是等价的,都会得到如下的页面,包括完整的增删改查功能

【raETable】🎉开源啦!开源啦!开源啦!🎉

如果你进行的业务场景与此类似,那么我十分建议你尝试下这个组件库

一些配置项的说明

组件库中大量使用了默认配置,得益于此,你只需要提供经过axios等封装后的异步函数即可,分别:请求列表的getListsaddAffairdelAffaireditAffair,其中getLists是必须的,其余非必须

需要说明的是,如果你不提供非必须的editAffair,那么页面中就不会有编辑按钮,因为没有对应的操作,那么展示这个按钮就没有意义,addAffairdelAffair同理

还有一个问题,需要各位的谅解,文档框架我使用的是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"
/>
)

页面渲染如下

【raETable】🎉开源啦!开源啦!开源啦!🎉

原文链接:https://juejin.cn/post/7228955696119971898 作者:萌萌哒草头将军

(0)
上一篇 2023年5月4日 上午10:47
下一篇 2023年5月4日 上午10:57

相关推荐

发表评论

登录后才能评论