灏天阁

两个场景告诉你，raETable 有多好用

· Yin灏

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

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

image.png

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

github 地址：github.com/mmdctjj/rae… （github 求star，求issues，一起让raETable变的更好用）

raETable是什么

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

2023-05-08 09.19.42.gif

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

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

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

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

2023-05-08 09.19.42.gif

和useAntdTable比较

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

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

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

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

- Book Lists -