vue3+element Plus 清空el-tree复选框选中项

发布时间:2023年12月18日

前提问题:el-tree加了show-checkbox复选框属性后,在选择完复选框后切换,不会自动清空选中内容,要求在切换时清空复选框选中内容,
解决过程:设置el-tree的ref值,使用setCheckedKeys方法可清空复选框所选中的内容
解决方法:

html:

<el-tree
? ?highlight-current
? ?:data="props.menuData"
? ?@node-click="handleClick"
? ?@node-expand="showPushData"
? ?ref="treeRef"
? ?:expand-on-click-node="false"
? ?node-key="id"
? ?:default-expanded-keys="props.expandIdList"
? ?:show-checkbox="state.switchRelate"
? ?:props="{ disabled: disabledNodeClass, class: customNodeClass }"
? ?:check-strictly="false"
? ?@check="getChecked"
>
</el-tree>
<div class="relateBtn">
? ? <el-button type="primary" @click="switch">切换</el-button>
</div>


?js:

const switch= () => {
? ? //清空复选框勾选内容
? ? treeRef.value.setCheckedKeys([])
}

注意:1.el-tree的node-key属性一定要有,我第一次写的是node-key="type"时setCheckedKeys未生效,后改为node-key="id"生效。
? ? ? ? ? ?2.原本写node-key="type"是为了default-expanded-keys属性自动展开时,依据type值展开,但因为这样写setCheckedKeys不生效所以改成了id,default-expanded-keys给的值可以是一个变量,将type为某某值的id全部放到一个数组里传到该属性中也可达到同样的自动展开效果。

文章来源:https://blog.csdn.net/m0_75107188/article/details/135062010
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。