每一个3级分类都会有自己的属性，这里可以简单的想象成3级分类中的电脑会有cpu，屏幕等属性，手机会有屏幕，芯片等属性，所以需要维护。
在modules文件夹新建common文件夹，同时在common文件夹下新建category.vue类： category.vue内容如下：
<template> <div> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeclick" :filter-node-method="filterNode" :highlight-current = "true" ></el-tree> </div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { //这里存放数据 return { filterText: "", menus: [], expandedKey: [], defaultProps: { children: "children", label: "name" } }; }, //计算属性 类似于data概念 computed: {}, //监控data中的数据变化 watch: { filterText(val) { this.$refs.menuTree.filter(val); } }, //方法集合 methods: { //树节点过滤 filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; }, getMenus() { this.$http({ url: this.$http.adornUrl("/prodect/category/list/tree"), method: "get" }).then(({ data }) => { this.menus = data.data; }); }, nodeclick(data, node, component) { console.log("子组件category的节点被点击", data, node, component); //向父组件发送事件； this.$emit("tree-node-click", data, node, component); } }, //生命周期 - 创建完成（可以访问当前this实例） created() { this.getMenus(); }, //生命周期 - 挂载完成（可以访问DOM元素） mounted() {}, beforeCreate() {}, //生命周期 - 创建之前 beforeMount() {}, //生命周期 - 挂载之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 销毁之前 destroyed() {}, //生命周期 - 销毁完成 activated() {} //如果页面有keep-alive缓存功能，这个函数会触发 }; </script> <style scoped> </style>在prodect文件夹下新建attrgroup.vue以及attrgroup-add-or-update.vue文件，这两个文件是属性分组需要的相关页面： attrgroup.vue内容如下：
<template> <el-row :gutter="20"> <el-col :span="6"> <category @tree-node-click="treenodeclick"></category> </el-col> <el-col :span="18"> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button type="success" @click="getAllDataList()">查询全部</el-button> <el-button type="primary" @click="addOrUpdateHandle()" >新增</el-button> <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0" >批量删除</el-button> </el-form-item> </el-form> <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" > <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column> <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column> <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column> <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column> <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column> <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作" > <template slot-scope="scope"> <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.attrGroupId)" >修改</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId,scope.row.attrGroupName)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <!-- 修改关联关系 --> <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update> </div> </el-col> </el-row> </template> <script> /** * 父子组件传递数据 * 1)、子组件给父组件传递数据，事件机制； * 子组件给父组件发送一个事件，携带上数据。 * // this.$emit("事件名",携带的数据...) */ //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; import Category from "../common/category"; export default { //import引入的组件需要注入到对象中才能使用 components: { Category}, props: {}, data() { return { catId: 0, dataForm: { key: "" }, dataList: [], pageIndex: 1, pageSize: 10, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, relationVisible: false }; }, activated() { this.getDataList(); }, methods: { //处理分组与属性的关联 relationHandle(groupId) { this.relationVisible = true; this.$nextTick(() => { this.$refs.relationUpdate.init(groupId); }); }, //感知树节点被点击 treenodeclick(data, node, component) { //只有3级分类被点击，才会查询 if (node.level == 3) { this.catId = data.catId; this.getDataList(); //重新查询 } }, getAllDataList(){ this.catId = 0; this.getDataList(); }, // 获取数据列表 getDataList() { this.dataListLoading = true; this.$http({ url: this.$http.adornUrl(`/prodect/attrgroup/list/${this.catId}`), method: "get", params: this.$http.adornParams({ page: this.pageIndex, limit: this.pageSize, key: this.dataForm.key }) }).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.page.list; this.totalPage = data.page.totalCount; } else { this.dataList = []; this.totalPage = 0; } this.dataListLoading = false; }); }, // 每页数 sizeChangeHandle(val) { this.pageSize = val; this.pageIndex = 1; this.getDataList(); }, // 当前页 currentChangeHandle(val) { this.pageIndex = val; this.getDataList(); }, // 多选 selectionChangeHandle(val) { this.dataListSelections = val; }, // 新增 / 修改 addOrUpdateHandle(id) { this.addOrUpdateVisible = true; this.$nextTick(() => { this.$refs.addOrUpdate.init(id); }); }, // 删除 deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.attrGroupId; }); var names = name ? [name] : this.dataListSelections.map(item => { return item.name; }); this.$confirm( `确定对[name=${names.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" } ).then(() => { this.$http({ url: this.$http.adornUrl("/prodect/attrgroup/delete"), method: "post", data: this.$http.adornData(ids, false) }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.getDataList(); } }); } else { this.$message.error(data.msg); } }); }); } } }; </script> <style scoped> </style>attrgroup-add-or-update.vue内容如下：
<template> <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose" > <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" > <el-form-item label="组名" prop="attrGroupName"> <el-input v-model="dataForm.attrGroupName" placeholder="组名"></el-input> </el-form-item> <el-form-item label="排序" prop="sort"> <el-input v-model="dataForm.sort" placeholder="排序"></el-input> </el-form-item> <el-form-item label="描述" prop="descript"> <el-input v-model="dataForm.descript" placeholder="描述"></el-input> </el-form-item> <el-form-item label="组图标" prop="icon"> <el-input v-model="dataForm.icon" placeholder="组图标"></el-input> </el-form-item> <el-form-item label="所属分类" prop="catelogId"> <!-- <el-input v-model="dataForm.catelogId" placeholder="所属分类id"></el-input> @change="handleChange" --> <!-- <el-cascader filterable placeholder="试试搜索：手机" v-model="catelogPath" :options="categorys" :props="props"></el-cascader> --> <!-- :catelogPath="catelogPath"自定义绑定的属性，可以给子组件传值 --> <category-cascader :catelogPath.sync="catelogPath"></category-cascader> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">确定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { props:{ value:"catId", label:"name", children:"children" }, visible: false, categorys: [], catelogPath: [], dataForm: { attrGroupId: 0, attrGroupName: "", sort: "", descript: "", icon: "", catelogId: 0 }, dataRule: { attrGroupName: [ { required: true, message: "组名不能为空", trigger: "blur" } ], sort: [{ required: true, message: "排序不能为空", trigger: "blur" }], descript: [ { required: true, message: "描述不能为空", trigger: "blur" } ], icon: [{ required: true, message: "组图标不能为空", trigger: "blur" }], catelogId: [ { required: true, message: "所属分类id不能为空", trigger: "blur" } ] } }; }, components:{CategoryCascader}, methods: { dialogClose(){ this.catelogPath = []; }, getCategorys(){ this.$http({ url: this.$http.adornUrl("/prodect/category/list/tree"), method: "get" }).then(({ data }) => { this.categorys = data.data; }); }, init(id) { this.dataForm.attrGroupId = id || 0; this.visible = true; this.$nextTick(() => { this.$refs["dataForm"].resetFields(); if (this.dataForm.attrGroupId) { this.$http({ url: this.$http.adornUrl( `/prodect/attrgroup/info/${this.dataForm.attrGroupId}` ), method: "get", params: this.$http.adornParams() }).then(({ data }) => { if (data && data.code === 0) { this.dataForm.attrGroupName = data.attrGroup.attrGroupName; this.dataForm.sort = data.attrGroup.sort; this.dataForm.descript = data.attrGroup.descript; this.dataForm.icon = data.attrGroup.icon; this.dataForm.catelogId = data.attrGroup.catelogId; //查出catelogId的完整路径 this.catelogPath = data.attrGroup.catelogPath; } }); } }); }, // 表单提交 dataFormSubmit() { this.$refs["dataForm"].validate(valid => { if (valid) { this.$http({ url: this.$http.adornUrl( `/prodect/attrgroup/${ !this.dataForm.attrGroupId ? "save" : "update" }` ), method: "post", data: this.$http.adornData({ attrGroupId: this.dataForm.attrGroupId || undefined, attrGroupName: this.dataForm.attrGroupName, sort: this.dataForm.sort, descript: this.dataForm.descript, icon: this.dataForm.icon, catelogId: this.catelogPath[this.catelogPath.length-1] }) }).then(({ data }) => { if (data && data.code === 0) { this.$message({ message: "操作成功", type: "success", duration: 1500, onClose: () => { this.visible = false; this.$emit("refreshDataList"); } }); } else { this.$message.error(data.msg); } }); } }); } }, created(){ this.getCategorys(); } }; </script>这里的属性分组是根据3级分类id带出来的，所以需要个可以根据3级分类id，来带出相应属性的接口，修改webshop-prodect项目中：
AttrGroupController类：
@RestController @RequestMapping("prodect/attrgroup") public class AttrGroupController { @Autowired private AttrGroupService attrGroupService; /** * 搜索3级分类的属性列表 */ @RequestMapping("/list/{catelogId}") //@RequiresPermissions("prodect:attrgroup:list") public R list(@RequestParam Map<String, Object> params, @PathVariable Long catelogId) { PageUtils page = attrGroupService.queryPage(params, catelogId); return R.ok().put("page", page); } }AttrGroupService类：
import com.baomidou.mybatisplus.extension.service.IService; import com.jiejie.common.utils.PageUtils; import com.jiejie.webshop.prodect.entity.AttrGroupEntity; import java.util.Map; /** * 属性分组 * * @author ${author} * @email jiejie@gmail.com * @date 2020-06-02 23:44:05 */ public interface AttrGroupService extends IService<AttrGroupEntity> { PageUtils queryPage(Map<String, Object> params); /** * 重载queryPage方法 * * @param params 参数 * @param catelogId 分类id * @return */ PageUtils queryPage(Map<String, Object> params, Long catelogId); } }AttrGroupServiceImpl类：
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.jiejie.common.utils.PageUtils; import com.jiejie.common.utils.Query; import com.jiejie.webshop.prodect.dao.AttrGroupDao; import com.jiejie.webshop.prodect.entity.AttrGroupEntity; import com.jiejie.webshop.prodect.service.AttrGroupService; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; import java.util.Map; @Service("attrGroupService") public class AttrGroupServiceImpl extends ServiceImpl<AttrGroupDao, AttrGroupEntity> implements AttrGroupService { @Override public PageUtils queryPage(Map<String, Object> params) { IPage<AttrGroupEntity> page = this.page( new Query<AttrGroupEntity>().getPage(params), new QueryWrapper<AttrGroupEntity>() ); return new PageUtils(page); } @Override public PageUtils queryPage(Map<String, Object> params, Long catelogId) { if (catelogId == 0) { IPage<AttrGroupEntity> page = this.page( new Query<AttrGroupEntity>().getPage(params), new QueryWrapper<AttrGroupEntity>()); return new PageUtils(page); } else { //这步多做个支持组名和分组id模糊搜索 String key = (String) params.get("key"); QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>().eq("catelog_id", catelogId); if (!StringUtils.isEmpty(key)) { wrapper.and((obj) -> { obj.eq("attr_group_id", key).or().like("attr_group_name", key); }); } IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params), wrapper); return new PageUtils(page); } } }打开后台管理系统-商品系统-平台属性-属性分组-手机-手机通讯-手机，该3级分类的id为225，查看是否有数据，结果如下： 数据库数据如下： 分类属性分组查询接口前后端调试成功。
