el-tree的renderContent的retrun的html中添加点击事件

要在 el-tree 的自定义节点内容中添加点击事件，你可以在 Render 函数中为相应的 HTML 元素绑定事件处理程序。以下是一个示例，演示如何在 el-tree 的节点内容中添加点击事件：

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="treeProps"
      :render-content="renderNodeContent"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          children: [
            { label: '子节点1' },
            { label: '子节点2' },
          ],
        },
        {
          label: '节点2',
          children: [
            { label: '子节点3' },
            { label: '子节点4' },
          ],
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    renderNodeContent(h, { node, data, store }) {
      return (
        <span>
          <span
            onClick={() => this.handleNodeClick(data)}
            style={{ cursor: 'pointer' }}
          >
            {data.label}
          </span>
          {data.children && data.children.length > 0 && (
            <span style="color: gray; margin-left: 5px">
              ({data.children.length})
            </span>
          )}
        </span>
      );
    },
    handleNodeClick(data) {
      console.log('点击了节点:', data);
      // 在这里执行你的逻辑
    },
  },
};
</script>

在上述示例中，我们在 Render 函数中为 <span> 元素添加了 onClick 事件处理程序，并将其绑定到 handleNodeClick 方法上。

在 handleNodeClick 方法中，我们可以访问到当前节点的数据对象 data。你可以在该方法中执行你的逻辑，例如处理点击事件、展开/折叠节点、加载子节点数据等。

通过这种方式，你可以在 el-tree 的自定义节点内容中添加点击事件，并在方法中处理相应的逻辑。