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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity设计模式——原型模式

原型模式&#xff08;Prototype&#xff09;用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象&#xff0c;而且不需知道任何创建的细节 。 原型类 Prototype&#xff1a; abstract class P…

十一、2023.10.5.计算机网络(end).11

文章目录 17、说说 TCP 可靠性保证&#xff1f;18、简述 TCP 滑动窗口以及重传机制?19、说说滑动窗口过小怎么办?20、说说如果三次握手时候每次握手信息对方没收到会怎么样&#xff0c;分情况介绍&#xff1f;21、简述 TCP 的 TIME_WAIT&#xff0c;为什么需要有这个状态&…

虚拟机机初始化配置

虚拟机信息 镜像&#xff1a;Centos7 模板机配置&#xff1a;4U4G 100G存储 /boot 800MB /swap 物理内存如果低于2G&#xff0c;设定为虚拟内存设定为物理内存2倍&#xff0c;物理内存高于2G设定为4G。 / 95.2G 虚拟机安装完成后配置网卡 [rootlocalho…

ctfshow-web5(md5弱比较)

打开题目链接是html和php代码 html没啥有用信息&#xff0c;这里审一下php代码 &#xff1a; 要求使用get方式传入两个参数 v1&#xff0c;v2 ctype_alpha()函数&#xff1a;用于检查给定的字符串是否仅包含字母&#xff1b; is_numeric()函数&#xff1a;检测字符串是否只由…

聊聊分布式架构05——[NIO基础]BIO到NIO的演进

目录 I/O I/O模型 BIO示例 BIO与NIO比较 NIO的三大核心 NIO核心之缓冲区 Buffer常用子类&#xff1a; Buffer常用API Buffer中的重要概念 NIO核心之通道 FileChannel 类 FileChannel常用方法 NIO核心之选择器 概述 应用 NIO非阻塞原理分析 服务端流程 客户端…

请求的转发和重定向

RequestDispatcher接口实现转发&#xff1a; jsp1上链接到Servlet&#xff0c;Servlet再转发&#xff08;关键在这里怎么实现转发&#xff1f;&#xff1f;&#xff09; 演示index.html页面---->Servlet1(转发到)------>Servlet2 实现转发流程 1.用HttpServletReques…

如何解决openal32.dll丢失,有什么办法解决

你第一次知道openal32.dll文件是在什么情况下&#xff0c;你了解过openal32.dll文件吗&#xff1f;如果电脑中openal32.dll丢失有什么办法可以解决&#xff0c;今天就教大家如何解决openal32.dll丢失&#xff0c;都有哪些办法可以解决openal32.dll丢失。 一&#xff0e;openal3…

Mac下docker安装MySQL8.0.34

学习并记录一下如何用docker部署MySQL 在Docker中搜索并下载MySQL8.0.x的最新版本 下载好后&#xff0c;在Images中就可以看到MySQL的镜像了 通过下面的命令也可以查看docker images启动镜像&#xff0c;使用下面的命令就可以启动镜像了docker run -itd --name mysql8.0.34 -…

2021年03月 Python(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python编程&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 对于字典infor {“name”:“tom”, “age”:13, “sex”:“male”}&#xff0c;删除"age":13键值对的操作正确的…

蓝桥杯每日一题2023.10.9

题目描述 成绩统计 - 蓝桥云课 (lanqiao.cn) 题目分析 学会使用四舍五入函数round #include<bits/stdc.h> using namespace std; int s1, s2; int main() {int n, x;cin >> n;for(int i 1; i < n; i ){cin >> x; if(x > 60)s1 ;if(x > 85)s2 ;…

C语言练习百题之插入一个数

题目:有一个已经排好序的数组。现输入一个数&#xff0c;要求按原来的规律将它插入数组中。 程序分析 要将一个数插入已经排好序的数组中&#xff0c;我们可以采用以下步骤&#xff1a; 遍历数组&#xff0c;找到第一个大于待插入数的位置。将待插入数插入到该位置&#xff…

关于一篇ElementUI之CUD+表单验证

目录 一.CUD增删改查简述 1.1.增删改功能实现 二.表单验证 前端所有代码&#xff1a; 好啦今天就分享到这了&#xff0c;希望能帮到你哦&#xff01;&#xff01;&#xff01; 以下的代码基于我博客中的代码进行续写 : 关于ElementUI之动态树数据表格分页实例 一.CUD增删改…

北斗导航 | 位置差分、伪距差分以及载波相位平滑伪距(差分定位方法二)

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 位置差分、伪距差分以及载波相位平滑伪距 位置差分伪距差分载波相位平滑…

【算法练习Day14】二叉树的最大深度二叉树的最小深度完全二叉树的节点个数

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 二叉树的最大深度二叉树的最…

【Qt控件之QDialog】使用及技巧

简介 QDialog是Qt中的一个类&#xff0c;继承自QWidget类&#xff0c;用于创建对话框窗口&#xff0c;可以显示模态&#xff08;阻塞当前窗口&#xff09;或非模态的对话框。对话框可以包含各种控件&#xff0c;如按钮、文本框等&#xff0c;用于与用户进行交互。 主要函数说…

19哈希表——数组中的妙用

目录 LeetCode之路——202. 快乐数 分析&#xff1a; LeetCode之路——1. 两数之和 分析&#xff1a; 解法一&#xff1a;暴力枚举 解法二&#xff1a;哈希表 LeetCode之路——202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对…

CocosCreator 面试题(三)JavaScript闭包原理和作用

1、JavaScript闭包是什么&#xff1f; JavaScript闭包是指在函数内部创建的函数&#xff0c;它可以访问并持有创建它的父函数作用域中的变量&#xff0c;即使父函数已经执行完毕。闭包是JavaScript中强大而有用的概念&#xff0c;它可以用于创建私有变量、实现模块化和封装性&a…

312.戳气球

将戳气球转换到添加气球&#xff0c;记忆搜索slove(i,j)&#xff1a;在开区间(i,j)全部填满气球得到的最多硬币数&#xff0c;两端val[i]、val[j] class Solution { public:vector<vector<int>> ans;vector<int> val;int slove(int left,int right){if(left&…

COCI 2021-2022 #1 - Set 题解

思路 我们将原题中的数的每一位减一&#xff0c;此时问题等价。 下面的异或都是在三进制下的异或。&#xff08;相当于不进位的加法&#xff09; 我们考虑原题中的条件&#xff0c;对于每一位&#xff0c;如果相同&#xff0c;则异或值为 0 0 0&#xff0c;如果为 1 1 1&a…

【Java项目推荐之黑马头条】自媒体文章实现异步上下架(使用Kafka中间件实现)

自媒体文章上下架功能完成 需求分析 流程说明 接口定义 说明接口路径/api/v1/news/down_or_up请求方式POST参数DTO响应结果ResponseResult DTO Data public class WmNewsDto {private Integer id;/*** 是否上架 0 下架 1 上架*/private Short enable;}ResponseResult 自媒…