[TOC]

编辑功能与添加功能相似，采⽤同⼀组件，操作时通过 isEdit 传递状态

// list.vue … :title=“isEdit ? ‘编辑⻆⾊’ : ‘添加⻆⾊’” …> :is-edit=“isEdit” … >

⼦组件接收状态

// create-or-edit.vue props: { isEdit: { type: Boolean, default: false } },

点击添加时，设置 isEdit 为false

// list.vue @click=“handleAdd” >添加⻆⾊ …

点击编辑按钮，设置 isEdit 为 true，同时弹出对话框。(事件在初始化布局时设置过了，参数为当前⻆⾊信息)

// list.vue … handleEdit (role) { // 显示对话框 this.dialogVisible = true // 设置编辑状态 this.isEdit = true },

点击编辑时将数据绑定给表单，需要⽗传⼦将编辑的⻆⾊ id 传⼊。

传⼊ id 由⼦组件重新查询，可以确保数据为最新，也可以避免原数据不全的情况 // list.vue … :is-edit=“isEdit” :role-id=“roleId” @success=“onSuccess” @cancel=“dialogVisible = false” >

⼦组件接收，并在 created 时进⾏展示

// create-or-list.vue props: { … roleId: { type: Object } }, created () { if (this.isEdit) { console.log(roleId) } },

由于当前组件只是显示隐藏，组件没有销毁与创建，所以通过 v-if 来控制对话框即可

// list.vue v-if=“dialogVisible” … >

封装请求⻆⾊功能

// services/role.js … // 获取⻆⾊ export const getRoleById = id => { return request({ method: ‘GET’, url: /boss/role/${</font><font style="color:rgb(0,92,197);">id</font><font style="color:rgb(102,153,0);">}, }) }

引⼊并请求⻆⾊数据

// create-or-edit.vue created () { if (this.isEdit) { // 加载⽤户数据 this.loadRole() } }, … async loadRole () { const { data } = await getRoleById(this.roleId) if (data.code === ‘000000’) { // 将⻆⾊数据更新给 role 即可 this.role = data.data } }, 最后为提交功能，观察接⼝发现新增与编辑的区别为 id 参数，但 role 中已经⾃动包含，所以功能完成⽆需修改。