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

要实现 element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能，需要按照下面的步骤进行操作：

1.引入依赖：首先需要在项目中安装 element-ui 和 vue-bus，command：npm install element-ui vue-bus --save；
2.在 main.js 中完成直接注册 bus：Vue.prototype.bus = new Vue()；
3.为 el-tree 添加一个 slot，并在其中添加多选框 el-checkbox，并在其 change 方法中使用子组件的父组件方法，例如：$emit() 或者 $bus.emit() 发送自定义事件并传递值；
4.在父组件中，监听子组件传递过来的值，可以通过 $on() 或 $bus.$on() 方法进行监听，并在自定义事件函数的回调函数中接收值并处理即可；

示例一：

<template>
  <el-tree :data="dataList" :props="defaultProps" node-key="id">
    <span class="custom-checkbox" slot-scope="{ node }">
      <el-checkbox v-model="node.checked" @change="handleChange(node)"></el-checkbox>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          label: "第一级",
          children: [
            {
              id: 2,
              label: "第二级",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(node) {
      this.$bus.emit("tree-check-change", node.checked);
    }
  }
};
</script>

在上面代码中，我们使用了自定义的多选框来渲染每个节点，通过监听多选框的 change 事件并调用父组件的 $bus.$emit() 方法来发射一个自定义事件 “tree-check-change”，并传递了当前节点的checked属性作为参数。

接下来，我们在父组件中来监听自定义事件：

<template>
  <div>{{ checkedVal }}</div>
</template>

<script>
export default {
  data() {
    return {
      checkedVal: ""
    };
  },
  mounted() {
    this.$bus.$on("tree-check-change", checked => {
      this.checkedVal = checked;
    });
  }
};
</script>

在上述代码中，我们使用了 $bus.$on() 方法来监听来自子组件的自定义事件 “tree-check-change”，并在回调函数中来处理获取所选节点的checked属性，并绑定到原数据中的checkedVal属性上，以便在前端页面中进行和显示上的交互。

示例二：

<template>
  <el-tree :data="dataList" :props="defaultProps" node-key="id">
    <span class="custom-checkbox" slot-scope="{ node }">
      <el-checkbox v-model="node.checked" @change="handleChange(node)"></el-checkbox>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          label: "第一级",
          children: [
            {
              id: 2,
              label: "第二级",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(node) {
      this.$emit("tree-check-change", node.checked);
    }
  }
};
</script>

在上面的代码中，我们使用了 $emit() 方法来发射一个自定义事件 ‘tree-check-change’ 并传递了当前节点的 checked 属性，该组件在父组件中作为子组件使用。我们在父组件中来监听这个自定义事件的值：

<template>
  <div>chekced: {{ checked }}</div>
  <tree @tree-check-change="handleCheckrc"></tree>
</template>

<script>
import Tree from "./tree"

export default {
  components:{
    Tree
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    handleCheckrc(checked) {
      this.checked = checked;
    }
  }
};
</script>

在上述代码中，我们使用 @tree-check-change 事件来捕获来自子组件的自定义事件 “tree-check-change”，在回调函数中获取所选节点的checked属性，并已经绑定在了原数据中的handledChcek属性上，已经可以在页面进行交互处理。