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

el-cascader

场景:

el-cascader + lazy + multiple + 反显数据

  1. 非lazy的场景

selecetedOptions2: [[1, 2, 3],[1, 2, 4],
],

可以正常回显;==> ok

  1. lazy场景下:
    是不可以回显的…

  2. 如果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可以是多层级,且数据较多。

  1. 使用cascader
  2. 使用tree
  3. 使用input和tree模拟select效果
  4. 使用了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

场景&#xff1a; el-cascader lazy multiple 反显数据 非lazy的场景 selecetedOptions2: [[1, 2, 3],[1, 2, 4], ],可以正常回显&#xff1b;> ok lazy场景下&#xff1a; 是不可以回显的… 如果el-cascader是异步的单选 cascader默认会加载下个层级的&#xff08;子…...

图论第3天----第841题、第463题

# 图论第3天----第841题、第463题 文章目录 一、第841题--钥匙和房间二、第463题--岛屿的周长 ​ 又继续开始修行&#xff0c;把图论这块补上&#xff0c;估计要个5-6天时间。 一、第841题–钥匙和房间 ​ 有向图的遍历。dfs遍历3部曲做&#xff0c;思路也较顺----访问过的&a…...

软件测试/测试开发丨利用ChatGPT 生成自动化测试脚本

点此获取更多相关资料 简介 自动化测试脚本可以模拟用户与应用程序的交互&#xff0c;例如点击按钮、输入数据、导航到不同的页面等等&#xff0c;以验证应用程序的正确性、性能和稳定性。 自动化测试在回归测试、冒烟测试等测试流程中都可以极大地起到节省时间、节省人力的作…...

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)&#xff1a;即与承运人签订运输契约&#xff0c;委托运输的货主&#xff0c;即发货人。在信用证支付方式下&#xff0c;一般以受益人为托运人;托收方式以托收的委托人为托运人。另外&#xff0c;根据《UCP500》…...

几道web题目

总结几道国庆写的web题目 [ACTF2020 新生赛]Include1 点进去发现就一个flag.php,源代码和抓包都没拿到好东西 结合题目猜是文件包含&#xff0c;构建payload ?filephp://filter/readconvert.base64-encode/resourceflag.php 得到base64编码过的flag&#xff0c;解码即可 此题…...

API接口大全分享,含短信API、IP查询API。。。

免费API接口大全分享&#xff0c;含短信API、IP查询API等。。。 语音验证码短信&#xff1a;拨打电话告知用户验证码&#xff0c;实现信息验证。短信验证码&#xff1a;可用于登录、注册、找回密码、支付认证等等应用场景。支持三大运营商&#xff0c;3秒可达&#xff0c;99.9…...

记录一次springboot使用定时任务中@Async没有生效的场景

环境说明 jdk21springboot 3.0.11 springcloud 2022.0.0 spring-cloud-alibaba 2022.0.0.0 在开发一个定时触发的任务的时候&#xff0c;由于开发执行任务的函数比较耗费时间&#xff0c;所以采用异步解决问题。 发现并没有按照预期的触发 经询问后&#xff0c;发现当前类的…...

腾讯云/阿里云国际站免费账号:腾讯云国际站如何对象存储cos设置防盗链

简介 为了避免恶意程序使用资源 URL 盗刷公网流量或使用恶意手法盗用资源&#xff0c;腾讯云国际站给用户带来不必要的损失。腾讯云对象存储支持防盗链配置&#xff0c;建议您通过控制台的防盗链设置配置黑/白名单&#xff0c;来进行安全防护。 注意&#xff1a; 如果您访问对…...

python编程:使用 Pillow 将照片转换为1寸报名照片

引言&#xff1a; 在现代科技时代&#xff0c;我们经常需要调整和处理照片以适应特定的需求和用途。本文将介绍如何使用 wxPython 和 Pillow 库&#xff0c;通过一个简单的图形界面程序&#xff0c;将选择的照片转换为指定尺寸的 JPG 格式&#xff0c;并保存在桌面上。 C:\pyt…...

Aria2 for Mac (免HomeBrew)

Aria2 for Mac (免HomeBrew)-CSDN博客 之前搜索Aria2的安装方法&#xff0c;推荐的方法是使用HomeBrew安装。是&#xff0c;这个插件很省事&#xff0c;但启用条件是你安装了HomeBrew且运行起来需要再下十来个G的Xcode…… 这对急用的我非常不友好&#xff0c;当然&#xff0c…...

【Java】微服务——Gateway网关

目录 1.为什么需要网关2.gateway快速入门1&#xff09;创建gateway服务&#xff0c;引入依赖2&#xff09;编写启动类3&#xff09;编写基础配置和路由规则4&#xff09;重启测试5&#xff09;网关路由的流程图 3.3.断言工厂3.4.过滤器工厂3.4.1.路由过滤器的种类3.4.2.请求头过…...

大厂笔试汇总

大厂笔试 华为笔试汇总1.交易系统的降级策略(二分法)2.获取最多食物(树形DP)3.小王的密码本(哈希)4.每日股票价格(单调栈)5.中庸行者(回溯)输入描述输出描述6.数字序列比大小(贪心)输入描述输出描述7、快递中转站8、互通设备集字节跳动中兴笔试华为笔试汇总 1.交易…...

【数据结构】快排的详细讲解

目录&#xff1a; 介绍 一&#xff0c;递归快排确定基准值 二&#xff0c;递归遍历 三&#xff0c;非递归的快排 四&#xff0c;快排的效率 介绍 快排是排序算法中效率是比较高的&#xff0c;快排的基本思想是运用二分思想&#xff0c;与二叉树的前序遍历类似&#xff0c;…...

蓝牙资讯|三星推迟发布智能戒指Galaxy Ring,智能穿戴小型化是大趋势

根据外媒 The Elec 报道&#xff0c;Galaxy Ring这款戒指主要面向健康和 XR 头显市场&#xff0c;该智能戒指可能被延期至 2024 年第三季度后发布。 外媒声称三星 Galaxy Ring 的上市周期&#xff0c;主要取决医疗认证的相关审批时间&#xff0c;三星计划将在 2024 年第三季度…...

移动端tree树

注意&#xff1a; 这是uniapp的写法&#xff0c;vue想用的话需要改造一下&#xff0c;里边的view和text&#xff0c;vue不能用&#xff0c;改成div&#xff0c;span即可。 样式rpx也要改成px tree树组件(QQ群&#xff1a;旧群没了&#xff0c;新群&#xff1a;801142650) - …...

SpringTask ----定时任务框架 ----苍穹外卖day10

目录 SpringTask 需求分析 快速入门 使用步骤 ​编辑业务开发 SpringTask 定时任务场景特化的框架 需求分析 快速入门 使用cron表达式来使用该框架 使用步骤 添加注解 自定义定时任务类 重点在于以下cron表达式的书写,精确表达触发的间隔 业务开发 主task方法 time使用(-…...

Fuzz测试:发现软件隐患和漏洞的秘密武器

0x01 什么是模糊测试 模糊测试&#xff08;Fuzz Testing&#xff09;是一种广泛用于软件安全和质量测试的自动化测试方法。它的基本思想是向输入参数或数据中注入随机、不规则或异常的数据&#xff0c;以检测目标程序或系统在处理不合法、不正常或边缘情况下的行为。模糊测试通…...

无为WiFi的一批服务器

我们在多个地区拥有高速服务器&#xff0c;保证网速给力&#xff0c;刷片无压力 嘿嘿 <?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…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...