ITPub博客

首页 > 应用开发 > Javascript > Elementui cascader组件如何取消选中 clearCheckedNodes

Elementui cascader组件如何取消选中 clearCheckedNodes

原创 Javascript 作者:yikehulian01 时间:2020-10-21 16:14:07 0 删除 编辑
  • 问题

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

  • 查看文档

  • 给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')
}


解决问题:编辑表单回显情况!以上内容仅供参考。。。



来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69985427/viewspace-2728491/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
搭建专属的移动订货商城 免费使用

注册时间:2020-10-14

  • 博文量
    57
  • 访问量
    55707