位置: IT常识 - 正文

Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级(elementui级联选择器清空方法)

编辑:rootadmin
Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级

推荐整理分享Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级(elementui级联选择器清空方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui级联选择器获取当前选中的值,elementui级联选择器获取当前选中的值,element UI级联选择左侧,elementui级联选择器获取当前选中的值,elementui级联选择器清空方法,elementui级联选择器 数据过大,element UI级联选择左侧,elementui级联选择器,内容如对您有帮助,希望把文章链接给更多的朋友!

这个需求有点多选与单选结合的意思,同一父级下的子节点单选,又可以选择多个不同父级下的节点。这里以两级为例,实现一个在多选模式下,同一父级下最多只能选中一个子级的级联选择器。

1、隐藏父级节点处的CheckBox

多选模式下可以通过勾选父级一键选中所有的子级,而每个父级下可能有多个子级,也可能只有一个,起初我想的是根据本次选择选中的个数分类讨论,但讨论起来比较繁琐,所以最后决定直接把父级的checkbox隐藏掉,不让用户直接勾选父级,减少了很多不必要的麻烦。

.hide { .el-cascader-menu:first-of-type { .el-cascader-node { .el-checkbox { display: none; } } }}

这里需要注意的一点是hide类名必须使用级联选择器中的popper-class来添加自定义浮层类名的。

 2、对选中的项进行筛选限制,先找到本次新增的项,和新增前的值进行对比,看是否存在与本次新增的项同属于一个父级的,如果存在则删除之前已经存在的那一项,留下本次新增的。

这里的解决花费了我很多时间,因为一开始想着直接操作级联选择器绑定值,删除掉不要的那一项就可以了,但问题出现了。绑定的值确实达到了我想要的效果(即删除之前已经存在的那一项,留下本次新增的),但级联面板中右侧的部分(即子节点部分),会自动刷新跳转到第一个父级下的子级面板,用户体验差,尝试解决,没解决掉。。。

最后,选择从另外一个角度来实现,如果存在与本次新增的项同属于一个父级的,则直接通过js触发点击事件,取消勾选之前已经存在的那一项。

Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级(elementui级联选择器清空方法)

有了思路以后就可以一步一步来实现了。

首先找到本次新增的这一项,由于组件库文档中级联选择器这一块并没有提供相关的办法获取到最新选择的一项,只能拿到已选择的所有值,并且级联选择器新增的项并不是直接push到绑定值的末尾,而是按选项值在页面上展示的顺序添加的,所以只能手动去对比查找,需要定义一个preValue数组来存储上一次的值。

let newIndex;let i = 0, j = 0;while (i < val.length && j < this.preValue.length) { if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) { i++; j++; } else { //添加在中间的情况 newIndex = i; break; }}//添加在末尾的情况if (j === this.preValue.length) { newIndex = i;}

找到新增项后,再去对比在此之前是否添加过于新增项同一父级下的其他子级。

let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);

如果存在的话,接下来就需要去触发相应的点击事件取消这一项的勾选。

我们先来观察一下html结构,右侧面板下的各个li标签的id值其实就是右侧面板id值加上:'-'+index,因此我们只需要拿到右侧面板id值就能知道对应选项的id值,再触发li标签的孩子标签中的checkbox的点击事件就可以了。

 右侧面板id通过级联选择器的引用可以拿到,另外需要求得取消勾选选项的index,通过与级联选择器选项值对比得到。

let cancelIndex;for (let i = 0; i < this.options.length; i++) { if (this.options[i].value === val[delIndex][0]) { for (let j = 0; j < this.options[i].children.length; j++) { if (this.options[i].children[j].value === val[delIndex][1]) { cancelIndex = j; break; } } break; }}

获取id值。

this.$nextTick(() => { let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板 let liId = document.getElementById(panelId + '-' + cancelIndex); liId.children[0].click(); })

到这里就基本完成了这个需求,其实不难,但因为一开始自己的思路(直接删值)实现起来出现了问题,想着去解决花费了很多时间,也没解决掉,最后和同事讨论换一种思路很快就实现了,所以思路变通是非常重要的~

3、完整代码

<template> <div class='test'> <el-cascader class='cascader' :options='options' :props='props' clearable :popper-class="'hide'" @change='handleChange' ref='cascade' ></el-cascader> </div></template><script>export default { name: 'Cascader', data() { return { props: { multiple: true, expandTrigger: 'click' }, options: [{ value: 1, label: '杭州', children: [{ value: 3, label: '西湖' }, { value: 4, label: '钱塘' }, { value: 7, label: '上城' }] }, { value: 2, label: '成都', children: [{ value: 5, label: '青羊' }, { value: 6, label: '武侯' }] }], preValue:[] } }, methods:{ handleChange(val){ if (this.preValue.length > 0 && val.length > this.preValue.length) { let newIndex; let i = 0, j = 0; while (i < val.length && j < this.preValue.length) { if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) { i++; j++; } else { //添加在中间的情况 newIndex = i; break; } } //添加在末尾的情况 if (j === this.preValue.length) { newIndex = i; } let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]); if (delIndex >= 0) { // 取消选择的节点 let cancelIndex; for (let i = 0; i < this.options.length; i++) { if (this.options[i].value === val[delIndex][0]) { for (let j = 0; j < this.options[i].children.length; j++) { if (this.options[i].children[j].value === val[delIndex][1]) { cancelIndex = j; break; } } break; } } this.$nextTick(() => { let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板 let liId = document.getElementById(panelId + '-' + cancelIndex); liId.children[0].click(); }) val[delIndex] = ''; val = val.filter(item => item !== ''); } } this.preValue = val; } }};</script><style lang='less'>.test { text-align: center; margin-top: 200px; .title { display: block; margin-bottom: 20px; } .cascader { .el-input__inner { width: 362px; } .el-cascader__tags { display: flex; flex-wrap: nowrap; overflow-y: overlay; margin-left: 2px; } .el-cascader__tags::-webkit-scrollbar { width: 0; height: 3px; } /*定义滚动条轨道 内阴影+圆角*/ .el-cascader__tags::-webkit-scrollbar-track { background-color: rgba(186, 203, 227, 0.3); } /*定义滑块 内阴影+圆角*/ .el-cascader__tags::-webkit-scrollbar-thumb { background-color: #B3C2D7; } }}.hide { .el-cascader-menu:first-of-type { .el-cascader-node { .el-checkbox { display: none; } } }}</style>

如果大家有更好的解决办法或优化,欢迎评论区讨论~

本文链接地址:https://www.jiuchutong.com/zhishi/293093.html 转载请保留说明!

上一篇:微信小程序登录方法,授权登陆及获取微信用户手机号(微信小程序登录后端)

下一篇:ROS2+cartographer+激光雷达+IMU里程计数据融合(robot_locazation) 建图

  • hp笔记本bios设置图解教程(hp笔记本bios设置)(hp笔记本bios设置无线网卡)

    hp笔记本bios设置图解教程(hp笔记本bios设置)(hp笔记本bios设置无线网卡)

  • 荣耀手环怎么调时间(荣耀手环怎么调声音)

    荣耀手环怎么调时间(荣耀手环怎么调声音)

  • steam怎么创建账户(steam怎么创建账号人机身份验证太难了过不了怎么办)

    steam怎么创建账户(steam怎么创建账号人机身份验证太难了过不了怎么办)

  • 苹果手机隐形按键该怎么设置(苹果手机隐形按键怎么不见了)

    苹果手机隐形按键该怎么设置(苹果手机隐形按键怎么不见了)

  • 小米锁屏壁纸自动变怎么弄(小米锁屏壁纸自己换了)

    小米锁屏壁纸自动变怎么弄(小米锁屏壁纸自己换了)

  • 华为手环4pro充电没反应(华为手环4pro充电器图片)

    华为手环4pro充电没反应(华为手环4pro充电器图片)

  • 音乐格式哪种音质最高(音乐格式哪种音效最好)

    音乐格式哪种音质最高(音乐格式哪种音效最好)

  • 华为nova7se是什么意思(华为nova7se是什么意思se)

    华为nova7se是什么意思(华为nova7se是什么意思se)

  • 云班课测试可以切屏吗(云班课测试可以切屏搜题么)

    云班课测试可以切屏吗(云班课测试可以切屏搜题么)

  • mate30原装膜需要换吗(mate30原厂膜多少钱)

    mate30原装膜需要换吗(mate30原厂膜多少钱)

  • oppo微信扫一扫黑屏怎么回事(oppo微信扫一扫变成前置了怎么调整)

    oppo微信扫一扫黑屏怎么回事(oppo微信扫一扫变成前置了怎么调整)

  • airpods连接上没声音,过了一会就断了(airpods连接上没有声音怎么回事)

    airpods连接上没声音,过了一会就断了(airpods连接上没有声音怎么回事)

  • 网易云歌单播放次数是指别人么(网易云歌单播放次数怎么增加)

    网易云歌单播放次数是指别人么(网易云歌单播放次数怎么增加)

  • qq发空白消息代表什么(qq发空白消息代码)

    qq发空白消息代表什么(qq发空白消息代码)

  • qq回执消息有什么用(qq回执成功后就能登qq了吗)

    qq回执消息有什么用(qq回执成功后就能登qq了吗)

  • studio3降噪怎么开(studio3降噪多少db)

    studio3降噪怎么开(studio3降噪多少db)

  • 发朋友圈怎么发的(发朋友圈怎么发一句话)

    发朋友圈怎么发的(发朋友圈怎么发一句话)

  • 华为p30首次充电要关机吗(华为p30首次充电要充多久)

    华为p30首次充电要关机吗(华为p30首次充电要充多久)

  • 微信运动没网络记步吗(微信运动没网络怎么办)

    微信运动没网络记步吗(微信运动没网络怎么办)

  • wood啥意思(wood是什么意思呢)

    wood啥意思(wood是什么意思呢)

  • 华为手机微信保存的图片找不到(华为手机微信保存的图片在哪个文件夹)

    华为手机微信保存的图片找不到(华为手机微信保存的图片在哪个文件夹)

  • 华为畅享9e怎么设置返回键(华为畅享9e怎么强制恢复出厂设置)

    华为畅享9e怎么设置返回键(华为畅享9e怎么强制恢复出厂设置)

  • qq名字空格手机怎么打(手机qq名字空白符号怎么打)

    qq名字空格手机怎么打(手机qq名字空白符号怎么打)

  • 网页404什么意思

    网页404什么意思

  • 会员怎么分享给别人(会员怎么分享给别人用扫码付款)

    会员怎么分享给别人(会员怎么分享给别人用扫码付款)

  • 朋友圈文字被折叠(朋友圈文字被折叠成一行怎么恢复)

    朋友圈文字被折叠(朋友圈文字被折叠成一行怎么恢复)

  • windows10如何激活(windows10如何激活密钥)

    windows10如何激活(windows10如何激活密钥)

  • 在WIN10中,为什么桌面图标会变大?(为什么我的win10)

    在WIN10中,为什么桌面图标会变大?(为什么我的win10)

  • 如何在织梦DEDECMS上运行php代码和mysql语句(如何在织梦中设置图片加文字)

    如何在织梦DEDECMS上运行php代码和mysql语句(如何在织梦中设置图片加文字)

  • 以旧换新销售商品
  • 进口关税计算公式 案例
  • 税率和征收率有什么不一样
  • 商业保理怎么账务处理
  • 小规模纳税人增值税优惠政策
  • 出口资质需要哪些资质
  • 长期待摊费用影响什么
  • 简易计税的进项可以抵扣吗
  • 费用确认的时点
  • 监理费可以由施工方出吗
  • 公司转让注册资金怎么弄
  • 营改增对电信业的影响及对策
  • 私人出租房子发票怎么开
  • 外购的自用小轿车
  • 一般纳税人开具3%专票的条件
  • 职工的大病医保怎么报销
  • 跨行业能开发票吗
  • 更正申报以前个税的处理方法
  • 事业基金弥补收支差额
  • 工程安装人工外包合同怎么写
  • 苹果手机键盘剪切板在哪里打开
  • 财务预算业务制度有哪些
  • 企业当年实现的净利润
  • 小黑马下载
  • 三代税款手续费支付比例
  • php stream_get_meta_data返回值
  • 家庭承包发包方的权利和义务
  • 外资企业出租房产税优惠
  • 外企采购回扣普遍吗
  • 使用php进行mysql数据库编程的基本步骤
  • 爬坑图片卡通
  • 应收账款与预收账款重分类表怎么做
  • 后端中spef文件和spf文件
  • springcloud阿里巴巴
  • php的序列化操作生成的哪种格式
  • more命令 查找
  • 经营活动现金流量比率
  • 管理费用暂估入账分录次月冲
  • 现金净流量的计算公式正确的有
  • 道路货物运输服务税率
  • 计提未发生的费用
  • 房地产企业的业务范围
  • 港币转人民币差多少钱
  • 企业汇算清缴调整费用后资产负债表怎么改
  • 并购贷款是固定资产贷款吗
  • 刻章费发票怎么开
  • 股东变更需要哪些资料和手续
  • 纳税人虽设置账簿,但账目混乱
  • sql查询和遍历数据
  • ado connection open.vi
  • mysql通过find_in_set()函数实现where in()顺序排序
  • 怎么操作win10系统
  • 没有光驱启动
  • arm和x86性能差多少
  • macbookair屏幕变成横版
  • win10预览版bug
  • winxp系统开机启动项
  • 屏保 win7
  • win7系统如何设置
  • macbook新手
  • myfastupdate.exe - myfastupdate是什么进程文件 有什么用
  • cocos2dx schedule
  • cocos2dx游戏开发进阶卷这本书怎么样
  • javascript的代码写在哪里
  • OpenGL super bible(5th) 学习笔记 -- 像素缓冲区对象(PBO)
  • js str.match
  • shell脚本计算执行时间
  • node中的事件循环
  • c语言深入剖析
  • unity中滚动条控件详解
  • java script教程
  • js日期格式转换
  • 现在小规模开专票多少钱
  • 出租车票据国税怎么开
  • 重庆国税电子税务局
  • 丰田威驰2023款1.5自动挡新车报价
  • 北京社保个人账户10万元退休金多少
  • 12366的客服辛苦吗
  • 征收两道消费税怎么算
  • 雅加达购物必买的东西
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设