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限制选中个数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack几种手动实现HMR的方式

    webpack几种手动实现HMR的方式

    众所周知,在webpack中使用模块热替换(HMR),能够使得应用在运行时,本文就介绍一下如何实现HMR,感兴趣的可以了解一下
    2021-07-07
  • javascript用函数实现对象的方法

    javascript用函数实现对象的方法

    这篇文章主要介绍了javascript用函数实现对象的方法,涉及javascript函数使用技巧,需要的朋友可以参考下
    2015-05-05
  • JS解析XML的实现代码

    JS解析XML的实现代码

    用javascript实现XML的解析的实现代码,需要的朋友可以参考下。
    2009-11-11
  • JavaScript axios安装与封装案例详解

    JavaScript axios安装与封装案例详解

    这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS实现图片放大镜插件详解

    JS实现图片放大镜插件详解

    这篇文章主要为大家详细介绍了JS实现图片放大镜插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Js中pick函数的具体使用

    Js中pick函数的具体使用

    本文主要介绍了Js中pick函数的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-09-09
  • Javascript中异步等待的深入理解

    Javascript中异步等待的深入理解

    Async / Await是人们期待已久的JavaScript功能,它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下
    2021-05-05
  • [JSF]使用DataModel处理表行事件的实例代码

    [JSF]使用DataModel处理表行事件的实例代码

    在使用JSF中,最常用的恐怕就要属于表格的处理了。使用DataModel可以方便地进行对表行的处理:
    2013-08-08
  • js中call与apply的用法小结

    js中call与apply的用法小结

    本篇文章主要是对js中call与apply的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • uniapp中获取位置信息处理步骤

    uniapp中获取位置信息处理步骤

    在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,本文给大家介绍uniapp中获取位置信息处理步骤,感兴趣的朋友跟随小编一起看看吧
    2024-02-02

最新评论