# 基本配置
# 典型表单
包含基础组件在表单中的配置和基本的表单提交功能，点击提交按钮查看提交数据
<template>
<div id="app">
<RenderForm ref="form" :fields="fields">
<template #submit>
<el-button type="primary" @click="onSubmit">提交</el-button>
</template>
</RenderForm>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
{
label: "基础用法",
children: [
{
label: "活动名称",
type: "input",
key: "name",
},
{
label: "活动区域",
type: "normal-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",
},
},
{
name: "submit",
type: "slot",
label: "",
nextRowFirst: true,
},
],
},
],
};
},
methods: {
onSubmit() {
this.$alert(JSON.stringify(this.$refs.form.getData(), null, 2));
},
},
};
</script>
Expand Copy Copy
# 布局配置
我们可以通过设置表单的全局属性设置整体的表单布局，也可以通过单独为元素设置布局宽度，在特殊需求下，还支持表单元素特殊的换行设置。
通过formItemCol可以设置元素的默认宽度，为元素单独设置span可以覆盖默认的元素宽度设置。nextRowFirst设置当前元素为第一个元素，currentRowLast设置当前元素为最后一个元素。
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
# 表单分块
我们可以通过表单分块的功能将表单按一定规律拆分为多个模块，方便用户输入信息。
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Block",
data() {
return {
fields: [
{
label: "Block 01",
children: [
{
label: "元素01",
key: "elem01",
},
],
},
{
label: "Block 02",
children: [
{
label: "元素02",
key: "elem02",
},
],
},
{
label: "Block 03",
children: [
{
label: "元素03",
key: "elem03",
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 表单边框
通过设置borderForm可以控制表单模块是否展示边框
<template>
<RenderForm :fields="fields" :borderForm="false"></RenderForm>
</template>
<script>
export default {
name: "Border",
data() {
return {
fields: [
{
label: "Block 01",
children: [
{
label: "元素01",
key: "elem01",
},
],
},
{
label: "Block 02",
children: [
{
label: "元素02",
key: "elem02",
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 展开收起
通过设置showFoldBtn属性为true，我们可以显示每个表单模块的展开/收起按钮，另外也可以调用内部方法foldAllBlock，一次性展开/收起所有模块。
<template>
<div>
<RenderForm ref="form" :fields="fields" showFoldBtn></RenderForm>
<el-button type="primary" @click="onToggle">展开/收起</el-button>
</div>
</template>
<script>
export default {
name: "Expand",
data() {
return {
fields: [
{
label: "Block 01",
children: [
{
label: "元素01",
key: "elem01",
},
],
},
{
label: "Block 02",
children: [
{
label: "元素02",
key: "elem02",
},
],
},
],
};
},
methods: {
onToggle() {
this.$refs.form.foldAllBlock();
},
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 浏览模式
render-form内置两种浏览模式：normal和single；normal是默认的浏览模式，single将表单模块拆分为不同的tab切换显示。single模式下，展开收起按钮不会显示。
<template>
<div>
<el-radio-group v-model="scanType">
<el-radio-button label="single">Tab模式</el-radio-button>
<el-radio-button label="normal">普通模式</el-radio-button>
</el-radio-group>
<br />
<RenderForm
ref="form"
:fields="fields"
showFoldBtn
:scanType="scanType"
></RenderForm>
</div>
</template>
<script>
export default {
name: "ScanType",
data() {
return {
scanType: "single",
fields: [
{
label: "Block 01",
children: [
{
label: "元素01",
key: "elem01",
},
],
},
{
label: "Block 02",
children: [
{
label: "元素02",
key: "elem02",
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
← render-form 表单元素通用配置 →