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

相关推荐
快起来别睡了几秒前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v5 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue9 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂13 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷13 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016114 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
凌览16 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣19 分钟前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder37 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士37 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js