vue中使用form-create实现动态表单_form-create-designer

---

前言

项目中需要实现动态生成表单，经过调研，决定使用form-create插件来实现，非常简单，带大家了解一下

---

一、form-create是什么？

form-create是一个通过JSON生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持element-ui、iview、ant-design3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

二、使用步骤

1.引入库

这里我选择element-ui作为UI框架
安装form-create插件

npm i @form-create/element-ui
1

main.js中全局引入

// 引入form-create 表单生成器
import formCreate from "@form-create/element-ui"

Vue.use(formCreate);

1
2
3
4
5
6

2.组件中使用

<template>
  <form-create
    v-model="fApi"
    :rule="rule"
    :option="option"
    :value.sync="value"
  ></form-create>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      //表单数据
      value: {},
      //表单生成规则
      rule: [
        {
          type: "input",
          field: "goods_name",
          title: "商品名称",
        },
        {
          type: "radio",
          title: "是否包邮",
          field: "is_postage",
          value: "0",
          options: [
            { value: "0", label: "不包邮", disabled: false },
            { value: "1", label: "包邮", disabled: true },
          ],
        },
        {
          type: "select",
          field: "cate_id",
          title: "产品分类",
          value: "104",
          options: [
            { value: "104", label: "生态蔬菜", disabled: false },
            { value: "105", label: "新鲜水果", disabled: false },
          ],
        },
      ],
      //组件参数配置
      option: {
        //表单提交事件
        onSubmit: function (formData) {
          alert(JSON.stringify(formData));
        },
      },
    };
  },
};
</script>

<style>
</style>
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

3.页面效果

三、总结

总的来说，form-create还是非常好用的，大家可以配合form-create-designer表单设计器一起来使用。