手写el-tree组件

好的，我可以为您提供一个简单的手写 el-tree 组件的示例。

首先，你需要定义一个 Vue 组件，命名为 `ElTree`。在组件中，你需要定义一个 template，其中包含树的节点。每个节点应该包含一个展开/折叠按钮、一个节点图标和节点的标签文本。你可以使用 v-for 指令来循环渲染每个节点。

代码示例如下：

<template>
  <ul class="el-tree">
    <li v-for="node in nodes" :key="node.id">
      <span class="el-tree-node__expand" @click="toggleNode(node)">
        {{ node.expanded ? '-' : '+' }}
      </span>
      <span class="el-tree-node__icon">{{ node.icon }}</span>
      <span class="el-tree-node__label">{{ node.label }}</span>
      <ul v-if="node.expanded">
        <el-tree :nodes="node.children"></el-tree>
      </ul>
    </li>
  </ul>
</template>

在组件的 JavaScript 部分，你需要接收一个名为 nodes 的 prop，该 prop 包含了树的节点数据。你需要在组件的 data 中定义一个名为 nodes 的属性，用于存储节点数据。在组件的 methods 中，你需要定义一个名为 toggleNode 的方法，用于展开/折叠节点。

代码示例如下：

<template>
  <ul class="el-tree">
    <li v-for="node in nodes" :key="node.id">
      <span class="el-tree-node__expand" @click="toggleNode(node)">
        {{ node.expanded ? '-' : '+' }}
      </span>
      <span class="el-tree-node__icon">{{ node.icon }}</span>
      <span class="el-tree-node__label">{{ node.label }}</span>
      <ul v-if="node.expanded">
        <el-tree :nodes="node.children"></el-tree>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ElTree',
  props: {
    nodes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nodes: this.nodes
    }
  },
  methods: {
    toggleNode(node) {
      node.expanded = !node.expanded
    }
  }
}
</script>

这是一个简单的手写 el-tree 组件示例。你可以按照自己的需求进行修改和优化。