位置: 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) 建图

  • 市场研究发展的两个方向(市场研究发展的阶段包括)

    市场研究发展的两个方向(市场研究发展的阶段包括)

  • css滚动条样式代码(css 滚动条)

    css滚动条样式代码(css 滚动条)

  • 苹果13是双扬声器吗(苹果13双扬声器怎么打开)

    苹果13是双扬声器吗(苹果13双扬声器怎么打开)

  • 京东慧采商家如何入驻(京东慧采商家如何修改商品售价)

    京东慧采商家如何入驻(京东慧采商家如何修改商品售价)

  • 苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

    苹果ipad的截屏功能在哪里(苹果ipad截屏怎么操作)

  • 苹果x显示edge没4g(苹果手机4g显示edge)

    苹果x显示edge没4g(苹果手机4g显示edge)

  • 手机上怎么隐藏腾讯vip(手机上怎么隐藏应用)

    手机上怎么隐藏腾讯vip(手机上怎么隐藏应用)

  • 范围内没有曾经连接到的网络怎么修复(范围内没有曾经连接的网络未修复)

    范围内没有曾经连接到的网络怎么修复(范围内没有曾经连接的网络未修复)

  • 苏宁易购是一个什么平台(苏宁易购是一个购物平台吗)

    苏宁易购是一个什么平台(苏宁易购是一个购物平台吗)

  • 90hz屏幕伤眼吗(90hz屏幕比60hz屏幕多耗电吗)

    90hz屏幕伤眼吗(90hz屏幕比60hz屏幕多耗电吗)

  • 华为p40圆圈悬浮窗怎么关(华为p40取消悬浮圆圈)

    华为p40圆圈悬浮窗怎么关(华为p40取消悬浮圆圈)

  • 小天才电话手表adb是什么(小天才电话手表丢了关机怎么找回)

    小天才电话手表adb是什么(小天才电话手表丢了关机怎么找回)

  • 什么构成了internet应用程序的基础(什么构成了internet应用程序的基础用于编写外部网页)

    什么构成了internet应用程序的基础(什么构成了internet应用程序的基础用于编写外部网页)

  • 麒麟710相当于联发科多少(麒麟710相当高通的什么处理器)

    麒麟710相当于联发科多少(麒麟710相当高通的什么处理器)

  • 小米5c支持全网通吗(小米5c只支持移动吗)

    小米5c支持全网通吗(小米5c只支持移动吗)

  • ps炫光怎么做(ps怎么做出炫酷光效效果)

    ps炫光怎么做(ps怎么做出炫酷光效效果)

  • 积目怎么搜索id(积目怎么搜索人)

    积目怎么搜索id(积目怎么搜索人)

  • 手机像素不好怎么调整(手机像素不好怎么弄)

    手机像素不好怎么调整(手机像素不好怎么弄)

  • 努比亚红魔3s用什么处理器(努比亚红魔3s用什么充电)

    努比亚红魔3s用什么处理器(努比亚红魔3s用什么充电)

  • 抖音怎么设置2018年龄(抖音怎么设置200人群聊)

    抖音怎么设置2018年龄(抖音怎么设置200人群聊)

  • 酷狗桌面歌词怎么解锁(酷狗桌面歌词怎么竖屏)

    酷狗桌面歌词怎么解锁(酷狗桌面歌词怎么竖屏)

  • 苹果深色模式怎么使用(苹果深色模式怎么设置快捷)

    苹果深色模式怎么使用(苹果深色模式怎么设置快捷)

  • 小米airdots和红米区别(小米airdots与红米airdots2)

    小米airdots和红米区别(小米airdots与红米airdots2)

  • 什么情况下微信会永久封(什么情况下微信会被禁言)

    什么情况下微信会永久封(什么情况下微信会被禁言)

  • airpods怎么下一首(airpods怎样下一首)

    airpods怎么下一首(airpods怎样下一首)

  • 苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

    苹果实况照片是什么意思(苹果实况照片是自己拍的吗)

  • 苹果x如何上下颠倒用(苹果怎么使用上下屏幕)

    苹果x如何上下颠倒用(苹果怎么使用上下屏幕)

  • 如何在Win11中执行磁盘清理?Win11清理磁盘垃圾方法汇总(win11怎么用)

    如何在Win11中执行磁盘清理?Win11清理磁盘垃圾方法汇总(win11怎么用)

  • axios-前后端数据交互流程(前端axios是什么)

    axios-前后端数据交互流程(前端axios是什么)

  • 一般纳税人公账转法人私账
  • 股权转让需要缴纳企业所得税吗
  • 解聘补偿金赔偿标准2023
  • 新车检测费能入什么科目
  • 车船税不交怎么办
  • 小规模纳税人残保金
  • 财务上大写的元怎么写
  • 初级会计考试税率要记吗
  • 权益筹资额计算公式
  • 汇款出国规定
  • 劳动保险费属于营业外支出吗
  • 缴纳社保的会计分录怎么做
  • 劳务关系需要缴社保吗?
  • 公司从个人手中租房不能取得发票
  • 进项转出再差额征收待抵扣
  • 新会计准则开办费装修费计入什么科目
  • 社会保险基金管理局是干什么的
  • 跨年度取得增值税发票
  • 营改增之前有增值税吗
  • 劳务派遣企业的规上企业认定标准
  • 生活垃圾处理项目基础金融产品包括
  • 人机料法环是什么方法
  • 税控盘不存在怎么回事
  • 赠票视同销售,借方计入什么科目?
  • 买免税产品
  • 离婚后房产过户需要多少钱
  • 信托保证本金吗
  • 回收站右键菜单修改
  • 剑灵配置要求2020官方
  • windows11怎么创建宽带拨号连接图标
  • 个税多缴纳如何低下个月的税
  • php字符串赋值
  • php字符串处理函数
  • 会计新准则讲解
  • 枇杷叶的功效与作用及副作用
  • 股东未实缴资本,因为经营困难借给公司钱,可以要求返还
  • 结转代销产品成本会计分录
  • 窗函数的作用
  • 预付货款账务处理会计分录
  • php函数名
  • vue权限控制设计
  • 二维码的实现原理和实现过程
  • 保险公司的应收账款有哪些
  • 金银首饰零售商属于消费税纳税人吗
  • 帝国cms移动端
  • 以旧换新方式销售金银首饰的消费税处理
  • 诉讼代理费计入事业单位什么科目
  • 工地装饰工程包括哪些
  • 配置英文
  • 普通发票怎么冲红字
  • 开发票四舍五入
  • 待清算商户款项分录的摘要是什么
  • 建筑服务的税率是
  • DBCC CHECKIDENT 重置数据库标识列从某一数值开始
  • WINDOWS操作系统最新版本
  • linux虚拟机基本操作
  • mac系统怎么把文件移到文件夹
  • centos安装视频播放器
  • win10怎么删除无用文件
  • unix & linux
  • linux ls命令什么意思
  • linux内存耗尽怎么解决
  • opengl 绘制
  • java iterate()用法
  • 批处理注册reg文件
  • pycharm怎么学
  • Unity3D之Transform参数
  • JavaScript中OnLoad几种使用方法
  • jQuery.ajax实现根据不同的Content-Type做出不同的响应
  • jquery.inarray
  • nodejs child_process
  • android studio项目无法运行
  • android 设置竖屏
  • 矿产资源税的计税依据
  • 怎样在网上打印社保证明
  • 个人所得税缴纳怎么申报流程
  • 拟录用和录用的区别在哪
  • 国税地税征管体制改革方案
  • 国家税务总局令第52号 ,税务稽查案件办理程序规定
  • 财务公司怎么做
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设