✅P73_属性分组-分组新增-级联选择器

分类属性组新增

注意：导入组件1的名字在被2新增弹框引入使用，且3初始化时，名称必须对应，否则新增弹窗打不开

级联选择器

我们要实现在新增时，“所属分类”是级联选择器下拉出来的，而不是手动填写

参考：Cascader 级联选择器->基础用法

只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

具体实现：

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

  //:options="categories",options属性指定选项数组即可渲染出一个级联选择器
  <el-form-item label="所属分类" prop="catelogId">
    <el-cascader v-model="dataForm.catelogIds" :options="categories"></el-cascader>
  </el-form-item>

定义categories，用于存放的需要渲染的数据

    return {
      categories: [], //:options="categories",options属性指定选项数组即可渲染出一个级联选择器
	}

获取categories，调用后台获取三级分类接口，方法如下：

  methods: {
	getCategories() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({ data }) => {
        console.log("获取三级分类数据:", data);
        this.categories = data.data;
      });
    },
  }

组件创建后就要去获取数据，

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCategories();
  },

此时页面渲染效果，

问题原因：未将数组的属性值封装进props的属性值

参考：Cascader 级联选择器->Props

封装props的属性值：:props="props"

<el-cascader v-model="dataForm.catelogIds" :options="categories" :props="props"></el-cascader>

  data() {
    return {
      props: {
        value: "catId", //指定选项的值为选项对象的某个属性值
        label: "name",  //指定选项标签为选项对象的某个属性值(页面分类数据category对象的name字段)
        children: "children" //指定选项的子选项为选项对象的某个属性值(页面分类数据category对象的children)
      }
    }
  }

此时的效果

出现原因：手机的children是一个空数组，级联选择器会对空数组进行一个渲染

解决方案：如果children属性为空的话后台，后台不发送数据到前端

cfmall-product/src/main/java/com/gyz/cfmall/product/entity/CategoryEntity.java

	/**
	 * 所有子分类
	 * @JsonInclude 有子节点才返回该字段信息
	 * Include.ALWAYS：默认策略，始终包含此属性
	 * Include.NON_NULL:不为空时包含此属性
	 * Include.NON_EMPTY:不为空、空字符串、空容器等情况时包含此属性
	 */
	@JsonInclude(JsonInclude.Include.NON_EMPTY)
	@TableField(exist = false)
	private List<CategoryEntity> children;

最终效果

打开控制台发现报错，

catelogId应该为数组形式，得到的却是一个数字，将catelogId改为数组

dataForm: {
        catelogId: []
		//......
      },

通过控制台可得知catelogId[]存储的是：选中的结点的catId、其父结点的catId、以及父节点的父节点的catId，

而我们只要选中结点的catId，即数组最后一个catId

定义catelogIds[]存储以上三个分类的catId，catelogId：默认为0，用于封装修改回显属性组的catelogId，

      <el-form-item label="所属分类" prop="catelogId">
        <el-cascader v-model="dataForm.catelogIds" :options="categories" :props="props"></el-cascader>
      </el-form-item>

      dataForm: {
        catelogId: 0,
        catelogIds: [], //保存父节点和子节点的id
        //其它代码略...
      },

至此完成分类属性新增功能！

遇到问题

在填写完相关信息后，点击确定，所属分类校验一直提示为空，但是控制台打印的catelogId:225

问题解决：注意catelogId初始值应为0，先前是字符串形式，导致一直校验失败