element el-tree循环遍历树形结构，并动态赋值disabled属性

最新推荐文章于 2024-05-16 02:58:26 发布
最新推荐文章于 2024-05-16 02:58:26 发布
阅读量2.5k 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js
原文链接：https://my.oschina.net/u/4377594/blog/3738959
版权

因为用到了 选择多个树形结构后不能再选择。所以用到了disabled
属性。
查到这篇文章，有启发
原创地址：https://my.oschina.net/u/4377594/blog/3738959

艾斯.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
HanXiaoXi_yeal的博客
08-11 6038
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
vue element-ui 修改el-tree节点的disabled状态
科学鸿的博客
08-17 8341
el-tree可以用show-checkbox来开启选择框。 在生成节点node的时候指定了disabled属性值，但后面需要修改这个节点的禁用状态。 此时如果直接 node.disabled=false，会报错： Uncaught (in promise) TypeError: Cannot set property disabled of #<e> which has only a getter 可以用 $set 来修改值。 this.$set(node, “disabled”, fal
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线_两个el-tree的循环遍历
最新发布
2301_82241847的博客
05-16 327
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
递归循环获得tree树形结构数据
weixin_40045529的博客
03-30 2817
VUE + ElementUI tree组件树形数据处理 一、tree组件代码 <el-tree class="tree_s" :data="treeData" highlight-current :expand-on-click-node="false" node-key="id" default-expand-all :props="defaultProps...
使用element的Tree树形控件，节点选中状态下设置禁用disabled
热门推荐
肖帅的博客
10-30 2万+
需求：使用ElementUi Tree树形控件,节点选中状态下设置禁用disabled 1，ElementUi Tree树形控件 的使用请参考官方网站 ElementUI API https://element.eleme.cn/2.0/#/zh-CN/component/tree#tree-shu-xing-kong-jian 2，通过disabled 设置Tree的某些节点为禁用状态,通过案例...
el-tree基础的树形节点设置节点不能选中高亮出来，对已经选中的节点设置disabled，对当前节点刚选中后设置禁用disabled
qq_44552416的博客
01-26 3244
我们使用element-ui或者element-plus的时候会遇到树形控件的使用，我们使用树形控件会限制有的节点不让选中和高亮出来，这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的，我们就简单来实现一下。发现element-ui中更改current-node-key值无效，最后用this.$refs.tree.setCurrentKey方法实现了。
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
然而，这个属性并不支持双向绑定，这意味着当你试图通过改变`default-checked-keys`的值来动态更新树的选中状态时，组件不会自动响应这些变化。 为了解决这个问题，开发者提到可以通过Tree组件提供的`setCurrentKey...
【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx
12-28
在JavaScript的前端开发中，Element UI 是一个常用的UI库，提供了丰富的组件，其中包括el-tree，一个用于构建树形结构的组件。在el-tree中，如果需要实现多选（复选框）功能，我们可以利用`show-checkbox`属性来开启...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
【JavaScript源代码】vue element el-transfer增加拖拽功能.docx
12-29
在Vue.js项目中，Element UI库的`el-transfer`组件是一个非常实用的工具，用于在两个列表之间进行数据传输。然而，原生的`el-transfer`并不直接支持拖拽排序功能。为了满足芯资管项目的需求，我们需要利用第三方库...
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 <el v-model=dataForm....
ElementUI中el-tree节点的操作的实现
12-28
其实tree的有些方法用起来是很方便的， this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，我们就可以得到选中的每个节点的id,拿到了id，那所有的问题就迎刃而解了。 废话不多说，直接上代码 html 得到节点id 添加节点 <el-button @click=che
el-tree遍历将所有节点禁选
RuofeiX的博客
06-23 1559
el-tree遍历将所有节点禁选 要用到递归 this.treeData.forEach(item => { item.disabled = true; if (item.children && item.children.length > 0) { this.deepEach(item.children); }
element-ui源码分析：剖析el-tree源码，看看实现一个树组件有多么复杂（1）
发果叁
09-24 3086
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
el-select和el-tree结合使用-树形结构多选框
s_9527_s的博客
06-16 1万+
el-select和el-tree结合使用-树形结构多选框
element tree组件根据条件来判断结点的禁用
yjtt__的博客
05-08 1万+
树形组件的数据中，disabled可以设置结点是否禁用，本来想的是像别的组件一样，给disabled加个判断的条件就可以实现， disabled: type == 1,结果设置后并没有效果，然后又百度看到了别的方法， 以函数返回值的形式设置， 在method中写函数 把返回的值给disabled 在我这虽然会设置禁用了，但是数据会全部显示禁用，并没有根据条件去判断，也可能我这里写的有...
element-ui 设置input的只读或禁用
weixin_30835933的博客
09-03 5026
只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。 禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled="edit"就可以了 转载于:https://www.cnblogs.com/knuzy/p/9579961.html...
解决：循环使用tree-select、select组件，change事件触发多次
qq_52065282的博客
05-15 2996
在这种类似的模块中循环使用elementUI，或element-plus中的下拉选择组件，需求是第一个select选择器改变值的时候，请求接口获取下一个select选择器的数据列表，在请求接口的时候发现接口请求了两次，值改变一次，@change事件调用的两次。触发多次的原因可能是因为组件重新渲染，导致事件监听器被重复绑定。
坑：el-tree复选框动态禁用时，默认勾选的数据不显示
GreyCastle的博客
02-28 1629
①：首先保证el-tree的树形结构进行递归遍历使用的是this.$set添加disable属性。 ②：保证default-checked-keys是根节点不是父节点（大坑）
循环遍历el-tree到最后一层，并每一个节点都加上disabled
06-03
el-tree 是基于 Element UI 实现的树形组件，你可以通过以下方式实现遍历到最后一层并且每个节点都加上 `disabled` 属性： 1. 首先，你需要获取 el-tree 的根节点。 2. 然后，你可以使用递归的方式遍历树形结构，对于每个节点，都添加 `disabled` 属性。 3. 最后，你需要调用 el-tree 的 `updateKeyChildren` 方法来更新节点状态，使其生效。 以下是示例代码： ```javascript // 获取 el-tree 的根节点 const root = this.$refs.tree.store.rootNode; // 遍历树形结构 function traverse(node) { if (!node) { return; } // 如果节点没有子节点，说明是最后一层节点，添加 disabled 属性 if (!node.childNodes || node.childNodes.length === 0) { node.data.disabled = true; } // 遍历子节点 if (node.childNodes) { node.childNodes.forEach(childNode => traverse(childNode)); } } // 遍历根节点 traverse(root); // 更新节点状态 this.$refs.tree.store.updateKeyChildren(root.key, root.childNodes); ``` 在这个示例代码中，我们首先通过 `this.$refs.tree.store.rootNode` 获取了 el-tree 的根节点。然后，我们定义了 `traverse` 函数，使用递归的方式遍历树形结构，对于每个节点，都添加 `disabled` 属性。最后，我们调用了 `this.$refs.tree.store.updateKeyChildren` 方法来更新节点状态，使其生效。 请注意，`updateKeyChildren` 方法需要传入根节点的 `key` 和子节点数组，因此我们需要使用 `root.key` 和 `root.childNodes` 来调用该方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值