[TOC]
使⽤ Element 的 Dialog 对话框组件 // Element 官⽅示例：Dialog 对话框组件 title=“提示” :visible.sync=“dialogVisible” width=“30%” :before-close=“handleClose”> 这是⼀段信息 slot=“footer” class=“dialog-footer”> @click=“dialogVisible = false”>取 消 type=“primary” @click=“dialogVisible = false”>确 定

添加到⻚⾯中最后位置，不需要关闭处理，删除即可

点击顶部添加按钮时，将 dialogVisible 设置为 true， 让对话框显示

// role/components/list.vue

内部的表单不建议直接书写在 dialog 中，通过单独封装组件处理。

// role/components/create-or-edit.vue

引⼊到 list 组件中，并注册为⼦组件

// role/components/list.vue title=“添加⻆⾊” :visible.sync=“dialogVisible” width=“30%”> …

结构准备完毕，设置请求，提交表单

// services/role.js … // 添加或编辑⻆⾊ export const createOrUpdate = data => { return request({ method: ‘POST’, url: ‘/boss/role/saveOrUpdate’, data }) }

引⼊⽂件，根据接⼝要求声明绑定数据，绑定给元素，浏览器查看效果。

// create-or-edit.vue label=“⻆⾊名称”> v-model=“role.name”> label=“⻆⾊编码”> v-model=“role.code”> label=“⻆⾊描述”> v-model=“role.description” type=“textarea”> 取消 type=“primary”>确认

点击确认，发送请求提交表单

// create-or-edit.vue type=“primary” @click=“onSubmit”>确认 … 成功，这时应关闭对话框并刷新列表，但这些都是⽗组件 list 的功能，这时就需要⽗⼦组件通信（⼦传⽗）了。

给⼦组件注册⾃定义事件

⽗组件监听事件，如果触发，说明添加成功，进⾏对应处理。 // create-or-edit.vue … async onSubmit () { const { data } = await createOrEdit(this.role) if (data.code === ‘000000’) { // 提示 this.$message.success(‘添加成功’) // ⼦组件触发⾃定义事件 this.$emit(‘success’) // 清空内容 this.role = {} } } … // list.vue @success=“onSuccess” > …

添加功能完成，最后完善取消功能，点击取消，关闭对话框，同样需要⼦传⽗

// create-or-edit.vue @click=“onCancel” >取消 … // list.vue … @cancel=“dialogVisible = false” >