Vue form-create的基本使用 和 后端返回动态表单组件_formcreate获取表单数据

<template>
  <section>
    <br />
    <el-row>
      <el-button type="primary" @click="ajaxSetDataFn"
        >Ajax请求初始化表单</el-button
      >
      <el-button type="danger" @click="getFormModelFn"
        >获取表单Model对象</el-button
      >
    </el-row>
    <br />
    <form-create v-model="fApi" :rule="rule" :option="option"></form-create>
 
    <br />
    <!-- 自定义 确定和取消按钮 -->
    <div class="bottomButton">
      <el-button @click="submitButton" type="primary">自定义的确定</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      // 实例对象
      fApi: {},
      // 表单生成规则数组对象  生成规则：http://www.form-create.com/v2/guide/rule.html
      // 生成规则数组中一个对象就是一个表单项（是一个json对象），在里面可以对应的表单名称、类型、属性、值、样式、类名、是否必填、错误提示等。
      rule: [
        {
          type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
          field: "userName", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
          className: "user-name-dom", // 设置组件的class属性
          title: "用户名称：", // 组件的名称, 选填
          value: "", // 表单组件的字段值(就是表单的value值),自定义组件可以不用设置
          props: {
            placeholder: "请输入用户名称！",
            disabled: false,
            readonly: false,
            clearable: true, // 是否显示清空按钮
          },
          validate: [
            {
              trigger: "blur",
              required: true,
              message: "用户名称不能为空！",
            },
          ],
          col: {
            md: { span: 12 }, // 支持每列布局
          },
        },
 
        {
          type: "input",
          field: "password",
          title: "用户密码：",
          value: "666",
          props: {
            // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！
            // text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
            // button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
            // checkbox	定义复选框。
            // color	定义拾色器。
            // date	定义日期字段（带有 calendar 控件）
            // datetime	定义日期字段（带有 calendar 和 time 控件）
            // datetime-local	定义日期字段（带有 calendar 和 time 控件）
            // month	定义日期字段的月（带有 calendar 控件）
            // week	定义日期字段的周（带有 calendar 控件）
            // time	定义日期字段的时、分、秒（带有 time 控件）
            // email	定义用于 e-mail 地址的文本字段
            // file	定义输入字段和 "浏览..." 按钮，供文件上传
            // hidden	定义隐藏输入字段
            // image	定义图像作为提交按钮
            // number	定义带有 spinner 控件的数字字段
            // password	定义密码字段。字段中的字符会被遮蔽。
            // radio	定义单选按钮。
            // range	定义带有 slider 控件的数字字段。
            // reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
            // search	定义用于搜索的文本字段。
            // submit	定义提交按钮。提交按钮向服务器发送数据。
            // tel	定义用于电话号码的文本字段。
            // url	定义用于 URL 的文本字段。
 
            //  type: "password",
            placeholder: "请输入用户密码！",
          },
          validate: [
            {
              trigger: "blur",
              required: true,
              message: "用户密码不能为空！",
            },
          ],
          col: {
            md: { span: 12 },
          },
        },
 
        {
          type: "input",
          field: "summary",
          title: "个人简介：",
          value: "",
          props: {
            type: "textarea",
            rows: 3,
            placeholder: "请输入个人简介！",
          },
        },
        {
          type: "DatePicker", // 日期选择器
          field: "date",
          title: "活动日期",
          // value: [],
          props: {
            type: "date",
            format: "yyyy-MM-dd",
            placeholder: "请选择活动日期",
          },
        },
 
        {
          type: "radio",
          field: "sex",
          title: "性 别：",
          value: 0,
          options: [
            { label: "先 生", value: 1 },
            { label: "女 士", value: 2 },
            { label: "人 妖", value: 3, disabled: true },
            { label: "未 知", value: 0 },
          ],
        },
 
        {
          type: "checkbox",
          field: "hobby",
          title: "爱 好：",
          value: [1, 3],
          options: [
            { label: "吃喝", value: 1 },
            { label: "上班", value: 2, disabled: true },
            { label: "旅游", value: 3 },
            { label: "运动", value: 4 },
            { label: "学习", value: 5, disabled: true },
          ],
        },
 
        {
          type: "select",
          field: "address",
          title: "想去哪里：",
          value: 6,
          col: {
            //  sx: {span: 24},
            md: { span: 10 },
          },
          options: [
            { label: "内国走走", value: 1 },
            { label: "呆在公司", value: 2, disabled: true },
            { label: "非洲美洲", value: 3 },
            { label: "港澳台游", value: 4 },
            { label: "东南亚游", value: 5 },
            { label: "澳洲旅游", value: 6 },
            { label: "自驾游", value: 7 },
          ],
        },
 
        {
          type: "select",
          field: "address2",
          title: "想多选点：",
          value: [3, 5],
          col: {
            md: { span: 14 },
          },
          props: {
            multiple: true,
            placement: "bottom",
          },
          options: [
            { label: "内国走走", value: 1 },
            { label: "呆在公司", value: 2, disabled: true },
            { label: "非洲美洲", value: 3 },
            { label: "港澳台游", value: 4 },
            { label: "东南亚游", value: 5 },
            { label: "澳洲旅游", value: 6 },
            { label: "自驾游", value: 7 },
          ],
        },
      ],
 
      // 组件参数配置
      option: {
        // 显示重置表单按扭
        resetBtn: false,
        // 表单提交按扭事件
        submitBtn: {
          show: false,
          // 按钮内容
          innerText: "保存",
        },
        onSubmit: (formData) => {
          alert(JSON.stringify(formData));
          console.log("获取表单中的数据：", formData);
 
          //按钮进入提交状态
          //   this.fApi.btn.loading();
 
          //重置按钮禁用
          //   this.fApi.resetBtn.disabled();
 
          //按钮进入可点击状态
          //   this.fApi.btn.finish();
        },
      },
    };
  },
  methods: {
    // 提交
    submitButton() {
      this.fApi.submit((formData, fApi) => {
        alert(JSON.stringify(formData));
        console.log(formData, "999参数啊");
      });
    },
    // 重置
    reset() {
      this.fApi.resetFields();
    },
    // 设置表单数据
    ajaxSetDataFn() {
      this.fApi.setValue({
        userName: "沐枫",
        password: "123456",
        summary: "我是请后端返回来的个人简介",
        sex: 1,
        hobby: [3, 4],
        address: 5,
        address2: [1, 4, 7],
        volume: 35,
        jiajie: 56,
        color: "#000DFF",
        date: "2020-02-01",
        rateNumber: 4,
        offon: false,
      });
    },
 
    //获取Form表单 model对象
    getFormModelFn() {
      console.log("Form表单 model对象：", this.fApi.model());
    },
 
    getUserNameChange(e) {
      this.$nextTick(() => {
        this.rule[2].value = this.rule[0].value;
      });
      console.log(this.fApi.getValue("userName"));
    },
  },
};
</script>
<style lang="scss">
.bottomButton {
  display: flex;
  justify-content: center; // flex-end
  align-items: center;
}
</style>

