【elementui】el-tree开启show-checkbox，点击叶子节点触发勾选

在Element UI的el-tree组件中，当show-checkbox属性启用时，默认情况下点击叶子节点不会触发勾选。但是，可以通过监听节点点击事件并手动更改节点的选中状态来实现这一功能。

以下是一个简单的实现示例：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    ref="tree"
    :props="defaultProps"
    @node-click="handleNodeClick"
  >
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 树形结构数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data, node, self) {
      if (!node.checked) {
        this.$refs.tree.setChecked(data.id, true);
      } else {
        this.$refs.tree.setChecked(data.id, false);
      }
    }
  }
};
</script>

在这个示例中，handleNodeClick方法被用来处理节点的点击事件。当点击节点时，会检查该节点是否已被勾选。如果未勾选，则通过this.$refs.tree.setChecked(data.id, true)勾选该节点；如果已勾选，则取消勾选。这样就实现了点击叶子节点时同时勾选该节点的功能。