el-cascader选择器无法选中

在谷粒商城的代码中,由于缺少@JsonInclude(JsonInclude.Include.NON_EMPTY)注解,导致选择器最后一级出现空白,无法被选中。此注解用于指示当属性为空或null时,在序列化时不包含该属性。将其添加到CategoryEntity的children字段可以修复此问题,如果放在类级别,则会影响所有属性。
摘要由CSDN通过智能技术生成

问题描述

提示:谷粒商城中,点击选择器的最后一级会出现空白,导致无法选中

@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<CategoryEntity> children;

原因分析:

要在实体类的children加@JsonInclude(JsonInclude.Include.NON_EMPTY)注解。

表示如果该属性为空字符串或者为null则都不参与序列化 。如果放在类上边,那对这个类的全部属性起作用。

 

el-cascader 是 Element UI 库中的一个组件,它是级联选择器,用于选择具有父子关系的数据。在 Element UI 中,点击文字选中是级联选择器的默认行为。当用户点击某一级别的选项时,如果该选项下还有子级选项,将展开子级列表供用户继续选择;如果已经是叶子节点,则表示选中该选项。 要实现点击文字选中的效果,可以按照以下步骤操作: 1. 引入 el-cascader 组件并在页面中使用它。 2. 配置 el-cascader 的 `props` 属性,如 `options` 属性,提供级联的数据源。 3. 确保级联数据格式正确,每个选项都应该包含 `value`(用于标识选中状态的值)、`label`(显示的文本)、`children`(子级选项数组,叶子节点则不需要此属性)。 4. 绑定选中值,通常使用 `v-model` 双向绑定一个变量到 el-cascader 的 `value` 属性。 5. 用户点击选项时,el-cascader 会自动处理选中逻辑,并更新绑定的变量。 使用示例代码如下: ```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) { console.log(value); }, }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值