el-cascader的 ‘异步动态加载’ 和 ’checkStrictly‘ 属性并存时,存在一个空白面板问题

680 阅读1分钟

为什么点击radio显示暂无数据呢?度娘一夜依旧没有找到原因,然而查看原因,查看源组件如何写,在同事的帮助下,一步一步查看源码解决,在此感谢同事的耗资,不易,感谢感谢,少说废话,直入真题哈

思路如下:

多次发现,菜单是否由两部分组成,radio与panel组成,为什么radio只调用自己的方法onChange事件,而没有调用panel的loadLazy事件,可能的情况,原有的事件被冒泡阻止,测试猜测的思路是否正确,验证方式,代码如下:

  1. 选中 radio对应的label标签代码
  2. 执行两句代码
var listener = getEventListener($0)['click'][0]['listener']
$0.removeEventListener('click' , listener)

  1. 随后触发radio点击事件,结果可以调用loadLazy事件,说明组件设置了radio的冒泡事件
  2. 查看源码的方式,源码的相关代码如图示

搜狗截图20210403182232.png 5. 解决方法

(a).重写radio的nativeOnClick事件
const fn = config.isUseRadio ? (e) => { } : stopPropagation
nativeOnClick={ fn }
(b).重写radio的change事件
handleCheckChange() {
        const { panel, value, node } = this;
        panel.handleCheckChange(value);
        config.isUseRadio ? (e)=>{} : panel.handleExpand(node);
     }
     

总结:为了解决这个问题,自己投入3,4小时没有解决,问题的解决能力还需有待提升,在同事的帮助下,终于搞定了,开心一下,请大佬喝奶茶去了哈,走咯~,若能帮助小伙伴的话,点个赞吧~~