场景:
el-cascader + lazy + multiple + 反显数据
- 非lazy的场景
selecetedOptions2: [
[1, 2, 3],
[1, 2, 4],
],
可以正常回显;==> ok
-
lazy场景下:
是不可以回显的… -
如果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可以是多层级,且数据较多。
- 使用cascader
- 使用tree
- 使用input和tree模拟select效果
- 使用了select,把tree给扁平化了,支持模糊搜索…
/***
* 获取所属企业(组织)
* 1.有环境里,有一万多条数据(一级一万多条,二级很少很少),
* cascader(element2.x):
* 1)一级一万多条,二级很少很少此时页面会卡死
* 2)7000多条一级数据,当前页面渲染还行,但是跳转其他页面的时候,明显延迟了很多秒(5s以上)
* tree:
* 1)7000多条一级数据,当前页面渲染已经有点困难了,会有卡死现象
* 2.其他方案:
* select里套一个input和tree,然后做成模糊搜索的;但是搜索结果不是tree类型的,成平铺状态的了...
*
*/
使用input和tree模拟select效果:
<!--使用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)
},
注: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;
}
}
⇒ 此时只能点击小箭头才能展开下一级…
let caspanel = this.$refs.elCascaderRef.panel
let node = this.$refs.elCascaderRef.panel.menus
caspanel.handleExpand(node[0].children[0],true)
获取选中节点的item内容:
let selectNode = this.$refs.elCascaderRef.getCheckedNodes()
参考:
https://blog.csdn.net/qq_16382227/article/details/129735904
https://blog.csdn.net/weixin_43742167/article/details/132081477