Vue el-tree 如何实现单选

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，再把当前点击的设置进去，始终保持一个选中。