problem description
A department selector (that is, organizational structure) is needed in the system, and only one department can be selected at a time, and many pages need to be used, so it is encapsulated into a common sub-component, which is shown and hidden through the built-in pop-up box component el-dialog, and the setCheckedKeys method is used to achieve the radio selection effect, but as long as a department is checked, all options cannot be cleared through setCheckedKeys or setChecked
. after selecting the department of the child component, the form of the parent component displays the corresponding department name
the environmental background of the problems and what methods you have tried
the check cannot be unchecked through the this.$refs.tree.setCheckedKeys ([]) method, because there is this code below:
/ / disable unchecking the current checkbox, which is equivalent to the effect of radio
if(this.department_id==data.id){
this.$refs.tree.setCheckedKeys([data.id],true)
}if you remove this code, you can uncheck all the boxes through the this.$refs.tree.setCheckedKeys ([]) method, but it does not meet the product requirements
.related codes
< template >
< el-dialog width= "520px": visible.sync= "dialogState" @ opened= "open": before-close= "beforeClose" title= "Select department" >
<el-tree :data="organization"
:props="defaultProps"
node-key="id"
ref="tree"
:expand-on-click-node="false"
@check-change="handleClick"
show-checkbox
check-on-click-node
:check-strictly="true"
default-expand-all
icon-class="el-icon-menu"></el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="beforeClose"> </el-button>
<el-button type="primary" @click="$emit("change-department",department_id,department_name)"> </el-button>
</div>
< / el-dialog >
< / template >
/ / pop-up box is opened, the check box is cleared by the value passed by the parent component, but there is no effect
open () {
let self = this
self.$refs.tree.setCheckedKeys([])
},/ / the radio selection effect of tree component checkbox is realized by using setCheckedKeys method
handleClick(data,checked, node) {
if(checked){
this.department_id = data.id
this.department_name = data.name
//checkbox
this.$refs.tree.setCheckedKeys([data.id],true)
}else{
//checkboxradio
if(this.department_id==data.id){
this.$refs.tree.setCheckedKeys([data.id],true)
}
}
},
do you have any other ways? It can not only achieve an effect similar to radio, but also uncheck all checks when needed, just like when the department selector is initialized, there is no check