关于element-ui cascader级联选择器，选择任意一级选项设置默认值的问题

最新推荐文章于 2024-07-30 10:27:19 发布
最新推荐文章于 2024-07-30 10:27:19 发布
阅读量8.6k 收藏 5
点赞数 2
分类专栏： 前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shirlene_fan/article/details/106890276
版权

element-ui cascader默认单选只能选择叶子节点，也就是最末端的节点，目前客户需要所有节点可选，这个element-ui cascader的api提供了解决方案，但同时留了个坑

在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。——by Element原文
写上后是这样的：

多了个选择框并且只能点选择框选中，这样看似乎没啥问题，但是。。。。。你会发现原来的默认值不能用了，正常情况下的单选，你只要给一个id就能给你找到对应的叶子节点
这个情况，它需要你提供从父级到子级所有对应id的数组，如果确定层级只有两级是没啥问题，糟糕在你不确定这数组到底有几级，就只能用递归的法子解决

//递归组织树获取默认值数组
    getArr(dataSource, id)
最低0.47元/天 解锁文章
shirlene_fan
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
qq_40184218的博客
08-09 5335
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
关于element-ui el-cascader 级联选择器 单独选择任意一级选项，去掉单选按钮（记录一下）
兔子骑着乌龟跑
03-30 1175
代码如下： 单独选择任意一项属性 checkStrictly ， 绑定的是分类 id popper-class自定义类名。修改样式：不能加 scope 也可以放在全局样式上，要修改的样式前面要加上自定义的样式名。
关于element的cascader级联选择器，选择任意一级选项，设置默认值及回显的问题
rhcjqmm666的博客
12-07 7031
关于element的cascader级联选择器，选择任意一级选项，设置默认值及回显的问题
el-cascader级联选择器遇到的两个bug
zhw1984974676的博客
06-03 443
但是我们并不知道有几级数据，可以用递归进行遍历，只要是空数据就转化成undefined。
仿element-ui cascader级联选择器，layui cascader级联选择器
一夏coco的博客
09-09 4557
前言 由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！ 使用示例 引入 <html> <head> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> <link r
element-ui Cascader级联选择框 回显问题
热门推荐
yummry的博客
07-12 1万+
element的Cascader，好用是好用。但是，对于后台接口只保存了选中那一项的数据来说，回显来说是个问题。 问题 级联框回显 解決 解决回显问题，首先要了解回显的要求， api并没有对value格式有要求，但是我一般用数组盛放，所以我的格式是：[1,2,3,4]，这种，选择完成后是每一级选择的value，但是要保存的不一定是全部，可能只是数组最后一位，比如省市级这种，可能最后只要...
element-ui el-cascader 级联选择器 联动默认值
qq_38468358的博客
04-29 1万+
在使用 element-ui 的 el-cascader 组件根据后台返回的数据，需要展示一个默认值，官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader借鉴了一下，话不多说直接上代码： 效果图： 代码块： <template> <div class="block"> ...
element-ui中 Cascader级联选择器实现一级单选，二级多选
qq_44417271的博客
04-30 1万+
可通过 props.multiple = true 来开启多选模式 <el-cascader v-show="ifxianshi == 1 && paddinglaiyuan" ref="myCascader" :options="options" :props="{ multiple: true, checkStrictly: true }" clearable collapse-tags styl
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...
element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata
02-06
Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： 部门名称： prop=deptId> 请选择部门 props=depShowType options=deptData v-model=...
Element Cascader 级联选择器的使用示例
10-15
Element Cascader 是一个在前端开发中常用的组件，尤其在基于 Vue.js 的项目中，它被用于实现级联选择的功能。这个组件允许用户从一组层级结构的数据中进行选择，例如省份-城市-区县的选择，或者组织架构的部门选择...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 859
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1168
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 1023
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
Vue 状态管理 & Vue CLI
yolo
07-24 929
1、状态管理 2、集中状态管理 2.1 Vuex 2.1.1 Vuex核心概念 2.1.2 Vuex Store实例 2.1.3 Vuex Getter 2.1.4 Vuex Mutation 2.1.4 Vuex Actions 2.1.4 Vuex Module 2.2 Pinia 2.2.1功能增强 3、Vuex 实现原理 4、Pinia 实现原理 5、CLI 5.1 实现
【分享】前端程序员-技术网站推荐
最新发布
一位前行者的博客
07-30 800
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
element ui级联选择器显示默认数据
04-27
要在 Element UI 级联选择器中显示默认数据，需要在父级组件中设置 `v-model` 的初始值。例如，如果你的级联选择器有三级，可以这样设置： ```html <el-cascader v-model="selectedOptions" :options="options" ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值