Element Cascader踩坑——lazyload
2020-03-18 本文已影响0人
正义国王
问题:lazyload如何选择到中间层停止
Cascader 支持动态加载,即每次点击当前层的节点才对应加载下一层的数据,这个模式非常实用,可以避免数据量较大时一次性加载时间会过长。可是它却有个缺点,默认展开到最后一级才能完成选择,如下图:
可是如何做到只选择到中间层就停止呢?如下图:
官方文档有个属性貌似可以解决这个问题:
checkStrictly
,可以设置父子节点是否互相关联。效果图如下:
但是它有个我觉得是明显的缺点,操作不方便:上图中点击单选框是添加,点击选项是加载,而且只点击单选框而不点击选项时还会显示“暂无数据”:
上面也只是个人看法,于是我的解决办法是想方设法在选到某一层时就直接修改input框中的文字,那么就硬来直接修改虚拟节点(Vue对象)了。
<el-cascader
ref="cascader"
:props="props"
@expand-change="expandChange"
></el-cascader>
//在节点展开层级变化时修改input框中显示的文字
expandChange(expandArr) {
const expandStr = expandArr.join("/");
this.$refs.posCascader.presentText = expandStr;
console.log("ref", this.$refs.posCascader);
}
这个presentText
属性我找了好久好久,因为其他很多属性也存有Input的值,比如value
、inputValue
等,但是修改它们不能解决问题,因为一旦你选择完毕,下拉菜单消失之后,input框中的值又变回去了。可能它们都依赖于presentText
,在选择完后会触发某个方法把其他值又变回presentText
,所以改变 presentText
才是根本的解决之道。(后来看了一下源码,确实是这样,在一些方法中会将其他值更新为presentText)
其他办法:options
options 可以设置cascader组件的层级数据,也可以通过v-model
绑定,但是没有动态加载,要做的话可能会麻烦一点,但也可以实现想要的效果。
如果有其他更好的办法求求评论,我觉得直接操作Vue对象不算好的办法。