gitee仓库地址:

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

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

静态组件搭建

分析可以分为上下两部分

我们首先需要用到card卡片这部分的阴影

文档:Element - The world's most popular Vue UI framework

其次需要用到form

Attr平台属性管理静态组件搭建

1.基本结构

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

效果:

2.三级联动部分

平台属性管理和Spu管理中都用到了三级联动,所以我们完全可以把三级联动封装成一个全局组件,将来哪里需要用,就直接用就行了

2.1三级联动注册全局组件

我们的全局组件都放在components文件夹里面

所以我们在components下新建一个CategorySelect,里面建一个index.vue

在main.js中引入

2.2使用三级联动

在views/product/Attr/index.vue中:使用三级联动

效果:

2.3ElementUI找到我们需要的复制粘贴

文档:Element - The world's most popular Vue UI framework

在components/CategorySelect/index.vue中:

修改为:

<template>
  <div>
    <!-- inline:代表行内表单, 代表一行可以放置多个表单元素-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" value="">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" value="">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" value="">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

效果:三级联动出来了

记得要加value=""否则会报下面的错误

Vue后台管理系统项目(12)商品管理之三级联动静态组件

gitee仓库地址:

静态组件搭建

Attr平台属性管理静态组件搭建

1.基本结构