1 npm i @form-create/element-ui

2 在main.js 里面加入

// 引入form-create 表单生成器

import formCreate from "@form-create/element-ui"

Vue.use(formCreate);

代码如下

<div>

   <section>

    <h1>组件模式：使用&lt;form-create>&lt;/form-create> 或 &lt;FormCreate /> 标签来创建（生成）表单</h1>

    <br />

    <a href="http://www.form-create.com/v2/guide/rule.html" target="_blank">表单 rule[] 生成规则</a>

    <br />

    <br />

    <el-row>

      <el-button type="primary" @click="ajaxSetDataFn" icon="el-icon-edit">Ajax请求初始化表单</el-button>

      <el-button type="danger" @click="getFormModelFn" icon="el-icon-s-promotion">获取表单Model对象</el-button>

    </el-row>

    <br />

    <h3>使用&lt;form-create>&lt;/form-create>标签来创建（生成）表单：</h3>

    <form-create v-model="fApi" :rule="rule" :option="option"></form-create>

    <br />

  <!-- 自定义 确定和取消按钮 -->

  <el-row class="bottomButton">

    <el-col>

      <el-button @click="submitButton" type="primary">自定义确定</el-button>

    <el-button @click="reset">自定义重置</el-button>

    </el-col>

  </el-row>

   

  </section>

</div>

data里面

