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

相关推荐
獨枭25 分钟前
使用 Spring Boot 快速构建企业微信 JS-SDK 权限签名后端服务
javascript·spring boot·企业微信
前端.火鸡2 小时前
认识vue中的install和使用场景
前端·javascript·vue.js
hhw1991123 小时前
vue总结
前端·javascript·vue.js
代码续发3 小时前
Vue进行前端开发流程
前端·vue.js
加减法原则4 小时前
深入理解Vue 生命周期
vue.js
冴羽4 小时前
SvelteKit 最新中文文档教程(19)—— 最佳实践之身份认证
前端·javascript·svelte
拉不动的猪4 小时前
ES2024 新增的数组方法groupBy
前端·javascript·面试
前端极客探险家5 小时前
实现一个拖拽排序组件:Vue 3 + TypeScript + Tailwind CSS
css·vue.js·typescript·排序算法
奶球不是球5 小时前
vue3中pinia基本使用
vue.js·pinia
tryCbest5 小时前
Vue2-实现elementUI的select全选功能
前端·javascript·elementui