当前位置: 首页 > news >正文

el-cascader 树状选择-点击父级禁用子级

  • 背景:项目上需要实现树状选择,点击父级禁用子级的功能,element组件本身没有该配置项
  • 说明:需要实现几个功能点:点击父级禁用子级;再次点击取消禁用;仅回填所选级;上下级不关联
  • 实现代码:
// 获取树状结构时保存一份原始数据-用于下次禁用前恢复状态
this.originTreeList = _.cloneDeep(this.treeOptions) // 保存原始数据// 选项变化时候进行处理
async onChange(val) {this.treeOptions = _.cloneDeep(this.originTreeList) // 还原选项状态this.handleDisable() // 处理禁用... // 其他操作
}
// 禁用处理
async handleDisable() {await this.$nextTick()_.forEach(this.$refs.packageTree.getCheckedNodes(), (e) => {this.disableChildren(e)})
},
disableChildren(node) {if (node.children) {_.forEach(node.children, (child) => {this.$set(child.data, 'disabled', true)this.disableChildren(child)})}
},
http://www.lryc.cn/news/516959.html

相关文章:

  • AWS re:Invent 的创新技术
  • PHP7和PHP8的最佳实践
  • Debian、Ubuntu 22.04和ubuntu 24.04国内镜像源(包括 docker 源)
  • 点亮一个esp32 的led
  • C++ shared_ptr进一步认知,为什么引用计数>2退出作用域都可以调用析构
  • JavaScript代码片段二
  • 【计算机视觉】单目深度估计模型-Depth Anything-V2
  • Servlet 和 Spring MVC:区别与联系
  • 【期末复习】三、内存管理
  • Microsoft Azure Cosmos DB:全球分布式、多模型数据库服务
  • 【Docker】安装registry本地镜像库,开启Https功能
  • JUC--线程池
  • 后端Java开发:第十一天
  • 基于 GEE 的长时间序列 Landsat 5 影像下载
  • Unity-Mirror网络框架从入门到精通之Attributes属性介绍
  • 软考证书邮寄步骤
  • 计算机网络 (29)网络地址转换NAT
  • nlp培训重点-2
  • 设计模式(1)——面向对象和面向过程,封装、继承和多态
  • 培训机构Day24
  • 1/7 C++
  • C语言初阶习题【23】输出数组的前5项之和
  • Android audio(1)-音频模块概述
  • 园林与消防工程:选择正确工程项目管理软件的重要性
  • 分布式环境下定时任务扫描时间段模板创建可预订时间段
  • SQL刷题笔记——高级条件语句
  • 与 Oracle Dataguard 相关的进程及作用分析
  • 游戏语音趋势解析,社交互动有助于营造沉浸式体验
  • 美食烹饪互动平台
  • 【51单片机零基础-chapter5:模块化编程】