-
封装自定义
select
组件：
-
一定要在 props 中绑定 value 和 onChange，不然表单提交的时候获取不到值
import React, { useState, } from 'react';
import { Select } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
export default function ({value = [], onChange}) {
const [tableOptions, setTableOptions] = useState<any>([]);
const [tableValues, setTableValue] = useState<any>(value);
const handleChange = (values: any, options) => {
console.log(`参数: `, values, options);
setTableOptions(
...options,
label: (
<HomeOutlined />
{values.at(-1)}
</span>
value: values.at(-1),
].filter((item) => item?.value),
setTableValue(values);
onChange(values)
return (
<Select
mode="tags"
style={{ width: '100%' }}
placeholder="多个名称用英文逗号(,)连接"
onChange={handleChange}
options={tableOptions}
value={tableValues}
tokenSeparators={[',']}
import React, { useMemo } from 'react';
import { FormItem } from '@formily/antd';
import TableSelect from './TableSelect'
export default function(){
const form = useMemo(()=>createForm(),[])
return (
<FormProvider form={form}>
<Field
name={['name']}
title="名称"
decorator={[FormItem]}
component={[TableSelect]}
</FormProvider>
在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
yarn build
构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
有关更多信息，请参见关于的部分。
yarn eject
注意：这是单向操作。 eject ，您将无法返回！
如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
相反，它将所有配置文件和传递依赖项（webpa
文档：https://formilyjs.org/zh-CN/guide
思维导图：https://github.com/li9269391/formily-xmind
core文档：https://core.formilyjs.org/zh-CN/api/entry/create-form
首先用create-react-app开个项目
安装antd moment @formily/antd
导入样式：
@import 'antd/dist/antd.min.css';
@impo
Formily 提供3种模式开发
JSON SchemaForm | JSX SchemaForm | JSX
其中推荐使用 JSX SchemaForm 的模式开始学习，一是因为其可以满足绝大多数的应用场景（个别布局适配效果较差），二是便于向·JSON SchemaForm （更适用于后台传值替换）转换
看完设计理念和属性、生命周期等概念介绍后，对整个“轮子”的使用还是不能完全掌握（学习成本较高），为了更好的学习，以及体验更爽的表单设计，需要把整个实践教程码一
Formily提供了的能力，因此我们可以实现通过一份JSON SCHEMA渲染出一个表单。
这份SCHEMA可以通过开发者手写，但是更多的时候需要开放给非技术人员通过配置的方式生成。
因此，Formily-Schema-Editor出现了，它帮助不熟悉具体技术细节的用户生产SCHEMA，进而可以自己设计属于他们的表单。
import { SchemaEditor } from "@formily-editor/schema-editor";
import extensions from "@formily-editor/extensions";
const renderToolbar = (context) => {
// 定制你的导航
const demo = () => {
ProWhaleUI
ProWhaleUI是基于ElementUI而开发的一套高阶组件(ProComponent)，用于后台场景中快速搭建CRUD页面，提供了更高级别的抽象，开箱即用，同时不失灵活性，期望可以满足绝大多数业务需求。
Install
npm install --save pro-whale-ui
Usage
完整引入 ProWhaleUI
import Vue from 'vue'
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import ProWhaleUI from "pro-whale-ui";
import "pro-whale-ui/whale-ui.css";
import App from './App.vue';
Vue.use(Eleme
GrapesJS表格
该插件添加了一些基本的表单组件和块，有助于更轻松地处理表单
可用组件： form input textarea select option checkbox radio button label
blocks默认添加的块： ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'] （全部）
CDN https://unpkg.com/grapesjs-plugin-forms
NPM npm i grapesjs-plugin-forms
git clone https://github.com/artf/grapesjs-plugin-forms.git
直接在浏览器中
< link href =" path/to/grapes.mi
