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

简介: 【raETable】🎉🎉🎉大更新!大更新!绝对大更新!

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

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

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

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

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

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

🚀支持更多的内置组件

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

image.png

❓如何给组件传参

你只需要将需要的参数在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的响应式布局

image.png

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

image.png

✈书写习惯改进

改进的地方如下:

  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的,所以这里保持了一样的习惯。开发者在自定义组件时,可以保持这个习惯(非必须的)

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


相关文章
|
6月前
|
存储 算法 JavaScript
xijs更新指南(v1.2.1)
xijs更新指南(v1.2.1)
67 2
|
Swift
LTScrollView更新啦~
LTScrollView更新啦~
86 0
|
SQL
使用tkmapper更新某一列
使用tkmapper更新某一列
162 0
|
Web App开发 缓存 iOS开发
CleanMyMacX4.12.2有哪些新的功能更新
任何一部电子设备在使用多年之后都会出现性能下降的问题,苹果的Mac计算机自然也不例外。当你发现Mac运行缓慢,因为有太多文件或缓存垃圾将Mac的运行速度拖了下来。 要想提高生活和工作效率,必须对Mac进行优化,提升一下Mac 的使用性能。那么以下三种提升Mac使用性能的方法对你的帮助将会是巨大的。
123 0
更新wincvs代码
更新wincvs代码
67 0
更新wincvs代码
|
缓存 索引
ES的删除和更新,旧数据到低是如何处理的?
根据ES的读写入原理,大家都知道ES写入时每秒从内存缓冲区(memory buffer)生成小的segment,将其递交给系统缓存(OS filesystem cache)中,后台会定期的对这些小的segment 合并成一个大的segment段
376 0
ES的删除和更新,旧数据到低是如何处理的?
|
分布式计算 Hadoop 开发者
更新|学习笔记
快速学习更新。
|
分布式计算 Hadoop 开发者
更新 | 学习笔记
快速学习更新
|
IDE 开发工具 Android开发
【更新公告】pocoui更新至1.0.85版本
【更新公告】pocoui更新至1.0.85版本
598 0