el-tree限制选中个数的实例

 更新时间:2024年08月13日 12:10:38   作者:花归去  
这篇文章主要介绍了el-tree限制选中个数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

 el-tree限制选中个数

 <el-tree
          style="max-width: 600px"
          :data="Treedata"
          :check-strictly="true"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :default-expanded-keys="['1', '2']"
          ref="treeRef"
          @check="handleCheckChange"
        />
const handleCheckChange = (data: any, checked: any) => {
  const selectedNodes = treeRef.value.getCheckedNodes();
  if (selectedNodes.length > 3 && checked) {
    treeRef.value.setChecked(data, false); // 取消选中超出限制的节点
    ElMessage.warning(`您最多只能选择 ${3} 个节点!`);
  }
};
const handleCheckChange= (currNode: any, checkedInfo: any) => {
  let checkedKeys = checkedInfo.checkedKeys || [];
  let treeNodesMap = treeRef.value.store?.nodesMap || {};
  let status = checkedKeys.length >= 3;
  if (status) {
    ElMessage.warning(`您最多只能选择 ${3} 个节点!`);
  }
  Object.keys(treeNodesMap).forEach((key) => {
    let item = treeNodesMap[key] || {};
    if (!checkedKeys.includes(key)) {
      let data = item.data || {};
      data.disabled = status;
      treeRef.value.setCurrentNode(data);
    }
  });
};

到此这篇关于el-tree限制选中个数的文章就介绍到这了,更多相关el-tree限制选中个数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript tips提示框组件实现代码

    javascript tips提示框组件实现代码

    一个简单的类似title的提示效果,但现实内容可以很丰富,以上js另存为tip.js,下面是使用的demo。
    2010-11-11
  • 一个JavaScript继承的实现

    一个JavaScript继承的实现

    一个JavaScript继承的实现...
    2006-10-10
  • 简单实现jquery焦点图

    简单实现jquery焦点图

    这篇文章主要为大家详细介绍了如何简单实现jquery焦点图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS 实现请求调度器

    JS 实现请求调度器

    这篇文章主要介绍了JS 实现请求调度器的方法,帮助大家更好的理解和学习使用js,感兴趣的朋友可以了解下
    2021-03-03
  • JS组件Bootstrap实现弹出框效果代码

    JS组件Bootstrap实现弹出框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框效果代码的相关资料,对弹出框感兴趣的小伙伴们可以参考一下
    2016-04-04
  • js实现页面跳转的五种方法推荐

    js实现页面跳转的五种方法推荐

    下面小编就为大家带来一篇js实现页面跳转的五种方法推荐。小编觉得挺不错的。现在分享给大家,让大家参考一下
    2016-03-03
  • JavaScript如何实现LRU缓存淘汰算法

    JavaScript如何实现LRU缓存淘汰算法

    LRU(Least Recently Used)缓存淘汰算法是一种常见的缓存淘汰策略,它的核心思想是优先淘汰最近最少使用的缓存数据,以保证缓存中的数据始终是最热门的。本文主要介绍了一些关于如何实现LRU缓存淘汰算法的方法,感兴趣的小伙伴可以参考一下
    2023-04-04
  • html代码调试脚本

    html代码调试脚本

    html代码调试脚本...
    2006-07-07
  • 微信{

    微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_

    这篇文章主要介绍了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • Layui给switch添加响应事件的例子

    Layui给switch添加响应事件的例子

    今天小编就为大家分享一篇Layui给switch添加响应事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论