第二十章第四节：属性分组的新增页面级联查询分类

请求：/product/category/list/tree

响应数据示例：
{
	"code": 0,
	"msg": "success",
	"data": [{
		"catId": 1,
		"name": "图书、音像、电子书刊",
		"parentCid": 0,
		"catLevel": 1,
		"showStatus": 1,
		"sort": 0,
		"icon": null,
		"productUnit": null,
		"productCount": 0,
		"children": []
	}]
}

操作数据库表：pms_category

1、在属性分组的添加修改页加入级联组件(elementUI)

src\views\modules\product\attrgroup-add-or-update.vue

<el-form-item label="所属分类id" prop="catelogId">
  <!-- <el-input v-model="dataForm.catelogId" placeholder="所属分类id"></el-input> -->
  <!-- 
    v-model:绑定的值
    :options：要显示的数据集
    :props：显示规则的配置
    filterable：可搜索
   -->
  <el-cascader v-model="dataForm.catelogId" :options="categorys" :props="props" filterable placeholder="试试搜索：手机"></el-cascader>
</el-form-item>

2、定义数据集变量以及显示规则

//菜单数据集
categorys: [],
//级联菜单显示规则
props:{
  value:"catId", //三级分类提交的值
  label:"name",//三级分类显示的值
  children:"children"//三级分类的子集
},

3、编写查询菜单数据集的方法

//获取菜单数据
getCategorys() {
  this.$http({
    //请求的url
    url: this.$http.adornUrl("/product/category/list/tree"),
    //请求方式
    method: "get"
    //成功以后的对数据的处理，把数据打印测试 ({data}):解构表达式
  }).then(({ data }) => {
    console.log("成功获取数据：" + data.data);
    // 把获取到的数据赋值给menus
    this.categorys = data.data;
  });
},

4、自动加载获取菜单数据的方法

//当前组件被创建时初始化品牌数据
created() {
  this.getCategorys();
},

5、效果浏览（但会在最后出现空白级）

6、解决空白级

找到CategoryEntity实体类，给children属性增加空集合不返回的注解

com.applesnt.onlinemall.product.entity.CategoryEntity

/*子分类，注解表示在数据库中不存在这个字段*/
@TableField(exist = false)
/*空集合不要返回*/
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<CategoryEntity> children;

7、解决提交表单时的分类数据问题

虽然现在分类数据可以正常回显，但提交时我们只需要第三级的id，而现在一二三级的id都会提交

1:在dataForm里面定义一个数据让级联组件绑定

dataForm: {
  attrGroupId: 0,
  attrGroupName: '',
  sort: '',
  descript: '',
  icon: '',
  //让级联组件绑定一个数组
  catelogPath: [],
  catelogId:0
},

2:修改级联组件绑定的变量：catelogPath

<el-cascader v-model="dataForm.catelogPath" :options="categorys" :props="props" filterable placeholder="试试搜索：手机"></el-cascader>

3:修改表单提交数据（dataFormSubmit方法）时catelogId的值

//获取级联组件绑定的数组里最后一个值
'catelogId': this.dataForm.catelogPath[this.dataForm.catelogPath.length-1]

最终效果图：