element ui 树形控件tree实现单选功能

vue+ element ui 树形控件tree实现单选功能

每天进步一点点~ 加油！
需求：
1：父子节点不关联，且，
2：父节点不显示复选框，并且不传值给后端
3：实现单选
1：解决父子节点不关联

//check-strictly
<el-tree
  :props="props"
  :load="loadNode"
   check-strictly
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

2：父节点不显示复选框
注意：
如果标签上有scoped 会有样式修改失败的情况，去掉之后，在el-tree前加当前页面的id或者class就可以了，也可以 避免样式污染

//
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{display: inline-block;}
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner{display: none;}

3：实现单选

<el-tree
  :props="props"
  ref="treeList"
  :load="loadNode"
   check-strictly
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

handleCheckChange(data, checked, tree) {
      if (checked) {
        this.currentNodeData.id = data.id
        this.$refs.treeList.setCheckedNodes([data.id])
      }
    },

如果对小伙伴们有帮助，大家别忘了 双击点赞哦