element懒加载树+复选框+disabled遇到的坑

最新推荐文章于 2024-07-22 11:28:18 发布
最新推荐文章于 2024-07-22 11:28:18 发布
阅读量1k 收藏
点赞数
分类专栏： element-ui 文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liusixsixsix/article/details/125707613
版权

前提: 子节点未加载的时候, 勾选了父节点
操作: 此时去点击父节点加载子节点,并设置disabled为true, 此时子节点的勾选框会被置灰,不会被勾选,父节点也被取消了勾选

解决方法: 请求子节点数据的时候, 调用setCheckedKeys手动设置所有要被勾选的id

乐悠刘LL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element_UI_2.4_API.rar
08-24
2. **Form 表单组件**：包括各种表单元素如 Input 输入框、Select 选择器、Checkbox 复选框、Radio 单选框等，支持表单验证和自动格式化。 3. **Table 表格组件**：提供动态数据展示，支持排序、筛选、分页等功能，...
el-tree全局禁用.disabled=true.动态设置的重点是数据的复制
nanjizhiyin的专栏
04-29 9709
定义一个方法 class Utils { // 修改disabled的值 // disabled:true禁用 static changeDisabled(data,disabled){ for (var i = 0; i < data.length; i++) { var children = data[i].children if (children !=...
穿梭框+el-tree，递归实践
Haines
01-11 528
完成的效果图： 使用的组件： Tag.vue <template> <div class="flow-layer-tag-wrapper"> <div class="left"> <p class="title">可选标签</p > <!-- 搜索区 --> <div class="search"> <el-input placeholder="
element表单disabled功能失效问题
最新发布
qq_41421033的博客
07-22 505
场景:当需要根据商品状态来判断是否开启disabled来禁用表单时, disabled绑定了对应的值, 但无论商品是哪种状态, 表单都能操作, disabled失效。原因: 虽然disabled绑定的对象是动态获取的, 但没有声明默认值会造成绑定失效。解决: 在form对象里加入saleFlag的默认值。
el-tree使用自定义置灰以及自定义check方法
huangjinsheng1988的专栏
06-01 2465
1.树节点初始化disabled属性 遍历树节点动态设置当前节点disabled属性。2.注意checked状态包含半选中，同时更新当前data的选中状态const checkedNodes = [...checkedData.checkedNodes, ...checkedData.halfCheckedNodes]然后遍历树节点更新checked状态
el-tree实现全选（子节点选择同时反向影响全选按钮)
wjd1994的博客
07-20 2652
vue功能
【无标题】
m0_67216770的博客
06-24 507
vue+elementui 改变el-tree默认选中置灰功能本项目有些node节点是不能点击的一开始想使用css样式来更改，改了下面这个部分，但是选中置灰取消了之后，hover时也不展示样式,自己写的hover也没有起作用。 后面改变思路，尝试不让当前节点可点击，用setCurrentKey 处理，还是不起作用...
vue2/vue3中el-tree中，当disabled无效的时候，设置禁用节点
weixin_56205895的博客
07-25 4040
el-tree的禁用
jQuery+AJAX+JSON
12-21
- `:checked`：匹配所有被选中的元素（如复选框、单选按钮）。 - `:selected`：匹配所有被选中的 option 元素。 #### 四、jQuery 与 AJAX 结合使用 **4.1 AJAX 的概念** AJAX（Asynchronous JavaScript and XML...
真正的JQuery 1.6.2 + 1.6中文手册
09-07
例如，要检查一个复选框是否被选中，可以使用`$(element).prop('checked')`。 3. `.data()`方法的增强：在1.6中，`.data()`可以自动将`data-*`自定义属性转化为JavaScript类型，使得数据存储更加方便。 接下来，...
jQuery中prop()方法用法实例
10-24
此代码在文档加载完成后执行，弹出一个警告框显示第一个复选框的选中状态。 2. 获取并设置元素的id属性 ```javascript $("li").prop("id"); ``` 由于第一个li元素并没有id属性，所以此代码返回值为空。 3. 设置复...
jquery设置表单元素为不可用的简单代码
10-22
此外，对于需要禁用的元素，应合理地选择需要禁用的元素，比如输入框、复选框、单选按钮、按钮等，确保在特定业务逻辑下用户的操作符合设计预期。 7. 事件处理与动态控制：在实际的网站应用中，除了通过简单的prop...
使用VUE自定义组件封装数据字典实战
03-07
为了提高代码的可复用性和维护性，我们可以对这些常见的功能进行封装，特别是对于前端展现常用的下拉列表、单选按钮组和复选框组。本文主要探讨的是如何使用Vue自定义组件来封装数据字典，以下拉列表为例。 首先，...
无限级多选树型菜单（checkbox Tree）
08-13
它结合了树形结构和复选框元素，允许用户进行多级选择，实现对数据层次化、递归式的操作。在本文中，我们将深入探讨Checkbox Tree的基本概念、主要功能、实现方式以及相关的属性和事件。 1. **基本概念** - **...
由自己编写的switch开关插件
08-10
在前端开发中，为了提高用户体验，开发者常常会用图形化的开关按钮代替简单的复选框或单选按钮。这种开关通常具有更直观的视觉反馈，用户可以一目了然地知道某个设置的状态。自编的switch开关插件就是这样的一个组件...
60个实用的jQuery代码片段.pdf
09-30
39. **全选/反选复选框**：使用`prop("checked", value)`切换复选框状态。 40. **基于输入过滤元素**：监听输入事件，实时过滤显示元素。 41. **鼠标坐标**：`event.pageX`和`event.pageY`获取鼠标X、Y坐标。 42....
vue element-ui 修改el-tree节点的disabled状态
科学鸿的博客
08-17 8494
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
Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
小谭鸡米花的博客
03-08 7243
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
el-tree基础的树形节点设置节点不能选中高亮出来，对已经选中的节点设置disabled，对当前节点刚选中后设置禁用disabled
qq_44552416的博客
01-26 3954
我们使用element-ui或者element-plus的时候会遇到树形控件的使用，我们使用树形控件会限制有的节点不让选中和高亮出来，这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的，我们就简单来实现一下。发现element-ui中更改current-node-key值无效，最后用this.$refs.tree.setCurrentKey方法实现了。
给element的复选框增加懒加载
04-01
Element UI的复选框默认不支持懒加载，但我们可以通过自定义组件来实现这个功能。 1. 首先，我们需要创建一个新的组件，并继承Element UI的Checkbox组件。 ``` <template> <el-checkbox v-model="checked" :indeterminate="indeterminate" :disabled="disabled" @change="handleChange"> <slot></slot> </el-checkbox> </template> <script> import { Checkbox } from 'element-ui'; export default { name: 'LazyCheckbox', extends: Checkbox, props: { lazy: Boolean, load: Function, }, data() { return { loading: false, }; }, methods: { async handleChange(event) { if (this.lazy && !this.checked && !this.loading) { this.loading = true; const result = await this.load(); if (result === true) { this.checked = true; } this.loading = false; } else { this.$emit('change', event); } }, }, }; </script> ``` 2. 创建一个新的prop，名为lazy，用于标记是否启用懒加载。如果启用懒加载，我们还需要创建一个load方法，用于加载复选框的数据。 3. 在handleChange方法中，我们检查lazy属性是否为true，并且当前复选框未被选中和未处于loading状态。如果是，则将loading状态设置为true，并调用load方法。如果load方法返回true，则将复选框的选中状态设置为true。最后，将loading状态设置为false。 4. 在模板中使用我们自定义的组件。 ``` <template> <lazy-checkbox :lazy="true" :load="loadData">{{ label }}</lazy-checkbox> </template> <script> import LazyCheckbox from './LazyCheckbox.vue'; export default { components: { LazyCheckbox, }, props: { label: String, }, methods: { async loadData() { // 加载数据的代码 return true; // 如果数据加载成功，返回true，否则返回false }, }, }; </script> ``` 这样，我们就可以在复选框被选中之前，先加载数据并进行处理，从而实现懒加载的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值