文章目录
平台属性界面（三）
查看模式与修改模式切换
接下来设置当用户进入修改时，当用户点击属性值名称时，该单元格变为input框，而移开焦点时，变为span展示数据。
具体效果如下所示
首先，当用户点击添加添加属性值的时候，为每一个属性值列表的内容添加一个flag标记，用来区分展示的模块是input还是span
接下来通过flag展示不同元素，并根据点击与回车，对flag进行切换
此时完成切换。
查看模式与修改模式注意事项
当用户输入的时候，用户可能输入一大堆空格，这种情况就不应该让他显示出来，因此在切换查看模式的时候可以做个判断，如果用户输入的是一堆空格这种无效输入，就直接给用户弹提示。
用户还有可能输入已有的属性值，如下图所示。
解决方法如下，对数据进行遍历，如果有重复就提示用户，并且不可以将重复数据转为查看模式
修改属性的查看与编辑模式切换
当用户向修改属性时，此时并不能切换查看与编辑模式的切换，这是因为之前采用深拷贝获取数据，而这数据没有切换的标志flag，为了解决这个问题，可以当修改属性时，将属性值元素添加flag标记。具体代码如下所示。不可以直接写item.flag=false。因为这样写Vue无法侦测到。
表单元素自动聚焦
此时我们的项目，当进行属性修改时。点击不会自动聚焦，如下所示
为了实现这个功能首先给查看模式下的span标签绑定一个点击事件，传row是为了后续变更flag，传$index是确定为哪个input聚焦。
接下来给编辑模式的input设置ref，用来确定哪个input聚焦
逻辑如下所示，需要注意的是，不可以直接给index聚焦，因此从span到index需要时间，节点渲染需要时间，直接渲染会出不来效果，在此利用nextTick来解决此问题。此时自动聚焦完成。
同理当点击添加属性值时，也该有聚焦效果。此时注意，点击添加属性值的时候，应该给最新的一个元素聚焦，因此利用数组长度减一即可。
删除属性值的操作
首先先书写气泡弹出框（当用户像删除属性值时弹出），找到elementUI的Popconfirm气泡弹出框，进行修改。
查阅文档可知，当点击确定出发的是气泡弹出框的onConfirm事件，因此给该事件绑定删除属性的操作。
保存操作
保存的时候需要对服务器发请求，经过查阅文档，发现已经书写过该接口。
接下来给保存按钮绑定点击事件
三级联动可操作性
接下来完成这个效果，当用户添加属性时，三级联动不可操作。如下所示
通过分析可知，当不展示初始表格的时候，三级联动组件才应为不可操作，即三级联动操作与否取决于isShowTable是true还是false。
此时功能完成，如下所示
