Vue el-tree 如何实现单选
Vue el-tree 如何实现单选最近项目用到el-tree,并且需要实现单选,搜了很多文章并研究了一下,实现代码如下,希望可以对你有帮助!<el-treeclass="tree-tap":data="deaplist"show-checkboxnode-key="deptid"ref="treeForm":check-on-click-node="true"
·
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,再把当前点击的设置进去,始终保持一个选中。
更多推荐
已为社区贡献1条内容
所有评论(0)