Vue后台管理系统项目(9)修改品牌完成

目录

gitee仓库地址:

业务需求:

 1.找到对应的修改按钮的结构

 2.当我们点击修改时,默认应该把品牌信息,品牌的LOGO展示出来

​编辑

3.浅拷贝解决问题

4.修改成功后弹出框的样式

5.修改后默认跳转到第一页的问题

6.解决点击修改按钮,还是添加品牌的内容

---

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求:

点击修改按钮,完成修改品牌名称和品牌LOGO的操作

1.找到对应的修改按钮的结构

 我们点击修改按钮的时候,我们需要给相应的回调传参数

 2.当我们点击修改时,默认应该把品牌信息,品牌的LOGO展示出来

 我们看看row里面有什么

 打印:

当我们点击修改时,默认应该把品牌信息,品牌的LOGO展示出来,其实我们只需要把row里面的信息赋值给tmForm就可以了,因为tmForm在品牌名称和品牌图片那里都进行了绑定

下图可以看出来:

 所以我们在views/product/tradeMark/index.vue中:

 效果:点击修改按钮,展示成功 

3.浅拷贝解决问题

问题出现:

但是我们点击修改按钮以后,我们进行修改数据,我们不点击确认按钮,点击取消按钮,页面上的数据既然也更改了,原因是=把两个对象指向同一个地址,改其中一个另外一个也跟着变化了

 所以我们这里要利用浅拷贝

 浅拷贝相当于是:

list是返回的品牌的信息是一个数组,数组里面有三个对象,我们要做的是把数组中我们选中修改的对象浅拷贝赋值给tmForm,说白了就是把该对象拷贝了一份进行操作,不要直接操作这个数据,因为这个数据是在表格当中进行展示的

测试:

 4.修改成功后弹出框的样式

 我们点击修改后,修改成功的样式是这样的,我们想更换其他样式:

查看官方文档:Element - The world's most popular Vue UI framework

 

 我们可以看到文档是传了一个对象,用type来确定颜色

 确实弹出框修改成功了,但是我们会发现我们如果不是在第一页修改的,会直接跳转到第一页上面去

5.修改后默认跳转到第一页的问题

原因是这样的:

 所以我们需要进行判断:

 效果:成功了,修改了数据还停留在当前页 

 6.解决点击修改按钮,还是添加品牌的内容

 在title那里也进行判断,而且是动态的

 效果:成功了