element-ui 2的级联选择器,懒加载模式下,回显已存储的子选项名称

文章目录

  • 初始化级联选择控件
  • 回显已存储的子选项

https://element.eleme.io/#/en-US/component/cascader

初始化级联选择控件

options提供用于初始化的一级选项

<el-cascader
    ref="cascader1"
    :options="firstLevelOptions"
    collapse-tags
    :props="lazyLoadSettings"
    v-model="checkedAry">

props里配置懒加载具体实现

data() {
    return {
        firstLevelOptions: [],
		lazyLoadSettings: {
		    lazy: true,
		    multiple: true,
		    lazyLoad(node, resolve) {
		        // 加载第二级的选项列表,children初始化过,则不需再重新获取数据
		        if (node.level === 1 && !!node.children) {
		            const query = node.data.value;
		            queryNextLevelOptions(query).then(resp => {
		                const options = resp.data.map(item => ({
		                    value: item.optionId,
		                    label: item.optionName,
		                    leaf: true
		                }));
		                resolve(options);
		            });
		        } else {
		            resolve([]);
		        }
		    }
		}
	}
}

回显已存储的子选项

因为是懒加载,所以二级选项都不存在,默认无法回显已选择的子选项名称;
需要在控件的一级选项(options)里主动注入savedValues所涉及的二级选项列表

async getFirstLevelOptions() {
    const resp = await request.get("aaa/bbb/ccc");
    const options = resp.data.map(item => ({
                    value: item.optionId;
                    label: item.optionName;
                }));
    return options;
}

