后端踩个坑，element-ui级联框顶级无法选择，二级三级不显示的问题

已于 2023-07-31 14:16:38 修改
阅读量1.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript java
于 2022-09-09 20:56:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44273409/article/details/126788899
这篇博客主要探讨了Element UI级联选择框遇到的两个问题：顶级选项无法被选中和二级、三级选项不显示。针对这些问题，提出了前端和后端的解决方案。前端解决方案是在级联选择框组件中设置`checkStrictly: true`属性。后端问题源于查询结果中子节点数据缺失，解决办法是确保实体的子节点变量名命名为`children`。通过这些调整，成功解决了级联选择框的显示和选择问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

后端踩个坑，element-ui级联框顶级无法选择，二级三级不显示的问题

级联框顶级无法选中的问题，

在这里插入图片描述这里顶级无法选中。两种解决方式

1、前端解决，在

在这里插入图片描述
加上checkStrictly:true,
在这里插入图片描述解决

2、后端解决

实体在这里插入图片描述
sql
在这里插入图片描述问题，因为查出来的子节点下没有子节点了，那么这个集合就是空的
所以前端展示的就是这个节点后面的一个‘’字符串。导致子节点是空无法选中，父节点也无法选。

解决方法，在这里插入图片描述

二级三级不显示的问题

这是一开始查处的数据，
在这里插入图片描述
可以看到这里是有两个子节点的，结构也没问题，但是始终没有子节点选项在这里插入图片描述

解决方法：

这个子节点的返回值变量名必须名为children，才行

就是将实体的变量名改为children在这里插入图片描述看结果↓
在这里插入图片描述

在这里插入图片描述成功显示
还有一种是前端可以解决，在elementui里面找到某个属性指定一下，这里我不太明白就不研究了

