【raETable】🎉🎉🎉大更新!大更新!绝对大更新!

🎉好消息,raETable迎来第三个版本了!

本次更新主要有三个,次要更新有一个:

  1. 🚀支持更多内置组件
  2. 🚀支持注册自定义组件
  3. 🚀全局支持响应式布局
  4. ✈书写习惯改进

raETable是一款面向toB的快捷组件库,名字是react antd Easy Table 的缩写。旨在让开发者在react中使用 antdTable时更 easy。

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

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

🚀支持更多的内置组件

本次更新,内置的组件数量已经达到了15个,它们如下图所示

【raETable】🎉🎉🎉大更新!大更新!绝对大更新!

❓如何给组件传参

你只需要将需要的参数在column(EFormItemProps类型)声明即可。

    {
      dataIndex: 'name',
      title: '姓名',
      key: 'name',
      affairType: 'InputNumber',
      controls: false,
      prefix: 'yourName length'
    },

🚀支持注册自定义组件

使用自定义组件时需要使用官方提供的注册函数useExtendFormItem,它的参数是一个对象{[key: string]: (props: EFormItemProps) => ReactNode},该value是你自己定义的组件,它会接受EFormItemProps组件参数供你使用。

useExtendFormItem({
  yourComponentName1: ({ type, value, onChange }) => {
    if (type === 'display') return <>{value}</>;
    return <Input value={value + '自定义的组件Input1'} onChange={onChange} />;
  },
  yourComponentName2: ({ type, value, onChange }) => {
    if (type === 'display') return <>{value}</>;
    return <Input value={value + '自定义的组件Input2'} onChange={onChange} />;
  },
});

接着你就可以在columns里申明这个组件了

<EPage
  columns={[
    ...,
    {
      dataIndex: 'name',
      title: '姓名',
      key: 'name',
      conditionType: 'yourComponentName1',
      affairType: 'yourComponentName2'
    },
    ...
  ]}
/>

你可以在多个地方的调用useExtendFormItem注册组件,

如果组件名称重复,会覆盖旧的组件,所以你也可以用此方法重写默认组件

🚀全局支持响应式布局

目前全局的响应式布局遵循了Bootstrap的响应式布局

【raETable】🎉🎉🎉大更新!大更新!绝对大更新!

针对小屏幕的设备,对table做了优化

【raETable】🎉🎉🎉大更新!大更新!绝对大更新!

✈书写习惯改进

改进的地方如下:

  1. raETable特别exportFORMTYPE枚举类型供开发者快速声明组件名称
  2. 每个组件名称使用了antd的命名习惯,组件名称首字母都大写

所以现在声明组件也可以这样写:

import { FORMTYPE } from 'raetable'
 {
    dataIndex: 'input',
    key: 'input',
    title: 'input',
    affairType: FORMTYPE.Input
    // 等价于=> affairType: 'Input',
  },
  {
    dataIndex: 'number',
    key: 'number',
    title: 'number',
    affairType: 'InputNumber'
    // 等价于=> affairType: 'InputNumber',
  },

我们的库是基于antd的,所以这里保持了一样的习惯。开发者在自定义组件时,可以保持这个习惯(非必须的)

本次的更新就这些了,希望大家多多支持,友善交流

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

(0)
上一篇 2023年5月15日 上午10:00
下一篇 2023年5月15日 上午10:10

相关推荐

发表回复

登录后才能评论