页面复用 -- 添加用户和编辑用户共用Drawer抽屉组件

一、功能介绍  

        在table表格页面中，有添加用户功能和编辑用户功能，两个功能弹出的页面是一样的（使用element plus抽屉组件Drawer），具体页面如图所示：

添加页面

 

编辑页面

二、要点总结

        1、两个页面不同之处，title不同：添加页面为添加用户，编辑页面为编辑用户。点击不同按钮触发的回调，显示对应的title；

        2.内容不同：添加页面对比编辑页面，多了一项用户密码输入框；

        3.内容不同隐含两个页面接口请求不相同，接口参数也需要注意。

        面对不同之处，具体应该怎么书写代码呢？

三、细节展示

        1、做标识区分

        抽屉显示与隐藏：这点很简单。声明一个中间变量  const drawer = ref<boolean>(false)   ，点击回调赋值为true则显示，false则关闭显示。   

        一开始写代码的时候，先写的是添加用户页面，也就先定义好了接口需要用到的参数。

接口参数

         后面为了区分点击不同按钮显示不同页面，这里对接口参数使用 Object.assign（） 对接口参数浅拷贝（Object.assign（）在最后详细介绍，这里先知道是浅拷贝即可），添加新的字段名 id 作为两个页面的区分点：有 id 则显示添加用户页面，没有 id 则显示编辑用户页面。

         这里需要注意的是：无论是编辑页面还是新增页面，校验信息显示需要去除。所以需要添加清除上一次校验错误提示。不然再一次点击时，上一次的错误提示任然存在。

第二次点击仍然存在上一次校验错误提示

2、标识在代码上的体现

        html代码中，页面标题 title 需要区分，以及页面中不需要的 input 输入框也要区分。上面提到的通过给参数添加 id 作为标识此时此刻便起到作用。

标题和输入框的显示与隐藏

        ts 代码中也是根据 addForm.id 是否存在，提示相应的成功和失败提示：有 id 则提示更新成功或者更新失败，没有 id 则提示添加成功或添加失败。

标识在ts代码上的体现

这里额外提两个注意点：

        1. <template #header> 插槽是 el-drawer 组件标题插槽，对应显示标题的位置

        2. 编辑按钮数据回显也是通过插槽实现 <template #default="{ row }">

template插槽实现数据回显

         也许应该注意到，点击确认添加 / 编辑用户的回调里面，应该发送接口请求。<标识在ts代码上的体现> 这幅图中只看到了一个请求函数，实际上这个函数中也做了区分。接下来跳转到同一个确定按钮（新增成功和编辑成功使用的是同一个按钮）请求函数是怎样区分新增请求个编辑请求的。 

         这里也是一样的，在发送请求之前，先判断传入参数中是否有 id 属性，如果有，调取更新请求，如果没有则调取新增请求。个人认为这一点处理非常巧妙，简化很多代码并且思路清晰。

补充：关于Object.assign（）

        MDN给的解释是：Object.assign() 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。（Object.assign() - JavaScript | MDN）

        个人的理解：Object.assign() 可以用来复制对象的可枚举属性到目标对象，目标对象存在的属性，会被源对象替换；目标对象不存在的属性，会添加到目标对象中。有点绕，直接看两个案例吧。 

1.目标对象存在的属性，会被源对象替换

let target = { name: '高启强' ，age: '36' };
let source = { hobby: '抓高启强' };
let result = Object.assign ( target, source );
console.log(result) //{ name: '高启强', age: '36', hobby: '抓高启强' }

2.目标对象不存在的属性，会添加到目标对象中

let target = { name: '高启强' ，age: '36' , Ghobby: '房地产开发' };
let source = { name: '安欣' ， age: '35' , Ahobby: '抓高启强' };
let result = Object.assign ( target, source );
console.log(result) //{ name: '安欣', age: '35', Ghobby: '房地产开发', Ahobby: '抓高启强' }
// source中的name'安欣'替换了'高启强'，age'35'替换了'36'，其他非共同属性则添加到目标对象 source 当中。