【form-generator在线表单生成---vue父组件调用vue弹框组件】

曾经终败给现在 2023-09-29 15:52 6阅读 0赞

#### form-generator在线表单生成,vue父组件调用vue弹框组件 ####

*   *   *  1， form-generator
         *  2，VUE 父组件调用子组件弹窗
         *   *  2.1 父组件
             *  2.2 子组件
         *  3，参考

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

#### 1， form-generator ####

**[form-generator在线表单生成][form-generator]**  
https://mrhj.gitee.io/form-generator/\#/

![在这里插入图片描述][ce6a33259cad475ea065501306263205.png]

#### 2，VUE 父组件调用子组件弹窗 ####

##### 2.1 父组件 #####

<template>
        <div>
            <el-button @click="show">按钮</el-button>
            
            
            <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></add-or-update>
        </div>
    </template>
    
    <script>
    // 引入子组件
    import AddOrUpdate from './Edit'
    export default {
        data(){
            return{
                // 控制新增编辑弹窗的显示与隐藏
                addOrUpdateVisible: false
            }
        },
        // 使用子组件
        components:{
            AddOrUpdate
        },
        methods:{
            // 按钮点击事件 显示新增编辑弹窗组件
            show(){
                this.addOrUpdateVisible = true
            },
            // 监听 子组件弹窗关闭后触发，有子组件调用
            showAddOrUpdate(data){
                if(data === 'false'){
                    this.addOrUpdateVisible = false
                }else{
                    this.addOrUpdateVisible = true
                }
            }
        }
    }
    </script>

##### 2.2 子组件 #####

<template>
        <el-dialog
            title="提示"
            :visible.sync="showDialog"
            width="50%"
            @close="handleClose">
    
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="showDialog = false">确 定</el-button>
            </span>
    
        </el-dialog>
    </template>
    
    <script>
    export default {    
        // 接受父组件传递的值
        props:{
            addOrUpdateVisible:{
                type: Boolean,         
                default: false
            }
        },
        data(){
            return{
                // 控制弹出框显示隐藏
                showDialog:false
            }
        },
        methods:{
            // 弹出框关闭后触发
            handleClose(){
                // 子组件调用父组件方法，并传递参数
                this.$emit('changeShow','false')
            }
        },
        watch:{
            // 监听 addOrUpdateVisible 改变
            addOrUpdateVisible(oldVal,newVal){
                this.showDialog = this.addOrUpdateVisible
            },
        }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>

#### 3，参考 ####

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

JSON解析器  
将保存在数据库中的JSON表单，解析成真实的表单

// 安装
    npm i form-gen-parser

vscode插件  
帮助使用element UI的开发者完成基本的表单代码搭建任务，减少重复的劳动。  
vscode-plugin分支配套插件为：form-generator-plugin；  
使用插件可右键打开设计器，直接将代码保存到工程中。  
安装插件请在vscode中搜索：

jakHuang  
或  
Form Generator Plugin

运行  
确保已经安装node.js 10+  
首次下载项目后，安装项目依赖：

yarn
    或
    
    npm install

//本地开发
    npm run dev
    //构建
    npm run build

友情链接  
vue-admin-beautiful —— 企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）  
vue-admin-beautiful —— 在线演示  
pl-table —— 完美解决 element 万级表格数据渲染卡顿问题  
go-admin…

[form-generator]: https://mrhj.gitee.io/form-generator/#/
[ce6a33259cad475ea065501306263205.png]: https://img-blog.csdnimg.cn/ce6a33259cad475ea065501306263205.png