当前位置: 首页 > 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

http://www.lryc.cn/news/186118.html

相关文章:

  • 图论第3天----第841题、第463题
  • 软件测试/测试开发丨利用ChatGPT 生成自动化测试脚本
  • 3.3.OpenCV技能树--二值图像处理--图像形态学操作
  • 这15个海运提单的雷区 你知道吗?
  • 几道web题目
  • API接口大全分享,含短信API、IP查询API。。。
  • 记录一次springboot使用定时任务中@Async没有生效的场景
  • 腾讯云/阿里云国际站免费账号:腾讯云国际站如何对象存储cos设置防盗链
  • python编程:使用 Pillow 将照片转换为1寸报名照片
  • Aria2 for Mac (免HomeBrew)
  • 【Java】微服务——Gateway网关
  • 大厂笔试汇总
  • 【数据结构】快排的详细讲解
  • 蓝牙资讯|三星推迟发布智能戒指Galaxy Ring,智能穿戴小型化是大趋势
  • 移动端tree树
  • SpringTask ----定时任务框架 ----苍穹外卖day10
  • Fuzz测试:发现软件隐患和漏洞的秘密武器
  • 无为WiFi的一批服务器
  • SpringBoot3.0——踩坑
  • Springboot的自动装配原理和文件上传FastDFS
  • 【数据库开发】DQL操作和多表设计
  • 用PyTorch轻松实现二分类:逻辑回归入门
  • [nltk_data] Error loading stopwords: <urlopen error [WinError 10054]
  • 基于Spring Boot的网上租贸系统设计与实现(源码+lw+部署文档+讲解等)
  • 通过IP地址管理提升企业网络安全防御
  • termius mac版无需登录注册直接永久使用
  • TPU编程竞赛|Stable Diffusion大模型巅峰对决,第五届全球校园人工智能算法精英赛正式启动!
  • 微信小程序 rpx 转 px
  • 机器学习之旅-从Python 开始
  • 100天精通Python(可视化篇)——第103天:Pyecharts绘制多种炫酷水球图参数说明+代码实战