Vue后台管理系统项目(25)SPU管理模块静态

目录

gitee仓库地址:

1.三级联动部分

2.第二部分

---

gitee仓库地址:

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

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

1.三级联动部分

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

<template>
  <div>
    <el-card style="margin:20px 0px"></el-card>
    <el-card></el-card>
  </div>
</template>
<script>
  export default {
    name:'Spu',
  }
</script>
<style scoped>
</style>

效果:

 由于我们三级联动封装过,是全局组件,所以这里直接引用进来使用进行

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

<template>
  <div>
    <el-card style="margin:20px 0px">
      <!-- 三级联动已经是全局组件了,可以直接使用 -->
      <CategorySelect @getCategoryId="getCategoryId" :show="!show"></CategorySelect>
    </el-card>
    <el-card></el-card>
  </div>
</template>
<script>
  export default {
    name:'Spu',
    data() {
      return {
        //分别是分类的id
        category1Id: "",
        category2Id: "",
        category3Id: "",
        //控制三级联动的可操作性
        show:true,
      }
    },
    methods: {
      //三级联动的自定义事件，可以把子组件的相应的id传递给父组件
      getCategoryId({ categoryId, level }) {
        //categoryId:获取到一、二、三级分类的id  level：为了区分是几级id
        if (level == 1) {
          this.category1Id = categoryId;
          //清除2、3级分类的id
          this.category2Id = "";
          this.category3Id = "";
        } else if (level == 2) {
          this.category2Id = categoryId;
          //清除3级id
          this.category3Id = "";
        } else {
          this.category3Id = categoryId;
          //获取SPU列表数据进行展示
          this.getSpuList();
        }
      },
      //获取SPU列表数据的方法
      getSpuList(){

      }
    },
  }
</script>
<style scoped>
</style>

效果:三级联动出来了 

 2.第二部分

<el-card>
      <!-- 底部这里将来是有三部分进行切换 -->
      <div>
        <!-- 展示SPU列表的结构 -->
        <el-button type="primary" icon="el-icon-plus">添加SPU</el-button>
          <el-table style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="prop" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="SPU描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <!-- 这里按钮将来用hintButton替换 -->
              <el-button type="success" icon="el-icon-plus" size="mini"></el-button>
              <el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
              <el-button type="info" icon="el-icon-info" size="mini"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 
        @current-change=""
        @size-change=""
        -->
        <el-pagination style="text-align: center" :current-page="6" :page-sizes="[3,5,10]" :page-size="3"  layout="prev, pager, next, jumper,->, sizes,total" :total="23"></el-pagination>
      </div>
    </el-card>

效果:

静态完成