Vue后台管理系统项目(19)添加与修改属性,查看模式与编辑模式切换及注意事项(完全体)

目录

gitee仓库地址:

业务需求

1.新增的属性值id问题

2.添加属性值按钮进入的查看模式与编辑模式切换

​编辑

找到对应的结构进行书写

问题1:

问题2:

问题3

3.修改按钮进入的查看模式与编辑模式切换 

完整代码:

---

gitee仓库地址:

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

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

业务需求

1.新增的属性值id问题

我们知道已有的属性,数据是服务器返回过来的,而且已有的属性已经有了相应的id

我们点击修改按钮进入,点击添加属性值新增一个华为,但是从数据中看,没有属性值的id,然后已经有的属性值安卓和苹果手机的数据中是有id的,所以我们需要给我们新增的属性值以id,那么什么时候给新增的属性值id呢?

当我们点击添加属性值的时候,就应该给新增的属性值添加id

那么新增的属性值的id是谁呢?
新增属性值的id就是attrInfo的id

 在views/product/Attr/index.vue中:

在views/product/Attr/index.vue中: 

这里解决了点击修改按钮进入,然后点添加属性值按钮,新增属性值id的问题

methods中

2.添加属性值按钮进入的查看模式与编辑模式切换

找到对应的结构进行书写

 

问题1:

查看模式：显示span

编辑模式：显示input

注意：通过flag标记进行切换查看模式与编辑模式，但是需要注意的时候，一个属性flag没有办法控制全部的属性值的切换

 但是我们肯定还是需要信号量来控制到底谁显示,谁隐藏,解决思路是,让每一个属性值去控制当前是查看模式还是编辑模式,意思就是flag不要放在data中,放data中只有一个,我们点击添加属性值的按钮的时候,我们给新增的属性值身上都加一个标记,让新增的属性控制自己是查看模式还是编辑模式

我们在添加属性值的回调中这样写:

效果实现完成

问题2:

但是我们发现用户如果不输入内容是空值的情况也有 

我们需要进行判断:

关于trim()    Trim是String型数据的一个方法，作用是去掉字符串开头和结尾的空格，比如说字符串a=&#