<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>组件模式：使用<form-create></form-create> 或 <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>使用<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();
}
},
}
}
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"));
},
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
