el-tree点击子节点渲染el-table内容,帮我写个示例

好的，以下是一个简单的示例，可以帮助您实现el-tree点击子节点渲染el-table的功能：

<template>
  <div>
    <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    <el-table :data="tableData" v-if="showTable">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '节点1',
          children: [
            {
              label: '子节点1',
              data: [
                { name: '张三', age: 18, gender: '男' },
                { name: '李四', age: 20, gender: '女' },
                { name: '王五', age: 22, gender: '男' }
              ]
            },
            {
              label: '子节点2',
              data: [
                { name: '赵六', age: 24, gender: '女' },
                { name: '钱七', age: 26, gender: '男' },
                { name: '孙八', age: 28, gender: '女' }
              ]
            }
          ]
        },
        {
          label: '节点2',
          children: [
            {
              label: '子节点3',
              data: [
                { name: '周九', age: 30, gender: '男' },
                { name: '吴十', age: 32, gender: '女' },
                { name: '郑十一', age: 34, gender: '男' }
              ]
            }
          ]
        }
      ],
      tableData: [],
      showTable: false
    }
  },
  methods: {
    handleNodeClick(data) {
      if (data.data && data.data.length > 0) {
        this.tableData = data.data
        this.showTable = true
      } else {
        this.showTable = false
      }
    }
  }
}
</script>

在这个示例中，我们使用了一个el-tree组件，它展示了一个树形结构的节点，并且绑定了一个node-click事件，当用户点击节点时，调用handleNodeClick方法。在handleNodeClick方法中，我们判断当前节点是否具有data属性，并且data数组中是否有数据，如果有数据，则将tableData设置为对应的数据，并将showTable设置为true，从而显示el-table组件。否则，将showTable设置为false，隐藏el-table组件。

希望这个示例对您有所帮助！