使用：import DynamicForm from "public-element-ui" 、、、
import 'public-element-ui/public-element-ui.css' 、、、
Vue.use(DynamicForm) 、、、
<DynamicForm
:classStyle="true"
ref="formSearch"
:formItems="formItems"
:data="formData"
labelWidth="100px"
:buttonObj="buttonObj"
@submit="handleSubmit"
@reset="handleReset"
@change="handleChange"
>
<template #imgFileList>
<Upload
@childFile="getFile"
listType="picture-card"
limitType="jpg,jpeg,png"
acceptType=".jpg,.jpeg,.png"
:isDisabled="false"
:fileLimit="2"
:limitSize="1"
/>
</template>
</DynamicForm>
所支持动态生成的表单项 对应的component就是elementUI的组件名称 props对应相应组件的Api.upload组件特殊处理 、、、
const elementUI = {
input: {
component: "el-input",
props: {
placeholder: "请输入",
clearable: true,
},
},
inputNumber: {
component: "el-input-number",
props: {
placeholder: "请输入",
},
},
textArea: {
component: "el-input",
props: {
type: "textarea",
placeholder: "请输入",
clearable: true,
rows: 6,
"show-word-limit": true,
},
},
cascader: {
component: "el-cascader",
props: {
placeholder: "请输入",
},
},
radioGroup: {
component: "el-radio-group",
props: {},
},
checkBoxGroup: {
component: "el-checkbox-group",
props: {},
},
select: {
component: "el-select",
props: {
style: { width: "100%" },
placeholder: "请选择",
filterable: true,
clearable: true,
},
},
switch: {
component: "el-switch",
props: {},
},
timeSelect: {
component: "el-time-select",
props: { placeholder: "选择时间" },
},
timeRangePicker: {
component: "el-time-picker",
props: {
style: { width: "100%" },
"range-separator": "至",
"start-placeholder": "开始时间",
"end-placeholder": "结束时间",
"is-range": true,
},
},
datePicker: {
component: "el-date-picker",
props: {
style: { width: "100%" },
type: "date",
placeholder: "选择日期",
},
},
dateTimePicker: {
component: "el-date-picker",
props: {
style: { width: "100%" },
type: "datetime",
placeholder: "选择日期时间",
},
},
dateRangePicker: {
component: "el-date-picker",
props: {
style: { width: "100%" },
type: "daterange",
"range-separator": "至",
"start-placeholder": "开始时间",
"end-placeholder": "结束时间",
},
},
InputRange: {
component: "input-range",
props: {
style: { width: "100%" },
type: "input-range",
"range-separator": "至",
"min-placeholder": "请输入",
"max-placeholder": "请输入",
},
},
};
formItems表单配置项 data表单绑定默认值 labelWidth表单title所占宽度 buttonObj按钮组对象 submit提交的回调 reset重置的回调 、、、
formItems配置项 、、、
type对应动态表单的对象名；label表单的title；prop表单的绑定值；component对应elementUI组件名称；props对应组件的API；span所占col的比例，可根据修改值来达到占位的目的；rules表单校验规则；relevanceProp、relevanceNoShow关联字段显示隐藏，relevanceProp值为关联的表单组件的绑定值，需要在关联的表单组件上添加relevanceNoShow:true，handleChange为控制表单显示或隐藏事件，也可以控制其他控件的值 、、、
handleSubmit() {
this.$refs.formSearch.validate().then((res) => {
if (res) {
}
})
},
handleReset() {
this.$refs.formSearch.resetFields()
},
handleChange(params, type, props) {
},
const formItems=[
{
type: "input",
label: "菜单名称",
prop: "menuName",
component: "el-input",
props: { placeholder: "请输入菜单名称" },
span: 8,
rules: [formRuleFunc("请输入菜单名称")],
},
{
type: "select",
label: "菜单名称",
prop: "menuName1",
component: "el-select",
relevanceProp: "routeAddress1",
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
],
span: 8,
},
{
type: "datePicker",
label: "路由地址",
prop: "routeAddress1",
component: "el-date-picker",
span: 8,
relevanceNoShow: true,
},
{
type: "dateTimePicker",
label: "路由地址",
prop: "routeAddress2",
component: "el-date-picker",
span: 8,
},
{
type: "dateRangePicker",
label: "路由地址",
prop: "routeAddress3",
component: "el-date-picker",
span: 8,
},
{
label: "icon：",
prop: "imgFileList",
slot: "imgFileList",
span: 24,
component: "el-upload",
rules: [formRuleFunc("请上传运营位图片")],
},
]
buttonObj按钮组对象 span所占col的比例，float-right\left 展示在右侧\左侧
buttonObj: {
span: 24,
float: "right",
buttonGroup: [
{
type: "primary",
text: "查询",
click: "submit",
},
{
type: "default",
text: "重置",
click: "reset",
},
],
},