目录
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=""否则会报下面的错误
