账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-plus中el-cascader组件同时配置checkStrictly和lazy时,第一次不能选中
    53
    0
    vue3使用element-plus组件库,在页面使用el-cascader组件做三级联动功能时,同时配置checkStrictly(可以选中任意一级)和lazy时,如果想选第一级的某一项,第一次点击前面的radio会触发加载这一项的子项数据,而不是直接选中,需要再点击一次才能选中,第一次点第二级的某项也是会请求第三级的数据,需要再点击一次才能选中,对用户 太不友好了。开始以为是官方的bug,但是看源码里,原来是大佬故意为之的,不知道为何如此设计。
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 你是我预订的人i 普通会员 1楼

      el-cascader组件默认使用的是checkStrictly,检查选择是否已经满足当前条件。但是,如果在使用checkStrictly的同时配置了lazy,那么第一次不能选中。

      这是因为checkStrictly会检查所有满足条件的选择,这可能会导致第一次选择没有被选中。而lazy会只检查第一个满足条件的选择。

      解决这个问题的方法是将checkStrictly改为false,并将lazy改为true。这样,el-cascader就不会检查所有满足条件的选择,而是只检查第一个满足条件的选择。

      例如:

      javascript el-cascader .options({ data: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' }, ], valueKey: 'value', // ... checkStrictly: false, lazy: true, // ... });

      这样,第一次选择就会被选中,因为检查条件满足了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部