美文网首页
elementui cascader 取消选中 clearChe

elementui cascader 取消选中 clearChe

作者: 邮差在行动 | 来源:发表于2020-09-11 09:24 被阅读0次

    问题

    在form表单中使用cascader,某些需求下会将整个表单disabled,如果此时点击了cascader,它会disabled,但弹出框不会消失。

    官方文档

    查看文档,有个clearCheckedNodes方法,不知道这个clearCheckedNodes怎么用,在网上搜了一下。

    官方文档说明

    网上搜的结果
    给cascader设置上ref,如下:
    <el-cascader v-model.trim ="cId" ref="cascader" :options="category" @change="handleChange"></el-cascader>
    然后调用

        // 清空选中的节点
        this.$refs.cascader.$refs.panel.clearCheckedNodes(); 
        // 设置为空可以让节点不高亮显示
        this.$refs.cascader.$refs.panel.activePath = []; 
    

    上面的结果并没有解决我的问题。
    很多都说clearCheckedNodes有bug,只好去看看elementui原码。
    最终找到一些原码并应用成功了:

    let that = this;
    if (that.$refs.cascader){
      that.$refs.cascader.$refs.panel.clearCheckedNodes()
      that.$refs.cascader.$refs.panel.activePath = []  
      that.$refs.cascader.$refs.panel.scrollIntoView()
      that.$refs.cascader.$refs.input.$refs.input.setAttribute('aria-expanded', false)
      that.$refs.cascader.$emit('visible-change', false)
      that.$refs.cascader.$refs.panel.$emit('visible-change', false)
      that.$refs.cascader.$refs.panel.$emit('close')
    }
    

    相关文章

      网友评论

          本文标题:elementui cascader 取消选中 clearChe

          本文链接:https://www.haomeiwen.com/subject/wlcmektx.html