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

你可能感兴趣的:(vue,vue,js)