Vue小模块之功能全面的表格对话框的弹出和关闭

Posted 2022-12-07 究极死胖兽

Vue小模块之功能全面的表格（五）对话框的弹出和关闭

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

对话框组件

创建一个对话框组件，具备传递close和save事件的能力，需要注意的是：
当组件使用父组件传入的prop参数作为对话框的visible属性时，需要将其转化为组件自己的data属性或computed属性，不然可以正常运行，但后台会报错，如果使用data属性，需要添加watch监视器，使用computed属性，需要同时具备get和set方法。其次，需要在before-close函数中修改visible属性。

直接在父组件中使用对话框而不创建子组件的话，可以不用考虑上述问题，但是不利于代码的复用和解耦。

在目录src/components/目录下创建EditDialog.vue

<template>
    <el-dialog :visible.sync="localShow" :title="title" :before-close="beforeClose">
        <!-- 插槽区 -->
        <slot></slot>
        <!-- 按钮区 -->
        <span slot="footer">
            <el-button type="success" icon="el-icon-check" @click="save">保存</el-button>
            <el-button type="danger" icon="el-icon-close" @click="close">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default 
        props: 
            show: 
                type: Boolean,
                default: false
            ,
            title: 
                type: String,
                default: '对话框'
            
        ,
        data() 
            return 
                localShow: this.show
            
        ,
        watch: 
            show(val) 
                this.localShow = val
            
        ,
        methods: 
            beforeClose() 
                this.close()
            ,
            close() 
                this.$emit('close')
            ,
            save() 
                this.$emit('save')
            
        
    
</script>

在DataTable.vue中引入EditDialog 组件，并增加控制对话框显示和关闭的属性和方法

import EditDialog from './EditDialog'

components: 
    ViewPage, EditDialog
,
data() 
    return 
        // ...
        editShow: false
    
,
methods: 
    // ...
    addTodo() 
        this.editShow = true
    ,
    saveTodo() 
        this.closeEditDialog()
    ,
    closeEditDialog() 
        this.editShow = false
    
,

添加编辑对话框

<!-- 表格区 -->
//...
<!-- 对话框 -->
<edit-dialog :show="editShow" title="编辑学习计划" @close="closeEditDialog" @save="saveTodo"></edit-dialog>

为添加按钮绑定事件

<!-- 左按钮区 -->
<template slot="left-field">
    <el-button type="danger" icon="el-icon-circle-plus-outline" @click="addTodo">添加</el-button>
</template>

点击添加按钮，对话框弹出

小结

本节实现了添加功能对话框的弹出和关闭，下节将继续完成数据的添加功能