el-cascader

news/2024/7/5 5:18:24

场景:

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" clearable
           style="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.id
  this.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://lihuaxi.xjx100.cn/news/1601028.html

相关文章

CXF调用webservice跳过https认证

1、相关依赖 compile (org.apache.cxf:cxf-spring-boot-starter-jaxws:3.5.5)2、添加配置 package com.tele.health.operation.api.listener;import org.apache.cxf.configuration.jsse.TLSClientParameters; import org.apache.cxf.transport.http.HTTPConduit; import org.…

tomcat整体设计解析

&#x1f514;简介 简介从各个视角看tomcat tomcat是一个Servlet 容器&#xff1f;Servlet规范与tomcat实现整体架构 启动过程io处理 connector 架构io 和线程模型 业务处理 container 架构 tomcat的类加载Sprint Boot如何利用Tomcat加载Servlet&#xff1f;Tomcat如何支持异步…

不用休眠的 Kotlin 并发:深入对比 delay() 和 sleep()

本文翻译自&#xff1a; https://blog.shreyaspatil.dev/sleepless-concurrency-delay-vs-threadsleep 毫无疑问&#xff0c;Kotlin 语言中的协程 Coroutine 极大地帮助了开发者更加容易地处理异步编程。该特性中封装的诸多高效 API&#xff0c;可以确保开发者花费更小的精力去…

高效解决 TypeError : ‘ numpy._DTypeMeta‘ object is not subscriptable 问题

文章目录 问题描述解决问题 问题描述 解决问题 参考博文 打开报错位置 AppData\Roaming\Python\Python39\site-packages\cv2\typing\ 添加single-quotes&#xff0c;即单引号 博主说The trick is to use single-quotes to avoid the infamous TypeError: ‘numpy._DTypeMeta’…

嵌入式养成计划-30-网络编程----多点通信--单播--广播--组播

六十六、多点通信 66.1 网络属性相关函数 getsockoptsetsockopt 功能&#xff1a;获取/设置网络属性; 原型&#xff1a;#include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname, void *opt…

微信小程序:实现列表单选

效果 代码 wxml <view class"all"><view class"item_all" wx:for"{{info}}" wx:key"index"><view classposition {{item.checked?"checked_parameter":""}} data-id"{{item.employee_num}}…

Redis AOF重写原原理

重写aof之前 appendonly.aof.1.base.aof appendonly.aof.1.incr.aof appendonly.aof.manifest 重写aof 一次 appendonly.aof.2.base.aof 大小变化 appendonly.aof.2.incr.aof 大小o appendonly.aof.manifest 大小不变 AOF文件重写并不是对原文件进行重新整理&#xff0c;而是直…

linux单机部署kafka

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、环境准备1.jdk版本2.kafka安装包3.可视化工具 二、安装部署1.配置文件修改2.启动 结尾 前言 Kafka是一个分布式的流处理平台。kafka主要是作为一个分布式的…