# 基础组件
# 多选框
配置多选框组件
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Checkbox",
data() {
return {
fields: [
{
label: "多选框",
children: [
{
label: "多选框",
type: "checkbox",
key: "key1",
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "设置默认值",
type: "checkbox",
key: "key2",
defaultValue: [2],
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "禁用选项",
type: "checkbox",
key: "key3",
options: [
{
value: 1,
label: "选项1",
disabled: true,
},
{
value: 2,
label: "选项2",
},
],
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 单选框
配置单选框组件
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Checkbox",
data() {
return {
fields: [
{
label: "单选框",
children: [
{
label: "单选框",
type: "radio",
key: "key1",
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "设置默认值",
type: "radio",
key: "key2",
defaultValue: 2,
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "禁用选项",
type: "radio",
key: "key3",
options: [
{
value: 1,
label: "选项1",
disabled: true,
},
{
value: 2,
label: "选项2",
},
],
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 开关
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Switch",
data() {
return {
fields: [
{
label: "开关",
children: [
{
label: "开关",
key: "key1",
type: "switch",
},
{
label: "默认值",
key: "key2",
type: "switch",
defaultValue: true,
},
{
label: "文字描述",
key: "key3",
type: "switch",
"active-text": "按月付费",
"inactive-text": "按年付费",
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 文本输入框
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Input",
data() {
return {
fields: [
{
label: "输入框",
children: [
{
label: "输入框",
key: "key1",
},
{
label: "Textarea",
key: "key2",
props: {
type: "textarea",
},
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 选择框
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Checkbox",
data() {
return {
fields: [
{
label: "选择框",
children: [
{
label: "选择框",
type: "select",
key: "key1",
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "设置默认值",
type: "select",
key: "key2",
defaultValue: 2,
options: [
{
value: 1,
label: "选项1",
},
{
value: 2,
label: "选项2",
},
],
},
{
label: "禁用选项",
type: "select",
key: "key3",
options: [
{
value: 1,
label: "选项1",
disabled: true,
},
{
value: 2,
label: "选项2",
},
],
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy
# 日期
<template>
<RenderForm :fields="fields"></RenderForm>
</template>
<script>
export default {
name: "Date",
data() {
return {
fields: [
{
label: "日期组件",
children: [
{
type: "date",
key: "key1",
label: "日期",
},
{
type: "date",
key: "key2",
label: "日期范围",
props: {
type: "daterange",
},
},
{
type: "date",
key: "key3",
label: "日期时间",
props: {
type: "datetime",
},
},
{
type: "date",
key: "key4",
label: "日期时间范围",
props: {
type: "datetimerange",
},
},
],
},
],
};
},
};
</script>
<style lang="css" scoped></style>
Expand Copy Copy