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');
},