快速上手 | v-form-antd

# 快速上手

本文默认您已经掌握 vue 和 ES2015 ，并且已经完全掌握了 Vue 的正确开发方式，如果您对以上知识点尚未了解，请到官方文档进行查阅Vue (opens new window)、阮一峰 ES6 (opens new window)

v-form-antd 是一基于 ant-design-vue 封装的一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。内置 20 种组件，支持可视化拖拽生成表单，可以自定义组件生成器，支持自定义组件生成器的配置。

# 在线演示

最简单的方式，您可以通过下面的案例进行使用组件：

(opens new window)

# 1. 安装

npm install v-form-antd
# or
yarn add v-form-antd

1
2
3

# 2. 引入

在引入v-form-antd之前，请确保您已经引入ant-design-vue，并且在引入v-form-antd之前，引入ant-design-vue以下组件：

import {
  Input,
  ConfigProvider,
  Collapse,
  Empty,
  FormModel,
  Row,
  Tabs,
  Button,
  Icon,
  Radio,
  InputNumber,
  Slider,
  Tooltip,
  Divider,
  Modal,
  Col,
  Checkbox,
  Select,
  DatePicker,
  Upload,
  Switch,
  Space,
  Popover,
  Cascader,
  Rate,
  TimePicker,
  TreeSelect
} from 'ant-design-vue'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在main.js中引入

// main.js
import Vue from 'vue'
import VFormAntd from 'v-form-antd'
import 'v-form-antd/lib/v-form-antd.css'

Vue.use(VFormAntd)

1
2
3
4
5
6

# 使用建议

v-form-antd 基于 Ant Design 组件,v-form-create 组件里面提供了方法可以调用，在使用组件之前，建议您先了解Ant Design form (opens new window)组件的 API

v-form-design →