Vue后台管理系统项目(15)平台属性管理动态展示属性

目录

gitee仓库地址:

业务需求:

 1.书写api

 2.当用户确定三级分类的数据时候,向服务器发请求获取平台属性进行展示

 3.完成平台属性的静态页面

3.1第一列序号

3.2属性名称

3.3属性值列表

---

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>

代码对应关系图: