el-cascader
场景:
el-cascader + lazy + multiple + 反显数据
- 非lazy的场景
selecetedOptions2: [[1, 2, 3],[1, 2, 4],
],
可以正常回显;==> ok
-
lazy场景下:
是不可以回显的… -
如果el-cascader是异步的单选
cascader默认会加载下个层级的(子层级会执行调用),并选中状态 ==> ok
所以只有lazy+多选,回显的时候有问题。
使用了其他的方法,还是没有解决,暂时搁置了。
this.$refs.deviceTree2.getCheckedNodes(true)
this.$refs.deviceTree.panel
this.$refs.deviceTree.panel.menus[0]
this.$refs.deviceTree.panel.lazyLoad(v)
使用其他的组件:@vueblocks/elp-cascader,适用于数据量较大的场景。
查询企业(tree)
tree可以是多层级,且数据较多。
- 使用cascader
- 使用tree
- 使用input和tree模拟select效果
- 使用了select,把tree给扁平化了,支持模糊搜索…
<!--使用input和tree模拟select效果-->
<el-select v-model="searchForm.deptId" placeholder="请选择" ref="selectTree" clearablestyle="width: 100%;"@clear="selectTreeClear"><el-option :key="searchForm.deptId":label="searchForm.deptName":value="searchForm.deptId"hidden></el-option><el-input v-model="deptNameQuery" placeholder="输入关键字进行搜索"@input="getOrgList" style="width: 96%;margin-left: 2%;"></el-input><el-tree ref="deptTree" style="margin-top: 6px;":data="organizationList":props="treerConfig2"@node-click="handleNodeClick"></el-tree>
</el-select>
// 选择组织
handleNodeClick (data) {console.log('treeNode-data', data)this.searchForm.deptId = data.idthis.searchForm.deptName = data.deptName// 选择器执行完成后,使其失去焦点隐藏下拉框的效果this.$refs.selectTree.blur()console.log('this.searchForm:', this.searchForm)
},
/**** 获取所属企业(组织)* 1.有环境里,有一万多条数据(一级一万多条,二级很少很少),* cascader(element2.x):* 1)一级一万多条,二级很少很少此时页面会卡死* 2)7000多条一级数据,当前页面渲染还行,但是跳转其他页面的时候,明显延迟了很多秒(5s以上)* tree:* 1)7000多条一级数据,当前页面渲染已经有点困难了,会有卡死现象* 2.其他方案:* select里套一个input和tree,然后做成模糊搜索的;但是搜索结果不是tree类型的,成平铺状态的了...**/
element3.x是ok的。虚拟dom
相关文章:
el-cascader
场景: el-cascader lazy multiple 反显数据 非lazy的场景 selecetedOptions2: [[1, 2, 3],[1, 2, 4], ],可以正常回显;> ok lazy场景下: 是不可以回显的… 如果el-cascader是异步的单选 cascader默认会加载下个层级的(子…...
图论第3天----第841题、第463题
# 图论第3天----第841题、第463题 文章目录 一、第841题--钥匙和房间二、第463题--岛屿的周长 又继续开始修行,把图论这块补上,估计要个5-6天时间。 一、第841题–钥匙和房间 有向图的遍历。dfs遍历3部曲做,思路也较顺----访问过的&a…...
软件测试/测试开发丨利用ChatGPT 生成自动化测试脚本
点此获取更多相关资料 简介 自动化测试脚本可以模拟用户与应用程序的交互,例如点击按钮、输入数据、导航到不同的页面等等,以验证应用程序的正确性、性能和稳定性。 自动化测试在回归测试、冒烟测试等测试流程中都可以极大地起到节省时间、节省人力的作…...
3.3.OpenCV技能树--二值图像处理--图像形态学操作
文章目录 1.图像形态学运算简介2.图像开运算处理2.1.图像开运算处理简介2.2.图像开运算处理代码2.3.图像开运算处理效果 3.图像闭运算处理3.1.图像闭运算处理简介3.2.图像闭运算处理代码3.3.图像闭运算处理效果 4.图像形态学梯度处理4.1.图像形态学梯度处理简介4.2.图像形态学梯…...
这15个海运提单的雷区 你知道吗?
海运提单中英文对照 海运提单主要项目填制说明 1、托运人(Shipper):即与承运人签订运输契约,委托运输的货主,即发货人。在信用证支付方式下,一般以受益人为托运人;托收方式以托收的委托人为托运人。另外,根据《UCP500》…...
几道web题目
总结几道国庆写的web题目 [ACTF2020 新生赛]Include1 点进去发现就一个flag.php,源代码和抓包都没拿到好东西 结合题目猜是文件包含,构建payload ?filephp://filter/readconvert.base64-encode/resourceflag.php 得到base64编码过的flag,解码即可 此题…...
API接口大全分享,含短信API、IP查询API。。。
免费API接口大全分享,含短信API、IP查询API等。。。 语音验证码短信:拨打电话告知用户验证码,实现信息验证。短信验证码:可用于登录、注册、找回密码、支付认证等等应用场景。支持三大运营商,3秒可达,99.9…...
记录一次springboot使用定时任务中@Async没有生效的场景
环境说明 jdk21springboot 3.0.11 springcloud 2022.0.0 spring-cloud-alibaba 2022.0.0.0 在开发一个定时触发的任务的时候,由于开发执行任务的函数比较耗费时间,所以采用异步解决问题。 发现并没有按照预期的触发 经询问后,发现当前类的…...
腾讯云/阿里云国际站免费账号:腾讯云国际站如何对象存储cos设置防盗链
简介 为了避免恶意程序使用资源 URL 盗刷公网流量或使用恶意手法盗用资源,腾讯云国际站给用户带来不必要的损失。腾讯云对象存储支持防盗链配置,建议您通过控制台的防盗链设置配置黑/白名单,来进行安全防护。 注意: 如果您访问对…...
python编程:使用 Pillow 将照片转换为1寸报名照片
引言: 在现代科技时代,我们经常需要调整和处理照片以适应特定的需求和用途。本文将介绍如何使用 wxPython 和 Pillow 库,通过一个简单的图形界面程序,将选择的照片转换为指定尺寸的 JPG 格式,并保存在桌面上。 C:\pyt…...
Aria2 for Mac (免HomeBrew)
Aria2 for Mac (免HomeBrew)-CSDN博客 之前搜索Aria2的安装方法,推荐的方法是使用HomeBrew安装。是,这个插件很省事,但启用条件是你安装了HomeBrew且运行起来需要再下十来个G的Xcode…… 这对急用的我非常不友好,当然,…...
【Java】微服务——Gateway网关
目录 1.为什么需要网关2.gateway快速入门1)创建gateway服务,引入依赖2)编写启动类3)编写基础配置和路由规则4)重启测试5)网关路由的流程图 3.3.断言工厂3.4.过滤器工厂3.4.1.路由过滤器的种类3.4.2.请求头过…...
大厂笔试汇总
大厂笔试 华为笔试汇总1.交易系统的降级策略(二分法)2.获取最多食物(树形DP)3.小王的密码本(哈希)4.每日股票价格(单调栈)5.中庸行者(回溯)输入描述输出描述6.数字序列比大小(贪心)输入描述输出描述7、快递中转站8、互通设备集字节跳动中兴笔试华为笔试汇总 1.交易…...
【数据结构】快排的详细讲解
目录: 介绍 一,递归快排确定基准值 二,递归遍历 三,非递归的快排 四,快排的效率 介绍 快排是排序算法中效率是比较高的,快排的基本思想是运用二分思想,与二叉树的前序遍历类似,…...
蓝牙资讯|三星推迟发布智能戒指Galaxy Ring,智能穿戴小型化是大趋势
根据外媒 The Elec 报道,Galaxy Ring这款戒指主要面向健康和 XR 头显市场,该智能戒指可能被延期至 2024 年第三季度后发布。 外媒声称三星 Galaxy Ring 的上市周期,主要取决医疗认证的相关审批时间,三星计划将在 2024 年第三季度…...
移动端tree树
注意: 这是uniapp的写法,vue想用的话需要改造一下,里边的view和text,vue不能用,改成div,span即可。 样式rpx也要改成px tree树组件(QQ群:旧群没了,新群:801142650) - …...
SpringTask ----定时任务框架 ----苍穹外卖day10
目录 SpringTask 需求分析 快速入门 使用步骤 编辑业务开发 SpringTask 定时任务场景特化的框架 需求分析 快速入门 使用cron表达式来使用该框架 使用步骤 添加注解 自定义定时任务类 重点在于以下cron表达式的书写,精确表达触发的间隔 业务开发 主task方法 time使用(-…...
Fuzz测试:发现软件隐患和漏洞的秘密武器
0x01 什么是模糊测试 模糊测试(Fuzz Testing)是一种广泛用于软件安全和质量测试的自动化测试方法。它的基本思想是向输入参数或数据中注入随机、不规则或异常的数据,以检测目标程序或系统在处理不合法、不正常或边缘情况下的行为。模糊测试通…...
无为WiFi的一批服务器
我们在多个地区拥有高速服务器,保证网速给力,刷片无压力 嘿嘿 <?phpinclude("./includes/common.php"); $actisset($_GET[act])?daddslashes($_GET[act]):null; $urldaddslashes($_GET[url]); $authcodedaddslashes($_GET[authcode]);he…...
SpringBoot3.0——踩坑
SpringBoot3.0后有一些改动 JDK要17以上lombok <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.20</version> </dependency>servlet <dependency><groupId>ja…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