element-ui级联选择器中二三级列表无法显示的解决办法
代码在路上的博客
02-27 1176
记： <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable> </el-cascader> cascaderProps: { expandTrigger: 'hover', checkStrictly: t
java接口返回el-cascader级联所需格式的返回值
feixue8823的博客
04-25 1234
查询出全部数据放到List，然后利用递归转换成el-cascader级联所需格式的返回值。
记录element-ui级联选择器，二级三级列表无法显示的解决办法
qq_45654741的博客
08-12 1738
<!-- 选择商品分类的级联选择框 --> <el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="selectedCateKeys" @change="handleChange"> </el-cascader>
elementUI中级联选择器样式没有反应的问题
inzv520的博客
06-09 835
elementUI中级联选择器样式没有反应的问题问题简介elementUI npm i element-ui -S解决方法 问题简介 当点击级联选择器时是三个面板都在同一个面板，直接是从上面往下展开的，而且背景颜色都有改变，只有级联选择器的展开效果不显示。 elementUI npm i element-ui -S 当时以为没有安装element 所以运行了一下npm i element-ui -S，但是没有效果在main.js文件里也都注册了，但是没有反应。 解决方法 突然想到这个项目有可能是CDN引
elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题
热门推荐
fuhegegnw的博客
06-15 1万+
1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件，这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级，那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。 2.问题来了。。。 设计师不想要前面的单选按钮，并且直接点击lable即可选中效果。 （1）想办法把单选按钮拿掉，第一时间想到的办法就是css将其隐藏 .el-radio { color: #606266
element-ui 中Dialog 对话框,多选框第一次能选中,点另外一个第二次不显示选中
weixin_46214579的博客
09-05 806
下面多选框第一次能渲染,多次不能够正常渲染。element-ui 对话框 初始化
SpringCloud电商项目开发完整流程
web15085599741的博客
07-31 849
vue在新建.vue项目的时候可以选择模板，因此我们自定义一个模板可以事半功倍。点击自定义模板即可去自己定义。
这个疯子整理的十万字Java面试题汇总，终于拿下40W offer！（JDK源码+微服务合集+并发编程+性能优化合集+
m0_67401134的博客
07-23 2978
Spring框架是一个为Java应用程序的开发提供了综合、广泛的基础性支持的Java平台。Spring帮助开发者解决了开发中基础性的问题,使得开发人员可以专注于应用程序的开发。Spring框架本身亦是按照设计模式精心打造,这使得我们可以在开发环境中安心的集成Spring框架,不必担心Spring是如何在后台进行工作的。Spring框架至今已集成了20多个模块。这些模块主要被分如下图所示的核心容器、数据访问/集成,、Web、AOP(面向切面编程)、工具、消息和测试模块。...
<template> <div class="app-container"> <!-- 操作工具栏 --> <div class="mb-4"> <el-button type="primary" @click="showFormDialog()">新增分类</el-button> </div> <!-- 树形表格 --> <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border style="width: 100%" > <el-table-column prop="id" label="ID" width="80"> <template #default=“{ row }”> <template v-if=“row.children && row.children.length > 0”> {{ row.id }} </template> <span v-else class=“empty-id”></span> </template> </el-table-column> <el-table-column prop=“title” label=“分类名称” /> <el-table-column label=“操作” width=“180” align=“center”> <template #default=“{ row }”> <el-button type=“primary” size=“small” @click=“showFormDialog(row.id)” >修改</el-button> <el-button type=“danger” size=“small” @click=“handleDelete(row.id)” >删除</el-button> </template> </el-table-column> </el-table> <!-- 表单对话框 --> <el-dialog v-model="formVisible" :title="currentId ? '修改分类' : '新增分类'" width="30%" > <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" > <el-form-item label="分类名称" prop="title"> <el-input v-model="form.title" placeholder="请输入分类名称" /> </el-form-item> </el-form> <template #footer> <el-button @click="formVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template>要求点击新增分类时弹出的对话框里再加一个上级选择,用select树形结构数据展示,给出vue3的全部代码
最新发布
03-22
嗯，用户给了一个Vue的模板，想要在点击新增分类时，弹出的对话框里增加一个上级分类的选择，用树形结构的Select组件展示。我需要帮他们实现这个功能。首先，我得仔细看看用户提供的现有代码结构。 用户使用的是...
element ui树形控件节点选择限制
heartandwater的博客
02-06 3186
树形控件本来是做好了的，这里要称赞一下element ui确实好用 我本来还想自己加一个搜索功能，但是过滤后怎么保证数据结构我不太清楚，于是多看了几眼，它本身自带过滤 后来又需要加上只能选择最后一级和单个节点限制，于是去看了相关文章，照搬着搬过来了 确实能用，不过又差一点东西，之前大佬还让我用回调函数传参，就是调用回调函数，其实我还是不会，联想到elementUI的事件回调参数，应该就是那个意思，虽然不会写，但是直接用就行了 //事件绑定 <el-tree :data="trees"
vue-element设置三级菜单栏，页面空白解决办法
changyana的博客
12-26 2621
设置二级的时候，页面都可以正常加载，然后把二级可以加载出的页面放在三级菜单栏后，加载出来就是空白的了，什么都没有，在控制台看，app-main里的内容什么都没有，不会渲染出页面。
使用element发现二级菜单无法勾选的问题
Cq23y的博客
12-14 841
如果不选择父菜单会导致数据库中没有父菜单，后端返回动态菜单的时候就查询不到子菜单了。解决办法：增加属性check-strictly。只选一个子菜单就选不中父菜单。
element的Cascader级联选择器点击文字选中后回显点击事件失效
qq_37150922的博客
03-21 995
【代码】element的Cascader级联选择器点击文字选中后回显点击事件失效。
记录elementui级联选择器选择父节点后不能选择后代节点
m0_60835161的博客
06-14 2932
根据项目需要，利用elementui的级联选择器，要求实现选择父节点之后，不能选择父节点后的所有后代节点。 既然使用了级联选择器，那么数据格式必须是正确的JSON树，根据elementui官方文档示例配置，即可渲染出级联选择器。通过查看文档可以知道要控制某个节点可不可以选择实际就是控制这个节点的disabled属性。因此，在选中某一个节点后，我们只需要把当前节点的子节点及所有后代节点的disabled属性设置为true即可。直接上代码吧。............
解决Vue+elementUi级联选择器选择任意一级选项不点击圆点选中
weixin_44668640的博客
08-12 1286
解决Vue+elementUi级联选择器选择任意一级选项不点击圆点选中 在项目中遇到的选择地区任意一级（省市），必须点击圆点才能选中 解决方法: 在mounted中加上下面代码 setInterval(function() { // 解决级联选择器不点击圆点选中元素问题 document.querySelectorAll(".el-cascader-node__label").forEach(el => { el.onclick = function() {
elementUI实现三级级联实现，不可以选中问题
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
12-29 752
三级联动选不中问题
bug：点击element的级联选择器 级联面板偶尔不显示 触发条件未知
bydfguifd的博客
06-01 790
点击element的级联选择器 级联面板偶尔不显示
elment el-menu当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover三级菜单后，二级菜单无法自动收回
qq_38778882的博客
04-24 744
参考文章：https://blog.csdn.net/ych6666/article/details/122539355。将el-submenu的属性 popper-append-to-body去掉。
element-ui 二级联动 选择器 无法选择 或者 显示错误 异常
yssa1125001的博客
05-18 1327
刚开始的配制如下： <el-form-item label="所属分类"> <el-select v-model="courseInfo.subjectParentId" @change="firstChange" placeholder="请选择一级分类"> <el-option v-for="item in oneList" :key="item.id" .
element-ui级联选择器源码
02-13
另外值得注意的一点是，如果遇到类似“找不到模块‘element-ui’或其相应的类型声明”的错误提示，则可能是因为开发环境中缺少必要的 TypeScript 类型定义文件或是配置不正确所引起的，并不是因为 SwiftUI 或其他...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值