element ui el-tree 限制最多选择几条实现

已于 2023-11-29 15:32:28 修改
阅读量2.6k 收藏 3
点赞数 1
文章标签： elementui vue.js 前端
于 2022-06-07 15:07:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42594589/article/details/125165680
版权

利用el-tree 的props属性中的disabled 然后赋值一个函数，在函数中判断当前选中的条数大于等于最大限制条数时，且当前节点的ID或者绑定值是否在选中节点列表中。如果不在return true；这时候树结构中就会不可选中

具体怎么实现看下面图

​​​​​​​

Jerome^_^
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree实现仅限叶子节点显示勾选框，并且只能单选
King Saj
06-07 1164
el-tree实现仅限叶子节点显示勾选框，并且只能单选
element+vue对el-tree树形控件多选个数限制，树形控件实现lable样式自定义，取消或者展示某个节点的展开符号（左边小箭头）
qq_41180882的博客
07-25 1474
element+vue对el-tree树形控件多选个数限制，树形控件实现lable样式自定义，取消或者展示某个节点的展开符号（左边小箭头）
el-tree 多选限制选中个数
weixin_43896125的博客
06-28 1747
1、el-tree至多选10个，超过后无法再勾选。2、当勾选父节点时不自动勾选子节点；
ElementUi tree树叶子节点显示复选框且限制勾选
灰色头像@的博客
03-24 3781
业务需求：只有子节点有复选框tree树最多选 5个，其余的显示为禁用状态。
vue 提交表单 限制 树组件选中的地域不能超过5个
weixin_49393290的博客
11-12 831
项目需求： 现在点击提交，我想要这个树组件点击保存时候不要超过5个 首先先找到提交的方法，然后在方法里打印dataForm 首先我们打印出这个dataForm是什么 然后您发现是拼的字符串，这时候您需要把字符串类型转换成数组类型，然后进行校验。 // 表单提交 dataFormSubmit () { this.$refs['dataForm'] .validate((valid) => { if (vali...
element-ui tree 实现单选并且只能选一个
热门推荐
weixin_41434267的博客
03-11 1万+
话不多说直接就是干 // 选择会触发getname方法 getname() { // 获取当节点的值 var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); // 循环遍历当前节点的值 for (var i in g...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
本文将详细讲解如何在Element-ui的`el-tree`组件中实现这一功能。 首先，我们要理解`el-tree`的工作原理。`el-tree`是基于Vue.js构建的，它依赖Vue的数据绑定机制来更新视图。当数据源（通常是一个数组）发生变化时...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
为了实现自定义增删改功能，我们看到在`<span class="custom-tree-node">`中定义了三个图标，分别对应增加、删除和重命名操作。每个图标都有一个点击事件，例如`append(node, data)`用于添加新节点，`deletes(node, ...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
vue el-table 超过个数禁止勾选
树上骑个猴的博客
03-18 2482
<el-table :data="tableData" :cell-style="tableCellStyle" height="350px" highlight-current-row border v-loading="loading" @select="tableSelectChangeLeft" :row-key="ro...
element ui树形控件节点选择限制
heartandwater的博客
02-06 3046
树形控件本来是做好了的，这里要称赞一下element ui确实好用 我本来还想自己加一个搜索功能，但是过滤后怎么保证数据结构我不太清楚，于是多看了几眼，它本身自带过滤 后来又需要加上只能选择最后一级和单个节点限制，于是去看了相关文章，照搬着搬过来了 确实能用，不过又差一点东西，之前大佬还让我用回调函数传参，就是调用回调函数，其实我还是不会，联想到elementUI的事件回调参数，应该就是那个意思，虽然不会写，但是直接用就行了 //事件绑定 <el-tree :data="trees"
el-tree 设置单选，设置子节点数据，选择父节点不会全选子节点，勾选后自动展开，点击已展开的则折叠
个人博客
12-28 5400
el-tree组件实现单选，且逐级选择，选择时根据上一级的id调接口请求下一级的数据，展开与折叠
vue elementui el-tree 设置父级不可选 子级只能单选
qq_27806371的博客
07-25 5880
【代码】vue elementui el-tree 设置父级不可选 子级只能单选。
el-tree 按分组区分单选和多选
qq_36262395的博客
08-21 979
需求：弹出一个会话框，框中标签称树形，并且其中部分数据项必选 效果类似下图 目前效果： <el-dialog title="API标签" :visible.sync="dialogApiLabelVisible" :close-on-click-modal="false"> <el-tree id="apiTagTree" :data="tagData" show-checkbox nod.
el-tree选择限制(只能三级单选el-checkbox多选框）及节点默认展开和默认选中
MISS_zhang_0110的博客
05-23 3481
element ui树形控件节点选择限制(只能三级单选）效果图一、主要代码 效果图 一、主要代码 <el-tree :data="dataTree" :props="defaultProps" node-key="id" highlight-current ref="dataConfigTree" :expand-on-click-node="false" accordion
Element-ui el-tree （show-checkbox）限制一二级菜单全选
web_dou的博客
07-21 1282
业务需求： 如上图，禁止一级二级，全选功能； 开始在官网找寻禁止操作的配置项，结果...根本没有耶????，那就直接让用户看不见好了????，上代码- <style lang="scss"> #cure{ /* 一级复选框隐藏 */ .el-tree > .el-tree-node > .el-tree-node__content .el-checkbox { display: none; } /* 二级复选框隐藏 */ .el-tree-
【树形权限】树形列表权限互斥选择、el-tree设置禁用等等
最新发布
前端知识分享喵
09-04 2021
树形列表权限互斥选择、el-tree设置禁用等等
element ui tree限制只能在同级拖拽
qq_45587146的博客
03-21 2143
element ui tree限制只能在同级拖拽
element-ui el-tree
08-09
Element UI的el-tree是一个用于显示树状数据的组件。关于el-tree的样式，可以在代码中添加一些自定义的样式来改变树的显示效果。在引用中的样式示例中，通过添加样式对树的节点、竖线、横线等进行了调整和美化。 在使用el-tree时，可以通过添加node-key属性给每个树节点指定一个唯一的标识符，以实现树节点的查找、选中等操作。这个属性可以通过在代码中添加node-key="id"来指定。可以参考引用中的示例代码。 要在项目中引入Element UI的样式和组件，需要在主文件（主要是main.js）中添加相应的引入语句。如引用所示，需要先引入Element UI的样式文件，然后通过Vue.use(ElementUI)来注册Element UI的组件。 总结起来，如果要使用element-ui el-tree组件，需要在代码中添加el-tree标签，并设置相应的属性，如node-key属性。同时，在样式方面，可以根据需求在代码中添加自定义的样式来美化el-tree的显示效果。要使用Element UI的样式和组件，需要在项目的主文件中引入Element UI，并注册相应的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值