【RaETable】🚀🚀🚀一些新功能让你的开发更流畅

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

Github: github.com/mmdctjj/rae...

npm: www.npmjs.com/package/rae...

文档：mmdctjj.github.io/raetable

🚀 新功能

🎉 支持颜色选择器组件

随着antd版本更新，RaETable进行了底层antd版本升级，^5.4.6 -> ^5.8.4，并且支持了颜色选择组件。

🎉 表格操作栏目功能更加灵活了

本次更新新增了操作栏目按钮的禁用和隐藏，同时新增按钮文本修改。

现在你可以通过判断表格每行的具体内容或者行数，设置按钮的样式和文本。

jsx 复制代码

<ETable
  /** 其他属性 */
  extend={[
    {
      title: (row, idx) => idx % 2 === 0 ? '标记' : '标记2',
      disabled: (row, idx) => idx % 2 === 0,
      onClick,
      loading: (row, idx) => tagLoading,
    }
  ]}
  /** 其他属性 */
/>

🚀 `RaETable` 解决了啥问题

在toB日常的开发中，我们通常要针对一个场景对应的一个或多个数据库表做对应的增删改查的功能。

而在新增或编辑、查询、展示时，对应的很多字段都是重复的。

jsx 复制代码

// 筛选条件
const Condition = () => {
    const [form] = Form.useForm()
    return (
        <Form form={from}>
            <Form.Item name="name" label="name"><Input /></Form.Item>
            <Form.Item name="age" label="age"><Input /></Form.Item>
            <Form.Item name="admin" label="admin"><Input /></Form.Item>
            <!-- 略 -->
        </Form>
    )
}
// 列表展示
const TableList = () => {
    const columns = [
        { title: 'name', dataIndex: 'name', key: 'name' },
        { title: 'age', dataIndex: 'age', key: 'age' },
        { title: 'admin', dataIndex: 'admin', key: 'admin' },
        /** 略 */
    ]
    return (
        <Table columns={columns} dataSources={dataSources} />
    )
}

// 新增或者编辑
const Edit = () => {
    const [form] = Form.useForm()
    return (
        <Form form={from}>
            <Form.Item name="name" label="name"><Input /></Form.Item>
            <Form.Item name="age" label="age"><Input /></Form.Item>
            <Form.Item name="admin" label="admin"><Input /></Form.Item>
            <!-- 略 -->
        </Form>
    )
}

const App = () => {
    return (
        <>
            <Condition />
            <TableList />
            <Drawer>
                <Edit />
            </Drawer>
        </>
    )
}

上面的示例代码是一个很常见的功能，如果采用 RaETable ，那么代码量可能只需要三分之一。如下：

jsx 复制代码

const App = () => {

    const columns = [
        { title: 'name', dataIndex: 'name', key: 'name', conditionType: 'Input', },
        { title: 'age', dataIndex: 'age', key: 'age', conditionType: 'Input', },
        { title: 'admin', dataIndex: 'admin', key: 'admin' },
        /** 略 */
    ]

    return (
        <ETable
            columns={columns}
            dataSources={dataSources}
            extend={
              [
                {
                  title: (row, idx) => idx % 2 === 0 ? '标记' : '标记2',
                  disabled: (row, idx) => idx % 2 === 0,
                  onClick,
                  loading: (row, idx) => tagLoading,
                }
              ]
            }
            // 新增或者编辑之后的回调
            onAffairSuccess={onAffairSuccess}
            // 查询条件变化的回调
            onConditionChange={fetch}
        />
    )
}

【RaETable】🚀🚀🚀一些新功能让你的开发更流畅

🚀 新功能

🎉 支持颜色选择器组件

🎉 表格操作栏目功能更加灵活了

🚀 RaETable 解决了啥问题

💡 往期回顾

🚀 `RaETable` 解决了啥问题