🎉好消息,raETable
迎来第三个版本了!
本次更新主要有三个,次要更新有一个:
- 🚀支持更多内置组件
- 🚀支持注册自定义组件
- 🚀全局支持响应式布局
- ✈书写习惯改进
raETable
是一款面向toB
的快捷组件库,名字是react
antd
Easy Table 的缩写。旨在让开发者在react
中使用 antd
的Table
时更 easy。
文档地址:mmdctjj.github.io/raetable/
githup地址:github.com/mmdctjj/rae…
🚀支持更多的内置组件
本次更新,内置的组件数量已经达到了15
个,它们如下图所示
❓如何给组件传参
你只需要将需要的参数在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
的响应式布局
针对小屏幕的设备,对table
做了优化
✈书写习惯改进
改进的地方如下:
raETable
特别export
了FORMTYPE
枚举类型供开发者快速声明组件名称- 每个组件名称使用了
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
的,所以这里保持了一样的习惯。开发者在自定义组件时,可以保持这个习惯(非必须的)
本次的更新就这些了,希望大家多多支持,友善交流