el-cascader

场景：

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

1. 非lazy的场景

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

可以正常回显；==> ok

2. lazy场景下：
   是不可以回显的…

3. 如果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)
1
2
3
4

使用其他的组件：@vueblocks/elp-cascader，适用于数据量较大的场景。

查询企业（tree）

tree可以是多层级，且数据较多。

1. 使用cascader
2. 使用tree
3. 使用input和tree模拟select效果
4. 使用了select，把tree给扁平化了，支持模糊搜索…

/***
 * 获取所属企业（组织）
 * 1.有环境里，有一万多条数据(一级一万多条，二级很少很少)，
 *  cascader（element2.x）:
 *   1)一级一万多条，二级很少很少此时页面会卡死
 *   2)7000多条一级数据，当前页面渲染还行，但是跳转其他页面的时候，明显延迟了很多秒（5s以上）
 *   tree:
 *   1)7000多条一级数据，当前页面渲染已经有点困难了，会有卡死现象
 * 2.其他方案：
 * select里套一个input和tree，然后做成模糊搜索的；但是搜索结果不是tree类型的，成平铺状态的了...
 *
 */
1
2
3
4
5
6
7
8
9
10
11
12

使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 选择组织
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
2
3
4
5
6
7
8
9

注：element3.x是ok的。虚拟dom

el-cascader 单选，需要点击label后选中接口，而不是点击radio

:popper-class="'ksCascaderPoper'" ： 添加类名

// 全局样式
.ksCascaderPoper{
  background: #Fefefe;

  // 设置w，铺满行
  .el-cascader-menu .el-radio {
    display: table;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-left: -25px;
    padding-left: 15px;
    margin-top: 2px;
  }
  .el-cascader-menu .el-radio .el-radio__input {
    display: table-cell;
    vertical-align: middle;
  }
  // 给折叠按钮，范围增大一些
  .el-cascader-node__postfix{
    padding: 4px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

⇒ 此时只能点击小箭头才能展开下一级…

let caspanel = this.$refs.elCascaderRef.panel
let node = this.$refs.elCascaderRef.panel.menus
caspanel.handleExpand(node[0].children[0],true)
1
2
3

获取选中节点的item内容：

let selectNode  = this.$refs.elCascaderRef.getCheckedNodes()
1

参考：
https://blog.csdn.net/qq_16382227/article/details/129735904
https://blog.csdn.net/weixin_43742167/article/details/132081477