use-dynamic-form-lxh v1.0.5

use-dynamic-form-lxh

Install

Using npm:

$ npm install --save  use-dynamic-form-lxh

or using yarn:

$ yarn add use-dynamic-form-lxh

使用

useDynamicForm 可以帮助我们管理表单联动。实际上就是在 SchemaForm 表单的 columns 数据上添加了 dynamic 属性，记录动态数据信息，根据信息控制表单元素的显示隐藏。

import React, { useMemo } from 'react'
import type { ProFormColumnsType } from '@ant-design/pro-form'
import { BetaSchemaForm } from '@ant-design/pro-form'
import useDynamicForm, { ProFormColumnsTypeDynamic } from 'use-dynamic-form-lxh'
import { Form } from 'antd'

const labels: ProFormColumnsType = {
  title: '标签',
  dataIndex: 'labels',
  width: 'm',
}
const createName: ProFormColumnsType = {
  title: '创建时间',
  key: 'showTime',
  dataIndex: 'createName',
  valueType: 'date',
}
const formList: ProFormColumnsType = {
  title: '列表',
  valueType: 'formList',
  dataIndex: 'list',
  initialValue: [{ state: 'all', title: '标题' }],
  columns: [
    {
      valueType: 'group',
      columns: [
        {
          title: '状态',
          dataIndex: 'state',
          valueType: 'select',
          width: 'xs',
          valueEnum,
        },
        {
          title: '标题',
          dataIndex: 'title',
          formItemProps: {
            rules: [
              {
                required: true,
                message: '此项为必填项',
              },
            ],
          },
          width: 'm',
        },
      ],
    },
  ],
}

const dynamicColumns: ProFormColumnsTypeDynamic<DataItem>[] = [
  {
    title: '切换表单',
    dataIndex: 'selectType',
    valueType: 'select',
    valueEnum,
    width: 'm',
    dynamic: {
      id: 'selectType',
      addColumns: {
        labels: [labels],
        createName: [createName],
        formList: [formList],
      },
    },
  },
]

export default () => {
  ...
  const [columns, onValuesChange] = useDynamicForm(dynamicColumns, form, initialValues);
  return (
    <BetaSchemaForm<DataItem>
      columns={columns}
      onValuesChange={onValuesChange}
      initialValues={initialValues}
      form={form}
    />
  );
};

API

dynamic

Dynamic {id, addColumns, delColumns?, children?, index?}， 存放动态数据的对象