element UI 中的 el-tree 实现 checkbox 单选框功能，及 bus 传递参数的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI 中的 el-tree 实现 checkbox 单选框功能，及 bus 传递参数的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-tree 单选功能
在日常项目开发中，会经常遇到，树形结构的查询方式，为了快速方便开发，常常会使用到快捷的ui组件去快速搭树形结构，这里我用的是 element ui 中的 el-tree 。第一次接触这种功能的时候也是各种网站查询，虽然也都能实现功能，但是都会有一些小问题，就很难受，那么我们废话不多说（好像也说了不少呢😅），直接上效果。

20231020162227

原文链接：https://blog.csdn.net/weixin_49934623/article/details/125275342

html 代码

    *** 注： load 和 lazy 属性不是需要的粘贴时请删除。（只有需要懒加载的树才需要，关于怎样构建懒加载树以后的文章会讲到）***
属性介绍：
:props="props" // 下面的 data 代码中有说明。
node-key="id" // 这个属性是用来标记 tree 的节点的 实现 checkbox节点操控 必须搭配 node-key 使用，这里的 id 是根据数据里面的唯一字段定义的，如果你的数据里唯一字段为 isId 那就设置为 node-key="isId"。
:expand-no-click-node="true" // 为点击节点时是否可展开下一级别，true=展开、false=不展开。
ref="tree" // 定义 ref ，方便操作 dom 节点 ，名字自定义。
show-checkbox // 显示 checkbox 多选框。
:check-strictly="true" // 解除父子节点的关联，true=解除、false=绑定。
@check="checkClick" // checkbox 背点击的时候出发的事件。
 <el-tree
   :props="props"
   :load="loadNode"
   lazy
   node-key="id"
   :expand-no-click-node="true"
   ref="tree"
   show-checkbox
   :check-strictly="true"
   @check="checkClick"
 >
 </el-tree>

data 部分

export default {
  data(){
    return{
      props:{
        label:'text', // 用来定义 tree 上展示的字段，根据自己用到数据，绑定需要的字段名称。
        children:'childNodes', // tree 每一级别节点，子级数据，保存的字段位置，根据自己的数据，定义字段名称。
        isLeaf:'chlid', // 只有需要懒加载 tree 的时候用到，是用来确定时候为最后一级别的节点，这样该节点被点出来的时候，就不会提示还有下一级别的三角符号 *注：这里复制的时候不要带上这个属性，至于如何时候后面的文章讲到懒加载树的时候会提到。
        id:'id' // 节点绑定的 id 要和上面 html 标签中的 node-key="id" 属性设置的值要对应。
      }
    }
  }
————————————————
版权声明：本文为CSDN博主「ZhuDi.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49934623/article/details/125275342

事件方法部分

*** 注：下面方法中的 this.$bus.$emit() 是用来组件传递参数的。使用方式会在文章最下面提到。***
 methods:{
    // 这个方法默认为两个参数，第一个参数为选中的 checkbox 所在的节点数据，第二参数是目前选中状态的集合之类的一些数组集合，因为是单选这里不需要这个参数。
   checkClick(data){
     // 先默认为多选模式， 获取目前所有被选中 checkbox 的集合 这里的集合是每个节点的数据。
     let getNode = this.$refs.tree.getCheckedNodes()；
     // 判断 getNode 长度是否大于0，因为这里用到了组件之间的传值了所有进行了判断，如果小于0，传递一个空的数据过去。（大于0：代表tree中有至少有一个checkbox被选中。 小于0：代表tree中没有一个checkbox被选中）
     if (getNode.length > 0) {
       // 循环 getNode 判断如果当前选中 checkbox 中的id 与 getNode 数组中有相同值的 id 的一项，那么就通过 setChecked() 方法设置这个一项被选中，其他像项则通过 setChecked() 取消选定
       getNode.forEach(item => {
         if (data.id == item.id) {
           this.$refs.tree.setChecked(item.id , true);
           this.$bus.$emit('otherCheck' , item.id)
         } else {
           this.$refs.tree.setChecked(item.id , false);
         }
       } ）
     } else {
       this.$bus.$emit('otherCheck' , '')
     }
   }
 }
————————————————
版权声明：本文为CSDN博主「ZhuDi.」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49934623/article/details/125275342

文章来源地址https://www.toymoban.com/news/detail-846627.html

到了这里，关于element UI 中的 el-tree 实现 checkbox 单选框功能，及 bus 传递参数的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！