1.0.1 • Published 4 years ago

antd-form-maker v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

AntdValidateTable 介绍

基于antd实现的单元格校验的table组件

安装使用

  yarn add antd-validate-table or npm i antd-validate-table

如何而来

1.由于之前中的技术栈(vue+element),封装一个 el-validate-table
2.到新公司技术栈变成react,但是大体的业务需求还是存在的
3.由于项目比较陈旧,antd3x升级antd4x存在的一定的困难,之前基于antd3x也写过一版本实现,但是antd3x的form getFieldDecorator 这里就暂不吐槽了,所以成品也出现很多bug 4.然后就有了隔离antd版本自己发包的冲动

思考

1.配置项驱动源自之前的ele版本,ele版本实现的,它都行 2.核心代码其实很少,总共的篇幅也就100多行,所以存在无限的可扩展,个人比较看好,在此不得不说一句,hooks真相 3.打包体积真的很难均衡,我好难!

将要完成的(ps:先满足自己的业务场景,哈哈哈哈)

1.antd3x和antd4x存在样式冲突,所以目前只是引入的es lib style 作为默认样式 ,所以计划是移除内置默认样式 2.单元格渲染原子表单,目前只支持的Input,Select,RadioGroup,以及非组合表单组件,custom component,未来将兼容antd更多内置表单组件 3.类型系统存在一定缺失,这里也是要慢慢完成的 包括组件内部类型完善,以及模块类型完善 4.关于打包体积,啊啊啊啊 基于antd版本的样式冲突,体积已经反弹了,这里让我不禁想起我的体重来了,体积还要减减减!💪 5.相关的api文档完善 6.最后:即使依然存在这么多要完成的,你依然可以使用,就是这么强(膨胀600斤,哈哈哈)

CODE 🌰

import React, { useSate , useRef} from 'react';
import { Input } from 'antd';

// 定义表单组件
const CustomComponent = (props)=>{
  const {value,onChange} = props
  return <>
    <Input value={value} onChange={e=>onChange(e.target.value)}></Input>
    <span>我是自定义组件</span>
  </>
}


const Demo = (props)=>{
  const validaRef = useRef()
  const [table,setTable] = useState([{a:1,b:2}])
  const columns = [
    {
      title:'a',
      dataIndex:'b',
      config:(parmas)=>({   // 通过parmas控制每个单元格渲染
        component:Input,
        rules:[
          {
            required:true,
            message:'a不能为空'
          }
        ]
      })
    },
    {
      title:'b',
      dataIndex:'b',
      config:(parmas)=>({ 
        component:CustomComponent,
        rules:[
          {
            required:true,
            message:'b不能为空'
          }
        ]
      })
    }
  ]
  // !!!  validaRef.current  存在 forminstance 外加一个formValue  可完成一系列表单交互操作
  return <AntdValidateTable ref={validaRef} dataSource={data} columns={columns} />
  
}

END

期待相关功能完善,减少crud的痛苦😖