目录
2.当用户确定三级分类的数据时候,向服务器发请求获取平台属性进行展示
gitee仓库地址:
https://gitee.com/CMD-UROOT/my_project/commits/master
大家根据上传历史进行查找你需要的代码
业务需求:
当我们选择好三级分类的时候,会向服务器发请求,获取到平台的属性,在底下展示
1.书写api
接口文档地址:http://39.98.123.211:8416/swagger-ui.html#/2183021697225223078423646246152550921475
接口:/admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}
在api/product/attr.js中:
2.当用户确定三级分类的数据时候,向服务器发请求获取平台属性进行展示
在views/product/Attr/index.vue中:
打印结果:可以获取到数据:
在views/product/Attr/index.vue中:进行判断code==200就存储数据到组件中
查看:
存储成功,组件上有数据了
3.完成平台属性的静态页面
3.1第一列序号
在views/product/Attr/index.vue中:
效果:
3.2属性名称
在views/product/Attr/index.vue中:
效果:
3.3属性值列表
属性的数据结构是这样的
属性:颜色
属性值:黑色,红色,粉色,紫色
{
attrName:'颜色',
attrValueList:['黑色',紫色]
}
同时属性这部分用到了ElementUI的Tag标签
文档地址:Element - The world's most popular Vue UI framework
所以我们需要用到作用域插槽来做:
在views/product/Attr/index.vue中:
<template>
<div>
<el-card style="margin:20px 0px;">
<CategorySelect @getCategoryId="getCategoryId"></CategorySelect>
</el-card>
<el-card>
<el-button type="primary" icon="el-icon-plus">添加属性</el-button>
<!-- 表格:展示平台属性 -->
<el-table style="width:100%" border :data="attrList">
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="attrName" label="属性名称" width="150"></el-table-column>
<el-table-column prop="prop" label="属性值列表" width="width">
<template slot-scope="{row,$index}">
<el-tag type="success" v-for="(attrValue,index) in row.attrValueList" :key="attrValue.id"
style="margin:0px 20px">{
{ attrValue.valueName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="prop" label="操作" width="150">
<template slot-scope="{row, $index}">
<el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
代码对应关系图: