zoukankan      html  css  js  c++  java
  • el-dialog 业务应用

    背景

      新开发的项目中使用了VUE框架,一套管理系统。因为大多都是对表的操作,比如增删改查。因为这些业务关系对单个记录修改的时候用的是模态框,用element-ui的 dialog组件

    问题

      记录的新增和编辑用的是相同的表单元素,所以肯定是不会用两个单独的组件,VUE也强调要组件复用。我的做法是用一个组件来写记录的编辑界面

      1)新增和编辑的时候打开同一个组件,如何区分编辑和新增

      2)列表的组件和编辑的表单组件是两个文件,数据通过props传递

      3)视图也逻辑都要在一个组件里;

      4)列表组件控制dialog显示,表单组件写重置,保存等逻辑;

    做法

      Angular的做法

      之前一直用angular做单页面应用,用的模态框是ng-dialog,每次实例化一个ngDialog.open() 就会在body的结束标签前新增一个DOM节点。我用一个factory服务存放ngDialog.open(),每次调用的都是同一个单例对象的方法。这样做有几个好处

    • 不用在每个地方注入ngDialog,只需要注入factory服务(里边通常会放一些其他属性和方法)
    • 每个close的回调函数不用在每个用到的地方再重新写一遍,公用一个
    • 用参数代表要新增还是修改(要调用接口获取编辑的数据)

      VUE的做法

    • 打开弹框的时候要先reset一下表单,在声明好组件引入以后,组件会一直保存在内存中,编辑和新增用的是同一个组件,如果不重置就会导致上一次编辑过的内容又显示出来。而这个控制还不能写在created方法里,因为它只有在组件初始化的时候才被调用一次,只要组件没有被销毁就不会再执行;做法就是使用watch去监听控制 el-dialog 的 v-model 绑定的值
    • 数据传递,用props属性   VUE是单向数据流,所以可以从父组件像子组件传递数据,且子组件不应该修改通过props传递过来的值,可以使用this.$parent(需要知道层级,不建议使用);父组件也可以通过this.$refs去控制(传递)子组件的属性和方法,还可以使用$emit向父组件传递
    <!-- list组件 -->
    <template>
        <div class="btns">
            <button class="btn btn-default" @click="add">新增</button>
            <button class="btn btn-default" @click="edit">修改</button>
        </div>
    
        <el-dialog title="新增编辑表单" v-model="showDialog">
            <user-form 
            :show-dialog="showDialog" 
            :dialog-type="dialogType"
            ref="userForm" 
            v-on:close="closeDialog"></user-form>
        </el-dialog>
    </template>
    
    <script>
        import userForm from 'user-form.vue';
        export default{
            data(){
                return{
                    showDialog:false,
                    dialogType:''
                }
            },
            created(){
    
            },
            methods:{
                add(){
                    this.showDialog = true;    //打开el-dialog
                    this.dialogType = 'add';    //操作类型
                },
                edit(){
                    this.showDialog = true;    //打开el-dialog
                    this.dialogType = 'edit';
                },
                closeDialog(){
                    this.showDialog = false;    //隐藏el-dialog
                }
            }
        }
    </script>
    <!-- 新增修改表单组件 -->
    <template>
        <el-form :model="userForm" ref="userForm" label-width="120px">
            <el-form-item label="名字" prop="name">
                <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save">保 存</el-button>
            </el-form-item>
        </el-form>
    </template>
    
    <script>
        export default{
            props:['showDialog' 'dialogType'],
            data(){
                return{
                    userForm:{
                        name:''
                    }
                }
            },
            methods:{
                save(){
                    //事件通知父组件修改el-model的显示状态
                    this.$emit('close');
                }
            },
            watch:{
                showDialog(n, o){    //根据dialog的状态重置表单
                    if(n)
                        this.$refs.userForm.resetFields()
                },
                dialogType(n, o){
                    switch(n){
                        case 'add':
                            //新增
                        break;
                        case 'edit':
                            //编辑
                        break;
                    }
                }
            }
        }
    </script>

     还有一种方法是把el-dialog组件和el-form组件写到一个组件里,showDialog属性在表单组件里声明,在列表里使用$refs调用子组件的属性并修改;

  • 相关阅读:
    oracle之is null和is not null的优化
    oracle命令导出/导入
    Linux环境下后台启动运行jar并设置内存
    阿里云手动安装git客户端
    阿里云安装maven
    python 迭代器
    ThreadPoolExecutor构造器参数详解
    CVE-2020-13957 solr未授权复现
    CVE-2020-9496 apache ofbiz xml-rpc反序列化漏洞分析
    REST API介绍
  • 原文地址:https://www.cnblogs.com/zhang-jian/p/7440880.html
Copyright © 2011-2022 走看看