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

raETablereact antd Easy Table 的缩写。旨在让开发者在react中使用 antdTable时更 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}
        />
    )
}

💡 往期回顾

相关推荐
行云&流水12 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
盛夏绽放2 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
巴巴_羊5 小时前
React Ref使用
前端·javascript·react.js
杨进军5 小时前
React 协调器 render 阶段
前端·react.js·前端框架
markyankee1015 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
归于尽5 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
杨进军5 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
翻滚吧键盘7 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹8 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军8 小时前
React 创建根节点 createRoot
前端·react.js·前端框架