Vue el-tree 如何实现单选

最近项目用到el-tree，并且需要实现单选，搜了很多文章并研究了一下，实现代码如下，希望可以对你有帮助！

<el-tree
          class="tree-tap"
          :data="deaplist"
          show-checkbox
          node-key="deptid"
          ref="treeForm"
          :check-on-click-node="true"
          :props="defaultProps"
          @check="changetree"
          @check-change="handleNodeClick"
        ></el-tree>

data(){
          
   
	return {
          
   
		 deaplist: [],
        // deaplist1: [{deptname: 第十一监察检查室},{deptname: 驻苏州银行组}...
        defaultProps: {
          
   
          label: deptname,
          id: deptid
        },
	}
}

methods:

handleNodeClick(data, checked, node) {
          
   
        console.log(多选框设为单选框, checked, data)
        console.log(data.id:   + data.deptid)
        console.log(data:   + JSON.stringify(data))
        // console.log(this.$refs.treeFrom.current-node-key)
        if (checked) {
          
   
          this.$refs.treeForm.setCheckedKeys([data.deptid])
        }
        console.log(getCheckedKeys + this.$refs.treeForm.getCheckedKeys([data.deptid]))
      },
      
      changetree(data, lst) {
          
   
        console.log(lst:   + JSON.stringify(lst))
        console.log(lst.checkedKeys.length)
        if (lst.checkedKeys.length == 0) {
          
   
          //这里的treeForm是你el-tree命名的ref的值
          this.$refs.treeForm.setCheckedKeys([data.deptid])
        }
        this.getRightList()
      },

注意:

setCheckedKeys()必须设置 node-key，指向你勾选的选框的ID，必须唯一，最好和后台传过来的id做绑定，我这里后台传过来的是deptid。

然后通过setCheckedKeys([data.deptid]) 设置目前勾选的节点，始终保持checkedKeys里就一个选中的节点。

然后在changetree这个方法里，判断lst.checkedKeys的长度，如果为0，再把当前点击的设置进去，始终保持一个选中。