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

这篇具有很好参考价值的文章主要介绍了Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1、隐藏父级节点处的CheckBox

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

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

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

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

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

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

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

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

首先找到本次新增的这一项,由于组件库文档中级联选择器这一块并没有提供相关的办法获取到最新选择的一项,只能拿到已选择的所有值,并且级联选择器新增的项并不是直接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的点击事件就可以了。

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

 右侧面板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.toymoban.com/news/detail-428506.html

到了这里,关于Element UI级联选择器 多选模式下,实现同一父级下最多只能选中一个子级的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门

    实现效果 当点击的 根选项 有 子选项 时,会向后台发送请求,并且接收数据实现动态加载。 点击特殊选项时,可以禁用其他选项。 相关代码 props prop handleClassOrStudentChange

    2024年02月11日
    浏览(43)
  • element ui级联选择器数据处理

    后端同事返回的级联选择器数据的children是 childrens ,而组件渲染只识别children,所以需要props自定义传入,代码如下 因为后端同事最后一层对象也返回了children,但是数据是空,这时候级联的最后一层就没法选择,所以需要将最后一层对象的children设置为undefine,这样子就可以选

    2024年02月09日
    浏览(35)
  • element ui cascader级联选择器 动态加载以及回显

    当数据比较多的时候,一次性获取全部数据速度太慢,而且体验不太好,所有需要用到懒加载,一级一级的选择数据就能很好避免速度慢的问题。 以及我们使用el-cascader加载默认值的时候,cascader的输入框和联级选择框都会遇到的回显问题。看代码!!! 参数说明: value / v-model 选中

    2024年02月15日
    浏览(63)
  • ElementPlus el-cascader级联选择器 实现一级菜单单选,二级菜单多选

    需求: 利用el-cascader级联实现一级菜单单选,二级菜单多选的功能,如下图所示: 思路: 使用了多选multiply属性,这个属性下,选中的数据结构为:一级为length1的数组,二级为length2的数组。利用标识符,把最后选中的一级菜单的值与标识符做对比,如不同,则让标识符的值

    2024年02月11日
    浏览(48)
  • vue中使用element-ui ,设置级联选择器高度问题

    我本来以为设置elemnt-ui组件样式需要用到深度选择器,然后找了好多关于深度选择器的,比如 /deep/ ::v-deep 后来才明白是权重不够,解决方法如下 1、在全局css中设置 缺点:所有级联选择器的高度都是固定的 结论:只有在所有页面级联选择器都一致的情况下或者只有一个级联

    2024年02月12日
    浏览(47)
  • element UI级联选择器---动态加载数据,动态控制二级面板的显示与隐藏

     一级数据列表是在页面初始化的时候调用接口返回的数据; 二级数据列表需要在获取到一级数据id的时候调用接口得到数据进行列表渲染; 问题: 使用了el-cascader后发现如果第一次点击父级A获取到二级数据,并且二级面板显示,第二次点击父级B获取到二级数据为[ ],此时

    2024年02月08日
    浏览(43)
  • element ui中select多选框change选择获取选项的所有字段信息

            在 Element UI 的 Select 组件中, 多选框 的选择变化( change )事件可以通过监听 change 事件来获取选项的所有字段信息。         当多选框选项发生改变时,会触发 change 事件,此时可以通过该事件的回调函数来获取选中的选项的所有字段信息。 示例: html代码: dat

    2024年02月06日
    浏览(44)
  • vue element UI el-cascader 级联选择器 获取当前选择值的整个对象

    要使用到cascader组件选中的数据的所有部分,并没有类似于select组件中的value可以指定,查看官方文档提供了新的方法,官方地址https://element.eleme.cn/#/zh-CN/component/cascader html部分 可以正常获取到该节点的全部数据,如下图所示: 如有问题请联系我~ 欢迎加入QQ群:

    2024年02月15日
    浏览(47)
  • element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)

    element-ui中的cascader级联选择器,官网文档中并没有提供方法直接获取当前选择的Object,这里特别需要注意element-ui的版本问题,不同的版本需要用到不同的方法。 可以用this.$refs[‘cascader’].currentLabels获取选中节点。 //获取节点label内容 因为安装的element-ui版本高于2.7.0版本,所

    2024年02月16日
    浏览(40)
  • element ui 层级选择器el-cascader只能选最后一级多选

    在element ui 中el-cascader多选: 每个层级都可以选择,但并不是我需要的,我需要多选只能选最后一级,在网上找了很久都复杂的,最终自己选择用css样式对checkbox进行隐藏。 实现方法: 在css 中加入 关键点在于利用属性选择器,遇到属性是 aria-haspopup (表示点击的时候是否会

    2024年02月11日
    浏览(86)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包