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的值,比如valueinputValue等,但是修改它们不能解决问题,因为一旦你选择完毕,下拉菜单消失之后,input框中的值又变回去了。可能它们都依赖于presentText,在选择完后会触发某个方法把其他值又变回presentText,所以改变 presentText才是根本的解决之道。(后来看了一下源码,确实是这样,在一些方法中会将其他值更新为presentText)

其他办法:options

options 可以设置cascader组件的层级数据,也可以通过v-model绑定,但是没有动态加载,要做的话可能会麻烦一点,但也可以实现想要的效果。


如果有其他更好的办法求求评论,我觉得直接操作Vue对象不算好的办法。

上一篇下一篇

猜你喜欢

热点阅读