Vue elementUI 自定义表单模板组件功能实现

elementUI 实现一个自定义的表单模板组件
注：该功能基于elementUI
背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单

直接上代码：

<template>
 <div>
   <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
     <div class="addBox">
       <el-form :model="form" label-width="90px" ref="form" :rules="rules">
         <el-form-item label="选项名称" lebel-width="80" prop="label">
           <el-input placeholder="请输入自定义选项名称" maxlength="20" clearable v-model="form.label" @input="change($event)">
           </el-input>
         </el-form-item>
         <el-form-item label="选项提示" lebel-width="80" prop="tips">
           <el-input @input="change($event)" placeholder="请输入提示内容" maxlength="20" clearable v-model="form.tips">
           </el-input>
         </el-form-item>
         <el-form-item label="选项类型" prop="value">
           <el-cascader clearable ref="cascader" v-model="value" :options="options" @change="handleChange">
           </el-cascader>
         </el-form-item>
         <el-form-item v-if="radioCount" label="最多选几项">
           <el-input-number v-model="form.radioCount" controls-position="right" :min="1"></el-input-number>
           <!-- <el-input type="number" v-model="form.radioCount"></el-input> -->
         </el-form-item>
         <el-form-item v-if="isRadio" v-for="(domain, index) in radioOptions" :key="domain.id"
           :label="'添加选项' + (index + 1)" prop="name">
           <el-row>
             <el-col :span="18">
               <el-input placeholder="请输入选择框选项" v-model="domain.name"></el-input>
             </el-col>
             <el-col :span="6">
               <el-button @click="addType" v-if="index == 0">新增</el-button>
             </el-col>
             <el-col :span="6">
               <el-button @click.prevent="removeType(domain)" v-if="index > 0">删除</el-button>
             </el-col>
           </el-row>
         </el-form-item>
       </el-form>
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
   </el-dialog>
 </div>
</template>
<script>
 export default {
   name: 'WorkspaceJsonProjectCopy',

data() {
     return {
       title: '新增选项',
       isRadio: false,
       value: [],
       rules: {},
       open: true,
       radioCount: false,
       form: {
         radioOptions: [{}],
         label: ''
       },
       radioOptions: [{}],
       options: [{
           value: "input",
           label: "输入框",
           children: [{
               value: "phone",
               label: "手机号",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             },
             {
               value: "idcard",
               label: "身份证号",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             },
             {
               value: "link",
               label: "链接",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             },
             {
               value: "email",
               label: "邮箱",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             },
             {
               value: "other",
               label: "其他",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             }
           ]
         },
         {
           value: "radio",
           label: "选择框",
           children: [{
               value: "danxuan",
               label: "单选",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             },
             {
               value: "duoxuan",
               label: "多选",
               children: [{
                   value: "0",
                   label: "非必填"
                 },
                 {
                   value: "1",
                   label: "必填"
                 }
               ]
             }
           ]
         },
         {
           value: "image",
           label: "图片",
           children: [{
               value: "0",
               label: "非必填"
             },
             {
               value: "1",
               label: "必填"
             }
           ]
         },
         {
           value: "date",
           label: "日期—年月日",
           children: [{
               value: "0",
               label: "非必填"
             },
             {
               value: "1",
               label: "必填"
             }
           ]
         },
         {
           value: "datetime",
           label: "时间—时分秒",
           children: [{
               value: "0",
               label: "非必填"
             },
             {
               value: "1",
               label: "必填"
             }
           ]
         },
       ],
     };
   },

mounted() {

},

methods: {
     change() {
       this.$forceUpdate();
     },
     // 弹窗选择选项类型
     handleChange(value) {
       this.value = value
       if (value[0] && value[0] == 'radio' && value[1] == 'danxuan') {
         this.radioOptions = [{}]
         this.isRadio = true
         this.radioCount = false
       }
       if (value[0] && value[0] == 'radio' && value[1] == 'duoxuan') {
         this.radioOptions = [{}]
         this.isRadio = true
         this.radioCount = true
       }
       if (value[0] && value[0] != 'radio') {

this.radioOptions = [{}]
         this.isRadio = false
         this.radioCount = false
       }
     },
     // 重置弹窗
     reset() {
       this.form = {}
       this.value = []
       this.radioOptions = [{}]
       this.isRadio = false
       this.radioCount = false,
         this.isEdit = false
       const _cascader = this.$refs.cascader
       if (_cascader) {
         _cascader.$refs.panel.checkedValue = [];
         _cascader.$refs.panel.activePath = [];
         _cascader.$refs.panel.syncActivePath()
       }
       this.resetForm("form");
     },
     // 取消弹窗
     cancel() {
       this.open = false;
       this.form = {}
       this.reset()
     },
     // 新增添加选择框选项
     addType() {
       this.radioOptions.push({})
     },
     // 删除新增的选择框选项
     removeType(item) {
       var index = this.radioOptions.indexOf(item);
       if (index !== -1) {
         this.radioOptions.splice(index, 1);
       }
     },
     // 获取创建时间
     getDate() {
       var date = new Date()
       var Y = date.getFullYear() + '-'
       var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
       var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
       var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
       var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
       var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
       return Y + M + D + h + m + s
     },
     submitForm: function () {
       var value = this.value
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (value[0] == 'input') {
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'input',
               inputType: value[1],
               mustFill: value[2],
               tips: this.form.tips,
               radioCount: null,
               radioOption: null
             })

} else if (value[0] == 'radio' && value[1] == 'danxuan') {
             var options = []
             this.form.radioOptions = this.radioOptions
             for (var item of this.form.radioOptions) {
               options.push(item.name)
             }
             var subOption = options.join(';')
             console.log(options.join(';'))
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'radio',
               radioCount: 1,
               mustFill: value[2],
               radioOption: subOption,
               tips: this.form.tips,
               inputType: null
             })
             console.log(this.form.radioOptions)
           } else if (value[0] == 'radio' && value[1] == 'duoxuan') {
             var options = []
             this.form.radioOptions = this.radioOptions
             for (var item of this.form.radioOptions) {
               options.push(item.name)
             }
             var subOption = options.join(';')

console.log(options.join(';'))
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'radio',
               mustFill: value[2],
               radioOption: subOption,
               tips: this.form.tips,
               radioCount: this.form.radioCount,
               inputType: null
             })
           } else if (value[0] == 'image') {
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'image',
               mustFill: value[1],
               id: this.id,
               tips: this.form.tips,
               inputType: null,
               radioCount: null,
               radioOption: null
             })
           } else if (value[0] == 'date') {
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'date',
               mustFill: value[1],
               id: this.id,
               tips: this.form.tips,
               inputType: null,
               radioCount: null,
               radioOption: null
             })
           } else if (value[0] == 'datetime') {
             var submitData = JSON.stringify({
               createTime: this.getDate(),
               label: this.form.label,
               type: 'datetime',
               mustFill: value[1],
               id: this.id,
               tips: this.form.tips,
               inputType: null,
               radioCount: null,
               radioOption: null
             })
           }
           console.log(submitData)
         }
       })
     },
   },

};
</script>

来源：https://blog.csdn.net/weixin_44590591/article/details/128384778