8lab_crudformmodal 中文文档教程

Question

CURDFormModal

基于ant design Form 封装的可灵活配置Item列

使用方法

const formModalColumns = [
  {
    title: '名字',
    label: '名字',
    rules: [{ required: true, message: '请输入名字' }],
    itemType: 'select',
    name: 'name',
    initialValue: 'name',
    dataSource: [
      {
        value: 'name',
        label: '名字',
      },
      {
        value: 'age',
        label: '年龄',
      },
    ],
  },
  {
    title: '排序',
    columns: [
      {
        title: '测试',
        label: '测试',
        placeholder: '请输入测试',
        itemType: 'radio',
        name: 'callNo',
        initialValue: '1',
        dataSource: [
          { label: '1', value: '1' },
          { label: '2', value: '2' },
          { label: '3', value: '3' },
        ],
      },
      {
        title: '状态',
        label: '状态',
        placeholder: '请输入状态',
        itemType: 'switch',
        valuePropName: 'checked',
        initialValue: true,
        name: 'status',
      },
    ],
  },
  {
    title: '测试22',
    label: '测试22',
    placeholder: '请输入测试22',
    rules: [{ required: true, message: '请输入Vlan别名' }],
    itemType: 'textArea',
    name: 'updatedAt',
  },
];

    <CURDFromModal
      formModalColumns={formModalColumns}
      initialValues={{}}
      onSubmitFinish={(value) => {
        console.log(value);
        value.isEdit?setUpdata(value?.values):setAdd(value?.values)
      }}
      loading={loading}
      onModalVisible={(value) => setIsModalVisible(value)}
    />