# VCreateForm

**Repository Path**: chengyehua/vcreate-form

## Basic Information

- **Project Name**: VCreateForm
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-18
- **Last Updated**: 2025-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @formCreate/antV v1.0.16

## Installation

Using npm:

```shell
$ npm i --save cheng-create-form-antv
$ npm i -g pnpm
$ pnpm i --save cheng-create-form-antv
```

Usage:

```ts
import { createApp } from "vue";
import App from "./App.vue";
import CreateFormAntV from "cheng-create-form-antv";

const app = createApp(App);
app.use(CreateFormAntV);
```

Page:

```ts
<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { type Fields, type IFormApi } from 'cheng-create-form-antv/types/packages';

const mockList = [
  {
    label: 'root 1',
    value: 'root 1',
    oneLevelName: '玉米',
    children: [
      {
        label: 'parent 1',
        value: 'parent 1',
        oneLevelName: '大米',
        children: [
          {
            label: 'parent 1-0',
            value: 'parent 1-0',
            oneLevelName: '红豆',
            children: [
              {
                label: 'my leaf',
                value: 'leaf1',
                oneLevelName: '绿豆'
              },
              {
                label: 'your leaf',
                value: 'leaf2',
                oneLevelName: '绿豆sadsa'
              },
            ],
          },
          {
            label: 'parent 1-1',
            value: 'parent 1-1',
            oneLevelName: '红sdad豆',
          },
        ],
      },
      {
        label: 'parent 2',
        value: 'parent 2',
      },
    ],
  },
]

const fields = ref<Fields[]>([
  {
    label: '变更单号',
    key: 'orderNumber',
    el: 'a-select',
    props: {
      placeholder: '请输入变更单号',
      options: [
        {
          label: '是',
          value: 1,
          oneLevelName: '玉米'
        },
        {
          label: '否',
          value: 0,
          oneLevelName: '小麦'
        }
      ],
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    },
    rules: [
      {
        required: true,
        message: '请输入变更单号',
        trigger: 'change'
      }
    ],
  },
  {
    label: '是否提交',
    key: 'documentStatus',
    el: 'a-select',
    props: {
      placeholder: '请选择是否提交',
      options: [],
    },
    rules: [
      {
        required: true,
        message: '请选择是否提交',
        trigger: 'change'
      }
    ],
  },
  {
    el: 'a-input',
    key: 'remark',
    label: '备注',
    rules: [
      {
        required: true,
        message: '请输入备注',
        trigger: 'change'
      }
    ],
  },
  {
    el: 'a-tree-select',
    key: 'departId',
    label: '部门',
    props: {
      treeData: mockList,
    },
  },
  {
    el: 'a-input',
    key: 'huanjing',
    label: '环境状况',
    props: {
    }
  },
  {
    el: 'a-input',
    key: 'shidu',
    label: '湿度',
    rules: [
      {
        required: true,
        message: '请输入湿度',
        trigger: 'change'
      }
    ],
  },
])
const formApi = ref()
const submitTest = () => {
  formApi.value?.validate().then((res) => {
    console.log(res, 'res');
  }).catch(() => { })
}

const clear = () => {
  formApi.value?.resetFormFields()
}

</script>

<template>
    <MForm v-model:api="formApi" :fields="fields" formId="search-form"></MForm>
    <a-button @click="submitTest">提交</a-button>
    <a-button @click="clear">清除</a-button>
</template>

<style>
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0
}
</style>
```

## API

### CreateFormAntV

#### Form Props

| Name       | Type    | Default | Description                                         |
| ---------- | ------- | ------- | --------------------------------------------------- |
| formConfig | Object  | -       | 表单配置项                                          |
| fields     | Array   | -       | 表单项配置                                          |
| formId     | String  | -       | 表单 id                                             |
| search     | Boolean | -       | 是否为搜索，如果为 true时，formConfig:{layout:"inline"}。 |

#### formConfig

| Name                 | Type    | Default    | Description                             |
| -------------------- | ------- | ---------- | --------------------------------------- |
| colon                | Boolean | true       | 是否显示 label 后面的冒号               |
| disabled             | Boolean | false      | 是否禁用表单                            |
| hideRequiredMark     | Boolean | false      | 是否隐藏必填标记                        |
| labelAlign           | String  | left       | label 对齐方式                          |
| labelCol             | Object  | -          | label 布局                              |
| labelWrap            | Boolean | false      | label 是否换行                          |
| layout               | String  | horizontal | 表单布局                                |
| model                | Object  | -          | 表单数据                                |
| name                 | String  | -          | 表单名称                                |
| noStyle              | Boolean | false      | 是否隐藏样式                            |
| rules                | Object  | -          | 表单校验规则                            |
| scrollToFirstError   | Object  | -          | 首次校验失败时滚动到第一个错误字段      |
| validateOnRuleChange | Boolean | true       | 当 rules 属性发生变化时是否触发表单校验 |
| validateTrigger      | String  | blur       | 校验触发时机                            |
| wrapperCol           | Object  | -          | wrapper 布局                            |

#### fields

| Name          | Type     | Default | Description          |
| ------------- | -------- | ------- | -------------------- |
| el            | String   | -       | 表单项类型           |
| key           | String   | -       | 表单项 key           |
| label         | String   | -       | 表单项 label         |
| props         | Object   | -       | 表单项 props         |
| col           | Object   | -       | 表单项布局           |
| formItemProps | Object   | -       | 表单项 formItemProps |
| rules         | Array    | -       | 表单项校验规则       |
| slot          | Boolean  | false   | 是否使用插槽         |
| hidden        | Boolean  | false   | 是否隐藏             |
| emit          | Array    | -       | 表单项事件           |
| customRender  | Function | -       | 自定义渲染           |
| on            | Object   | -       | 表单项事件           |
| renderSlots   | Object   | -       | 表单项插槽           |
| defaultValue  | any      | -       | 表单项默认值         |
| readonlyProps | Object   | -       | 表单项只读属性       |

#### layout 配置：参考 Ant Design Vue Form API

## License

MIT