vue-shop之分类参数|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第8天

基本结构搭建
- 级联选择器如果需规定只能选中三级分类可通过change事件中判断选中的id个数来判断只有当数组长度为3时才说明选中的是三级分类否则将数组清空即可
- 通过Tabs标签页来渲染动态参数和静态属性页面
- 如果未选中三级分类则禁用添加参数和分类属性：button可通过disabled属性来控制禁用而disabled的值需由级联选择器数组的长度来决定因此使用计算属性来确定属性绑定的值
- 请求参数列表时需要将选中的三级分类的id传入请求路径中因此再次使用计算属性判断是否选中三级分类如果选中则返回selectedKeys中的最后一项若未选中则返回Null
- 当选中的三级分类改变时发起get请求获取参数列表但此种方法会导致在改变选中的Tab时不能再次发起请求解决方法：定义一个新的函数将请求参数另写在里面，当selectedKeys改变和tab的activeName改变时分别调用此函数即可
- 由于请求到的数据可能渲染到动态参数和静态属性两个页面，因此在请求数据后需要判断activeName的值，并通过不同的值在不同的页面渲染内容
- 总结：每次表格中有操作时首先需要有template标签 v-slot属性接收数据
- 添加动态参数和静态属性的对话框几乎相似因此可以共用一个对话框
- 由于共用一个对话框而两个对话框的标题不同因此使用计算属性来为对话框地title属性绑定值
- 展开行部分：需将获得的attr_vals字符串转换为数组形式循环
- 动态编辑标签直接在ui组件库中找由于通过v-for渲染时为每个参数都绑定inputVisable 如果点击其中一个分类的标签中的编辑标签inputVisable的值都会改变则其他标签的状态也会同时改变
- 解决方法：在循环请求到数据后循环res.data将attr_vals分割为数组的同时为数据中的每行数据添加inputVisable和inputVals
- 字符串.trim().length 可以判断字符串去掉空格后的长度若等于0即除去空格后无内容
- 当文本框失去焦点时需要判断是否除去空格未输入其他内容若有内容则将输入的内容push到对应数组里即可
- 删除参数项时只需将数组里对应的项删除并同添加相同的方式提交即可