谷粒商城day52 -商品服务-API-属性分组-分组修改&级联选择器回显

1.添加catelogIds字段

因为我们分组修改页面,实际分类ID显示是一个分类数组  

在实体类中添加字段

2.后端实现

controller层

    @RequestMapping("/info/{attrGroupId}")
    public R info(@PathVariable("attrGroupId") Long attrGroupId){
		AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);

        //根据当前分类获取其分类父分类组合
        attrGroup.setCatelogIds(categoryService.getCatelogIds(attrGroup.getCatelogId()));

        return R.ok().put("attrGroup", attrGroup);
    }

service层

CategoryServiceImpl
    @Override
    public Long[] getCatelogIds(Long catelogId) {
        ArrayList<Long> arrayList = new ArrayList<>();

       return getCategoryArray(catelogId,arrayList);
    }

   public Long[] getCategoryArray(Long catelogId,ArrayList<Long> arr){
        arr.add(catelogId);
       CategoryEntity categoryEntity = this.getById(catelogId);
       if(categoryEntity.getParentCid() != 0 )
       {
           getCategoryArray(categoryEntity.getParentCid(),arr);
       }

       Collections.reverse(arr);

       return arr.toArray(new Long[]{});
    }

3.测试成功

修改时分类成功带出来了

 4.弹窗关闭时分类置为空

如下

添加监听 

 

方法,将分类数组置为空

el-cascader 是 Element UI 中的一个组件,用于实现级联选择器的功能。在使用过程中,如果需要修改或更新级联选择器回显数据,通常需要根据你的具体应用场景来编写相应的代码。 以下是一个基本的步骤说明,用于修改 el-cascader 组件的回显数据: 1. 准备数据源:首先需要确保你有一个可以用来进行级联的数据源。这个数据源通常是多层级的数组或对象数组。 2. 绑定数据到级联选择器:将准备好的数据源通过 `v-model` 绑定到 el-cascader 的 `value` 属性上,这将决定级联选择器回显值。 3. 更新数据源:在某些情况下,你可能需要根据用户的选择或者其他操作来更新数据源。这可以通过组件的事件(例如 `change` 事件)来实现。 4. 触发更新:一旦数据源更新,如果需要修改回显的值,你可以通过修改绑定的 `value` 属性来触发级联选择器的更新。 示例代码(Vue.js): ```html <template> <el-cascader v-model="value" :options="options" @change="handleChange" ></el-cascader> </template> <script> export default { data() { return { value: [], // 绑定的回显值 options: [ // 级联选择器的选项数据源 { value: 'zhejiang', label: '浙江', children: [ { value: 'hangzhou', label: '杭州', children: [ { value: 'xihu', label: '西湖区' }, { value: 'binjiang', label: '滨江区' } ] } ] }, // 更多选项... ] }; }, methods: { handleChange(value) { // 当选择器的值改变时会触发这个方法 // 这里可以根据需要处理数据更新 // 更新完成后,value 的值会自动更新回 el-cascader 组件 } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我才是真的封不觉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值