The El tree implementation only displays a certain level of check boxes and selects radio

In fact, after this thing is made , It's quite simple .

Let's talk about the idea of implementation first ：

  Show only one level of check boxes ：el-tree Provided in disabled attribute , When we set... For a node disabled After attribute , Then the current node is disabled , So let's find and add disabled The class name of the node check box , adopt display:none Just hide it , I've already found it here , The code is posted below .

The radio ： You all know that there are many check boxes , But demand is always unsatisfactory , You have to choose a single choice , It's not hard . After the election , Get the currently selected node object , Then reset the selected node （ Only the currently selected nodes are set , Single choice ）

The key codes are as follows ：

el-tree： Components

Note here that it is best to set node-key  Otherwise, something might go wrong  

<el-tree
  :data="treeData"
  :props="{ children: 'children', label: 'label' }"
  show-checkbox
  @check-change="checkChange"
  ref="Tree"
  :check-strictly="true"
  node-key="id"
></el-tree>

After getting the tree data from the back end ： 

Because I can only choose the innermost layer here （ No children The hierarchy of ） So add... Recursively disabled attribute , No, children Do not add

//   Get the right tree data 
getTreeList() {
  /**
   * ajax  Got the data   and  this.treeData = data.data
   *   After acquisition 
   */
  this.setDisabled(this.treeData)
},
//   Xiang you children Add... On the node of disabled attribute 
setDisabled(treeData) {
  treeData.forEach(item => {
    if(item.children && item.children.length) {
      item.disabled = true
      this.setDisabled(item.children)
    }
  })
},

then css:

Just set this here , There are disabled Property will not display the check box  

/*  Hide el-tree There is disabled Attribute frame  */
/deep/.el-checkbox__input.is-disabled{
  display: none;
}

Then you can only choose one ： 

//   Select the check box to trigger 
checkChange(currObj,isChecked) {
  if(isChecked) {  //  After selecting, we will reset the selected node （ Only the currently selected nodes are set , Single choice ）
    this.$refs.Tree.setCheckedNodes([currObj])
  }
},

effect ：