element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

el-tree 单选功能

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

el-tree 单选

html 代码

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

事件方法部分

*** 注：下面方法中的 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' , '')
     }
   }
 }

**

bus 传参方法的使用方式*

bus 方式传递方式多用于 vuex 状态层不复杂的情况，bus只能使用在已存在的组件之间的传递参数，如果是给 v-if 的组件使用的话，组件是捕获不到传递信息的（这种情况就需要状态层或者缓存来传递参数了，以后的文章讲到），bus 中有三种方法：

$emit: 传递参数；  $on: 接收参数；  $off: 解除监听传参

1、在 vue 项目中使用 bus 传递参数，需要在 main.js 中进行全局配置

 *** main.js ***
 let bus = new Vue()
 Vue.prototype.$bus = bus

2、在主动传递参数组件中如何传递参数

*** 注：
1、name：自己定义的名字随便起就行，但是注意在被传递组件中要用相同的名字去接收，解除监听传参也是同样的名字的解除。
2、data：这里的参数data可以是对象、字符串、数字。参数也可以穿多个，例如 ：this.$bus.$emit('name',a,b,c,d);不过通常情况下，都是出传一个 data 对象即可，这样方便取值和查看。
 ***
this.$bus.$emit('name',data)

3、被传递参数组件如何接收值

单个对象、字符串、数字等方式接收参数 (***推荐***)
this.$bus.$on('name',res => {
   console.log(res)
})
多个参数接收方参数 (不推荐)
this.$bus.$on('name'(a,b,c,d) => {
   console.log(a,b,c,d)
})

4、解除监听传参

// 可以在组件销毁前 解除监听
beforeDestroy () {
  this.$bus.$off('name');
},

到此这篇关于element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数的方法的文章就介绍到这了,更多相关element UI el-tree单选内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！