async initCascaderValue(savedValues) {
    // 先加载一级选项列表
    if (this.firstLevelOptions.length === 0) {
        this.firstLevelOptions = await this.getFirstLevelOptions();
    }
    // 轮询历史值里的选项,按需主动获取二级选项列表
    savedValues.forEach(selectedValue => {
        this.firstLevelOptions.forEach(firstLevel => {
            // 单个selectedValue的格式是['level1Value', 'level2Value']
            if (firstLevel.value === selectedValue[0] && !firstLevel.children) {
                // 让children数组内的新增子项,能够触发控件内容的更新
                this.$set(firstLevel, "children", []);
                queryNextLevelOptions(firstLevel.value).then(resp => {
	                resp.data && resp.data.forEach(item => {
	                    const option = {}
	                    option.value = item.optionId;
	                    option.label = item.optionName;
	                    option.leaf = true;
	                    firstLevel.children.push(option);
	                });
                });
            }
        });
    });
    // 设置已选的value,控件会自动显示对应的名称
    this.checkedAry = savedValues;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/951311.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

opencv的NLM去噪算法

NLM&#xff08;Non-Local Means&#xff09;去噪算法是一种基于图像块&#xff08;patch&#xff09;相似性的去噪方法。其基本原理是&#xff1a; 图像块相似性&#xff1a;算法首先定义了一个搜索窗口&#xff08;search window&#xff09;&#xff0c;然后在该窗口内寻找…

NineData云原生智能数据管理平台新功能发布|2024年12月版

本月发布 7 项更新&#xff0c;其中重点发布 2 项、功能优化 5 项。 重点发布 数据库 Devops - Oracle 非表对象支持可视化创建与管理 Oracle 非表对象&#xff0c;包括视图&#xff08;View&#xff09;、包&#xff08;Package&#xff09;、存储过程&#xff08;Procedur…

计算机网络 —— 网络编程(TCP)

计算机网络 —— 网络编程&#xff08;TCP&#xff09; TCP和UDP的区别TCP (Transmission Control Protocol)UDP (User Datagram Protocol) 前期准备listen &#xff08;服务端&#xff09;函数原型返回值使用示例注意事项 accpect &#xff08;服务端&#xff09;函数原型返回…

eNSP之家----ACL实验入门实例详解(Access Control List访问控制列表)(重要重要重要的事说三遍)

ACL实验&#xff08;Access Control List访问控制列表&#xff09;是一种基于包过滤的访问控制技术&#xff0c;它可以根据设定的条件对接口上的数据包进行过滤&#xff0c;允许其通过或丢弃。访问控制列表被广泛地应用于路由器和三层交换机。 准备工作 在eNSP里面部署设备&a…

PySide6基于QSlider实现QDoubleSlider

我在写小工具的时候&#xff0c;需要一个支持小数的滑动条。 我QSpinBox都找到了QDoubleSpinBox&#xff0c;QSlider愣是没找到对应的东西。 网上有好多对QSlider封装实现QDoubleSlider的文章。 似乎Qt真的没有这个东西&#xff0c;需要我们自行实现。 于是我也封装了一个&…

即插即用,无缝集成各种模型,港科大蚂蚁等发布Edicho:图像编辑一致性最新成果!

文章链接&#xff1a;https://arxiv.org/pdf/2412.21079 项目链接&#xff1a;https://ezioby.github.io/edicho/ 亮点直击 显式对应性引导一致性编辑&#xff1a;通过将显式图像对应性融入扩散模型的去噪过程&#xff0c;改进自注意力机制与分类器自由引导&#xff08;CFG&…

福建双色荷花提取颜色

提取指定颜色 HSV双色荷花代码验证 参照《OpenCV图像处理技术》 HSV 要用HSV的色调、饱和度和亮度来提取指定颜色。 双色荷花 农林大学金山校区观音湖 代码 import cv2 import numpy as npimgcv2.imread("./sucai6/hua.jpg") cv2.imshow("SRC",img) h…

关于重构一点简单想法

关于重构一点简单想法 当前工作的组内&#xff0c;由于业务开启的时间正好处于集团php-》go技术栈全面迁移的时间点&#xff0c;组内语言技术栈存在&#xff1a;php、go两套。 因此需求开发过程中通常要考虑两套技术栈的逻辑&#xff0c;一些基础的逻辑也没有办法复用。 在这…

【操作系统】课程 7设备管理 同步测练 章节测验

7.1知识点导图 它详细地展示了I/O系统的层次结构、I/O硬件和软件的组成以及它们的功能。下面是对图中内容的文字整理&#xff1a; I/O设备分类 按使用特性分类 输入设备&#xff1a;键盘、鼠标等输出设备&#xff1a;打印机、绘图仪等交互式设备&#xff1a;显示器等 按传输速率…

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​ ​​​​​​​​​ ​​​​ 招财猫&#xff0c;也被称为“幸运猫”&#xff0c;是一种象征财富和好运的吉祥物&#xff0c;经常…

【Vue.js 组件化】高效组件管理与自动化实践指南

文章目录 摘要引言组件命名规范与组织结构命名规范目录组织 依赖管理工具自动化组件文档生成构建自动引入和文档生成的组件化体系代码结构自动引入组件配置使用 Storybook 展示组件文档自动生成 代码详解QA 环节总结参考资料 摘要 在现代前端开发中&#xff0c;组件化管理是 V…

4.5 在C++节点中使用参数

本节沿用之前4.3 节小海龟控制例子。 4.5.1 参数声明与设置 打开src/demo_cpp_service/src/turtle_control.cpp文件 添加测试代码 this->declare_parameter("k",1.0);this->declare_parameter("max_speed",1.0);this->get_parameter("k&q…

Java agent

‌ Java Agent是一种特殊的Java程序&#xff0c;它可以在JVM启动时或运行时动态加载&#xff0c;用于监控和修改其他Java应用程序的行为‌。通过Java Agent&#xff0c;开发者可以在不修改目标应用程序源码的情况下&#xff0c;动态地插入功能&#xff0c;如性能分析、日志记录…

Cannot run program “docker“: CreateProcess error=2,系统找不到指定的文件

今天被这个问题坑了, 网上教程全是直接装插件就行 ,结果我连接可以成功 但是执行docker compose 就会出错, 检测配置 报错com.intellil,execution,process.ProcessNotCreatedException: Cannot run program “docker”: CreateProcess error2,系统找不到指定的文件 gpt 要我去…

二、模型训练与优化(4):模型优化-实操

下面我将以 MNIST 手写数字识别模型为例&#xff0c;从 剪枝 (Pruning) 和 量化 (Quantization) 两个常用方法出发&#xff0c;提供一套可实际动手操作的模型优化流程。此示例基于 TensorFlow/Keras 环境&#xff0c;示范如何先训练一个基础模型&#xff0c;然后对其进行剪枝和…

免费图片批量压缩工具-支持批量修改分辨率

工作需求&#xff0c;需要支持修改分辨率上限的同时进行图片压缩&#xff0c;设计此工具。 1.支持批量文件夹、子文件 2.支持最大分辨率上限&#xff08;高于设定分辨率的图片&#xff0c;强制修改为指定分辨率&#xff0c;解决大图的关键&#xff09; 3.自定义压缩质量&#x…

Github上传项目

写在前面&#xff1a; 本次博客仅仅是个人学习记录&#xff0c;不具备教学作用。内容整理来自网络&#xff0c;太多了&#xff0c;所以就不放来源了。 在github页面的准备&#xff1a; 输入标题。 往下滑&#xff0c;创建 创建后会跳出下面的页面 进入home就可以看到我们刚…

并发编程 之 Java内存模型(详解)

Java 内存模型&#xff08;JMM&#xff0c;Java Memory Model&#xff09;可以说是并发编程的基础&#xff0c;跟众所周知的Java内存区域(堆、栈、程序计数器等)并不是一个层次的划分&#xff1b; JMM用来屏蔽各种硬件和操作系统的内存访问差异&#xff0c;以实现让Java程序在各…

[QCustomPlot] 交互示例 Interaction Example

本文是官方例子的分析: Interaction Example 推荐笔记: qcustomplot使用教程–基本绘图 推荐笔记: 4.QCustomPlot使用-坐标轴常用属性 官方例子需要用到很多槽函数, 这里先一次性列举, 自行加入到qt的.h中.下面开始从简单的开始一个个分析. void qcustomplot_main_init(void); …

WPF控件Grid的布局和C1FlexGrid的多选应用

使用 Grid.Column和Grid.Row布局&#xff0c;将多个C1FlexGrid布局其中&#xff0c;使用各种事件来达到所需效果&#xff0c;点击复选框可以加载数据到列表&#xff0c;移除列表的数据&#xff0c;自动取消复选框等 移除复选框的要注意&#xff01;&#xff01;&#xff01;&am…