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

爱心觉罗晓宇

已于 2023-06-01 16:47:09 修改

阅读量1k

点赞数

文章标签： vue.js javascript 前端

于 2023-05-31 14:34:29 首次发布

本文链接：https://blog.csdn.net/qq_44716001/article/details/130968272

版权

<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>

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

<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>使用<form-create></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();

}

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"));

}

爱心觉罗晓宇

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue form-create的基本使用和后端返回动态表单组件

表单 rule[] 生成规则
复制链接

扫一扫

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

“相关推荐”对你有帮助么？

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