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

相关推荐
fruge4 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评13 分钟前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
Dragon Wu27 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码34 分钟前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
开发者小天7 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
学习笔记10110 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
程序员杨工12 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky13 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊13 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript