【raETable】两个场景告诉你,raETable有多好用🔥🔥🔥

raETable诞生快一周了,npm的下载量已经突破600了,十分开心

【raETable】两个场景告诉你,raETable有多好用🔥🔥🔥

官网:mmdctjj.github.io/raetable/gu…

github地址:github.com/mmdctjj/rae… (github求star,求issues,一起让raETable变的更好用)

raETable是什么

raETable是一款面向toB业务的开源组件库,基于reactantd,通过包装columns可以自动生成表格、条件筛选Form、新增编辑Form

【raETable】两个场景告诉你,raETable有多好用🔥🔥🔥

raETable旨在让开发者在react中使用 antdTable时更 easy,这就是raETable的由来.

作为raETable的基石,columns继承自antdColumnType类型,开发者只需要记住如下的配置

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

上述量两种方案都会生成具有完整表单功能的页面

【raETable】两个场景告诉你,raETable有多好用🔥🔥🔥

useAntdTable比较

发布这几天最大的质疑声是这些功能ahooks都有啊,为啥要重复造轮子?

ahooks确实是个很伟大的库,raETable里的一些处理逻辑也使用了ahooks,但是raETableahooksuseAntdTable更加解放双手,全程甚至连Form.Item也不用写。

其次,useAntdTable仅仅是表格和Form联动,并没有集成在一起,更没有照顾到常用的新增,编辑等功能。

换句话说,raETable是牺牲了自由度,来换取高效率的开发体验。

后续的任务

  • 支持更多的表单组件,支持自定义组件
  • 多端设备自适应

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

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

相关推荐

发表评论

登录后才能评论