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

前提问题: 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全部放到一个数组里传到该属性中也可达到同样的自动展开效果。

相关推荐
aesthetician3 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手6 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng7 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科7 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20167 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔10 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder10 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔10 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔10 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀10 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js