目录

展示有几列

展示属性名

展示属性名称列表

销售属性的展示

---

gitee仓库地址:

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

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

spu图片我们只是完成了照片墙的展示,但是对于数据的收集还没有做,比如我们删除了已经有的图片,那么我们需要收集数据提交给服务器,或者我们新增了图片也需要收集数据提交给服务器

现在我们要完成的是销售属性的数据的展示

整个项目当中销售属性一共三个：颜色、尺码、版本

我们从数据中可以看到saleAttrList是平台的销售属性,我们现在需要把已有的销售属性展示出来

展示有几列

我们从数据中可以知道任何毅哥spu都有属于自己的销售属性,并且我们在页面中是用table来展示相应的销售属性和属性值,table所需要的数据一定是数组

 在views/product/Spu/SpuForm/index.vue中: 

 效果: 

展示属性名

 效果:

 展示属性名称列表

 这块用到了ElementUi的一个组件,

地址:Element - The world's most popular Vue UI framework

我们把结构和样式都复制到我们的SpuForm里面

结构放到作用域插槽里面 

 

 我们先进行数据的展示

 

 遍历的是销售属性的销售属性值,并且有id

效果:相应的静态就有了 

 

销售属性的展示

操作栏中的删除按钮 

效果:

 销售属性一共是三个,我们目前只拿到了两个,颜色和版本,我们还需要拿到另外一个销售属性,所以我们需要计算出为选择的销售属性

 

 效果:

 那么我们要好好想一下怎么计算

效果: 我们上面没有的属性就过滤出来了

 

 

效果: 

效果: 

 

 

 收集id成功 

未选择销售属性,那么添加销售属性的按钮不可用,能不能用取决于attrId有没有值

 这样就可以控制了