data() {

    return {

            // 实例对象

            fApi: {},

 // 表单生成规则数组对象  生成规则：http://www.form-create.com/v2/guide/rule.html

 // 生成规则数组中一个对象就是一个表单项（是一个json对象），在里面可以对应的表单名称、类型、属性、值、样式、类名、是否必填、错误提示等。

 rule: [

   {

     type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)

     field: "userName", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置

     className: "user-name-dom", // 设置组件的class属性

     title: "用户名称：", // 组件的名称, 选填

     value: "", // 表单组件的字段值(就是表单的value值),自定义组件可以不用设置

     props: {

       placeholder: "请输入用户名称！",

       disabled: false,

       readonly: false,

       clearable: true // 是否显示清空按钮

     },

     validate: [

       {

         trigger: "blur",

         required: true,

         message: "用户名称不能为空！"

       }

     ],

     col: {

       md: { span: 12 } // 支持每列布局

     }

   },

   {

     type: "input",

     field: "password",

     title: "用户密码：",

     value: "666",

     props: {

       // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！

       // text  默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

       // button  定义可点击的按钮（大多与 JavaScript 使用来启动脚本）

       // checkbox  定义复选框。

       // color 定义拾色器。

       // date  定义日期字段（带有 calendar 控件）

       // datetime  定义日期字段（带有 calendar 和 time 控件）

       // datetime-local  定义日期字段（带有 calendar 和 time 控件）

       // month 定义日期字段的月（带有 calendar 控件）

       // week  定义日期字段的周（带有 calendar 控件）

       // time  定义日期字段的时、分、秒（带有 time 控件）

       // email 定义用于 e-mail 地址的文本字段

       // file  定义输入字段和 "浏览..." 按钮，供文件上传

       // hidden  定义隐藏输入字段

       // image 定义图像作为提交按钮

       // number  定义带有 spinner 控件的数字字段

       // password  定义密码字段。字段中的字符会被遮蔽。

       // radio 定义单选按钮。

       // range 定义带有 slider 控件的数字字段。

       // reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。

       // search  定义用于搜索的文本字段。

       // submit  定义提交按钮。提交按钮向服务器发送数据。

       // tel 定义用于电话号码的文本字段。

       // url 定义用于 URL 的文本字段。

       type: "password",

       placeholder: "请输入用户密码！"

     },

     col: {

       md: { span: 12 }

     }

   },

   {

     type: "input",

     field: "summary",

     title: "个人简介：",

     value: "",

     props: {

       type: "textarea",

       rows: 3,

       placeholder: "请输入个人简介！"

     }

   },

   {

    type: "DatePicker", // 日期选择器

    field: "section_day",

    title: "活动日期",

    // value: [],

    props: {

        type: "date",

        format: "yyyy-MM-dd",

        placeholder:"请选择活动日期",

    }

},

   {

     type: "radio",

     field: "sex",

     title: "性 别：",

     value: 0,

     options: [

       { label: "先 生", value: 1 },

       { label: "女 士", value: 2 },

       { label: "人 妖", value: 3, disabled: true },

       { label: "未 知", value: 0 }

     ]

   },

   {

     type: "checkbox",

     field: "hobby",

     title: "爱 好：",

     value: [1, 3],

     options: [

       { label: "吃喝", value: 1 },

       { label: "上班", value: 2, disabled: true },

       { label: "旅游", value: 3 },

       { label: "运动", value: 4 },

       { label: "学习", value: 5, disabled: true }

     ]

   },

   {

     type: "select",

     field: "address",

     title: "想去哪里：",

     value: 6,

     col: {

        //  sx: {span: 24},

       md: { span: 10 }

     },

     options: [

       { label: "内国走走", value: 1 },

       { label: "呆在公司", value: 2, disabled: true },

       { label: "非洲美洲", value: 3 },

       { label: "港澳台游", value: 4 },

       { label: "东南亚游", value: 5 },

       { label: "澳洲旅游", value: 6 },

       { label: "自驾游", value: 7 }

     ]

   },

   {

     type: "select",

     field: "address2",

     title: "想多选点：",

     value: [3, 5],

     col: {

       md: { span: 14 }

     },

     props: {

       multiple: true,

       placement: "bottom"

     },

     options: [

       { label: "内国走走", value: 1 },

       { label: "呆在公司", value: 2, disabled: true },

       { label: "非洲美洲", value: 3 },

       { label: "港澳台游", value: 4 },

       { label: "东南亚游", value: 5 },

       { label: "澳洲旅游", value: 6 },

       { label: "自驾游", value: 7 }

     ]

   }

 ],

 // 组件参数配置

 option: {

   // 显示重置表单按扭

   resetBtn: false,

   // 表单提交按扭事件

   submitBtn: {

    show:false,

    // 按钮内容

     innerText: "保存",

   },

   onSubmit: formData => {

     alert(JSON.stringify(formData));

     console.log("获取表单中的数据：", formData);

     //按钮进入提交状态

     //   this.fApi.btn.loading();

     //重置按钮禁用

     //   this.fApi.resetBtn.disabled();

     //按钮进入可点击状态

     //   this.fApi.btn.finish();

   }

 },

}

}

1. methods 方法里面

 methods: {

      // 提交

      submitButton(){

        this.fApi.submit((formData, fApi)=>{

          alert(JSON.stringify(formData))

          console.log(formData, '999参数啊')

        })

      },

      // 重置

      reset(){

        this.fApi.resetFields()

      },

      // 设置表单数据

      ajaxSetDataFn() {

      this.fApi.setValue({

        userName: "沐枫",

        password: "123456",

        summary: "我是请后端返回来的个人简介",

        sex: 1,

        hobby: [3, 4],

        address: 5,

        address2: [1, 4, 7],

        volume: 35,

        jiajie: 56,

        color: "#000DFF",

        dateTime: ["2020-02-01", "2020-02-30"],

        rateNumber: 4,

        offon: false,

        imgFile: [

          "https://inews.gtimg.com/newsapp_ls/0/11673675668_295195/0",

          "https://inews.gtimg.com/newsapp_ls/0/11673508745_295195/0"

        ]

      });

    },

    //获取Form表单 model对象

    getFormModelFn() {

      console.log("Form表单 model对象：", this.fApi.model());

    },

    getUserNameChange(e) {

      this.$nextTick(() => {

        this.rule[2].value = this.rule[0].value;

      });

      console.log(this.fApi.getValue("userName"));

    },

}