elmentui Tree组件单选问题以及清除选中状态
1、实现单选功能:主要利用tree组件中的check、setCheckedKeys方法,需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。<el-treeref="tree":data="data"show-checkboxnode-key="dictCode":props="defaultProps"@check="handleCheck"
·
1、实现单选功能:主要利用tree组件中的check、setCheckedKeys方法,需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="dictCode"
:props="defaultProps"
@check="handleCheck"
:filter-node-method="filterNode"
style="height:360px;overflow:scroll;overflow-x:auto"
>
</el-tree>
handleCheck(data, checked) {
if(data.parentCode=='0'){
this.$message.warning('不能选择父节点,请重新选择')
this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态
} else{
this.dictLabel = data
this.$refs.tree.setCheckedKeys([data.dictCode]) // 单选
}
},
2、清除复选框状态:封装一个清除的函数,在需要清除的地方调用函数
reset(){
this.data.forEach(ele=>{ // 把已选中的复选框清除
this.$nextTick(()=>{
this.$refs.tree.setChecked(ele.dictCode,false,true)
})
})
}
3、在弹框每次弹起的时候 清除树的选择状态:监听弹框
watch: {
dialogVisible(newVal,oldVal){
if(newVal == true){
this.reset()
}
}
},
更多推荐
已为社区贡献4条内容
所有评论(0)