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

最新推荐文章于 2024-02-22 11:58:43 发布

October_CanYang

最新推荐文章于 2024-02-22 11:58:43 发布

阅读量3.4k

点赞数 2

分类专栏：日常积累文章标签： javascript vue.js elementui css

本文链接：https://blog.csdn.net/weixin_41840836/article/details/116228243

版权

日常积累专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue和ElementUI库创建一个单选的树形控件。通过设置`check-strictly`属性解决父子节点不关联问题，隐藏父节点复选框，以及利用`@check-change`事件实现单选功能。关键代码包括对父节点复选框样式的调整和在`handleCheckChange`中设置当前选中节点。

摘要由CSDN通过智能技术生成

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])
      }
    },

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