el-cascader

场景:

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

  1. 非lazy的场景
javascript 复制代码
selecetedOptions2: [
  [1, 2, 3],
  [1, 2, 4],
],

可以正常回显;==> ok

  1. lazy场景下:

    是不可以回显的...

  2. 如果el-cascader是异步的单选

    cascader默认会加载下个层级的(子层级会执行调用),并选中状态 ==> ok

所以只有lazy+多选,回显的时候有问题。

使用了其他的方法,还是没有解决,暂时搁置了。

javascript 复制代码
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给扁平化了,支持模糊搜索...
html 复制代码
<!--使用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>
javascript 复制代码
// 选择组织
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)
},
javascript 复制代码
/***
 * 获取所属企业(组织)
 * 1.有环境里,有一万多条数据(一级一万多条,二级很少很少),
 *  cascader(element2.x):
 *   1)一级一万多条,二级很少很少此时页面会卡死
 *   2)7000多条一级数据,当前页面渲染还行,但是跳转其他页面的时候,明显延迟了很多秒(5s以上)
 *   tree:
 *   1)7000多条一级数据,当前页面渲染已经有点困难了,会有卡死现象
 * 2.其他方案:
 * select里套一个input和tree,然后做成模糊搜索的;但是搜索结果不是tree类型的,成平铺状态的了...
 *
 */

element3.x是ok的。虚拟dom

相关推荐
秋田君2 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡4 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则4 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6734 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴5 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子5 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead5 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode5 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
前端世界6 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos