# 表单元素通用配置
# 规则校验
<template>
<div id="app">
<RenderForm ref="form" :fields="fields" :formItemCol="12">
<template #submit>
<el-button type="primary" @click="validate">校验数据</el-button>
</template>
</RenderForm>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
{
label: "典型表单",
children: [
{
label: "活动名称",
type: "input",
key: "name",
rules: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3,
max: 5,
message: "长度在 3 到 5 个字符",
trigger: "blur",
},
],
},
{
label: "活动区域",
type: "select",
key: "region",
options: [
{
label: "区域1",
value: "beijing",
},
{
label: "区域2",
value: "shanghai",
},
],
rules: [
{
required: true,
message: "请选择活动区域",
trigger: "change",
},
],
},
{
label: "活动时间",
type: "date",
key: "date",
props: {
type: "datetime",
},
rules: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
{
label: "即时配送",
type: "switch",
key: "delivery",
defaultValue: true,
},
{
label: "活动性质",
type: "checkbox",
key: "type",
options: [
{
label: "美食/餐厅线上活动",
value: 1,
},
{
label: "地推活动",
value: 2,
},
{
label: "线下主题活动",
value: 3,
},
{
label: "单纯品牌曝光",
value: 4,
},
],
rules: [
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change",
},
],
},
{
label: "特殊资源",
key: "resource",
type: "radio",
options: [
{
label: "线上品牌商赞助",
value: 1,
},
{
label: "线下场地免费",
value: 2,
},
],
defaultValue: 1,
rules: [
{
required: true,
message: "请选择活动资源",
trigger: "change",
},
],
},
{
label: "活动形式",
key: "desc",
type: "input",
props: {
type: "textarea",
},
rules: [
{ required: true, message: "请填写活动形式", trigger: "blur" },
],
},
{
name: "submit",
type: "slot",
label: "",
nextRowFirst: true,
},
],
},
],
};
},
methods: {
validate() {
this.$refs.form.validate().then((valid) => {
console.log(valid);
});
},
},
};
</script>
Expand Copy Copy
# 默认值
<template>
<div id="app">
<RenderForm ref="form" :fields="fields"> </RenderForm>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
{
label: "基础用法",
children: [
{
label: "活动名称",
type: "input",
key: "name",
defaultValue: "默认名称",
},
{
label: "活动区域",
type: "select",
key: "region",
defaultValue: "shanghai",
options: [
{
label: "区域1",
value: "beijing",
},
{
label: "区域2",
value: "shanghai",
},
],
},
{
label: "活动时间",
type: "date",
key: "date",
defaultValue: new Date(),
props: {
type: "datetime",
},
},
{
label: "即时配送",
type: "switch",
key: "delivery",
defaultValue: true,
},
{
label: "活动性质",
type: "checkbox",
key: "type",
defaultValue: [2, 3],
options: [
{
label: "美食/餐厅线上活动",
value: 1,
},
{
label: "地推活动",
value: 2,
},
{
label: "线下主题活动",
value: 3,
},
{
label: "单纯品牌曝光",
value: 4,
},
],
},
{
label: "特殊资源",
key: "resource",
type: "radio",
options: [
{
label: "线上品牌商赞助",
value: 1,
},
{
label: "线下场地免费",
value: 2,
},
],
defaultValue: 1,
},
{
label: "活动形式",
key: "desc",
type: "input",
props: {
type: "textarea",
},
defaultValue: "默认活动形式",
},
],
},
],
};
},
};
</script>
Expand Copy Copy
# 布局设置
formItemCol：form-item占据的大小
formItemSize：表单元素占据form-item的大小
<template>
<div id="app">
<div>
formItemCol：form-item占据的大小
<el-radio-group v-model="formItemCol">
<el-radio-button :label="24">Span24</el-radio-button>
<el-radio-button :label="12">Span12</el-radio-button>
<el-radio-button :label="6">Span6</el-radio-button>
</el-radio-group>
</div>
<div>
formItemSize：表单元素占据form-item的大小
<el-radio-group v-model="formItemSize">
<el-radio-button label="80%"></el-radio-button>
<el-radio-button label="50%"></el-radio-button>
<el-radio-button label="20%"></el-radio-button>
</el-radio-group>
</div>
<RenderForm
:fields="fields"
:formItemCol="formItemCol"
:formItemSize="formItemSize"
>
<template #submit>
<el-button type="primary">提交</el-button>
</template>
</RenderForm>
</div>
</template>
<script>
export default {
data() {
return {
formItemCol: 12,
formItemSize: "80%",
fields: [
{
label: "表单布局",
children: [
{
label: "活动名称",
type: "input",
key: "name",
},
{
label: "活动区域",
type: "select",
key: "region",
options: [
{
label: "区域1",
value: "beijing",
},
{
label: "区域2",
value: "shanghai",
},
],
},
{
label: "活动时间",
type: "date",
key: "date",
props: {
type: "datetime",
},
},
{
label: "即时配送",
type: "switch",
key: "delivery",
defaultValue: true,
},
{
label: "活动性质",
type: "checkbox",
key: "type",
options: [
{
label: "美食/餐厅线上活动",
value: 1,
},
{
label: "地推活动",
value: 2,
},
{
label: "线下主题活动",
value: 3,
},
{
label: "单纯品牌曝光",
value: 4,
},
],
},
{
label: "特殊资源",
key: "resource",
type: "radio",
options: [
{
label: "线上品牌商赞助",
value: 1,
},
{
label: "线下场地免费",
value: 2,
},
],
defaultValue: 1,
},
{
label: "活动形式",
key: "desc",
type: "input",
props: {
type: "textarea",
},
span: 12,
},
{
name: "submit",
type: "slot",
label: "",
nextRowFirst: true,
},
],
},
],
};
},
};
</script>
Expand Copy Copy