写一个js方法，过滤出el-tree组件第一级和第二级的id，并组成一个数组

假设你的 el-tree 组件是这样的：

<el-tree ref="tree" :data="data"></el-tree>

那么你可以写一个方法来获取第一级和第二级的 id，代码如下：

getFirstAndSecondLevelIds() {
  const ids = []
  const tree = this.$refs.tree
  const root = tree.root
  root.childNodes.forEach(node => {
    ids.push(node.data.id)
    if (node.childNodes) {
      node.childNodes.forEach(childNode => {
        ids.push(childNode.data.id)
      })
    }
  })
  return ids
}

这个方法会返回一个包含第一级和第二级 id 的数组。你可以在组件中调用这个方法，然后对返回的数组进行处理，例如打印日志或者发送到后端保存。

相关问题

设置el-tree默认展开两级节点，并写一个方法，根据el-tree的节点id找到其子节点跟孙子节点

要设置 el-tree 默认展开两级节点，可以在 el-tree 中添加 default-expand-all 和 :default-expand-level 两个属性，如下所示：

<el-tree
  :data="treeData"
  :props="treeProps"
  :default-expand-all="false"
  :default-expand-level="2"
></el-tree>

其中，default-expand-all 决定是否默认展开全部节点，而 default-expand-level 决定默认展开的层级。

要根据 el-tree 的节点 id 找到其子节点和孙子节点，可以使用 el-tree 的 getNode 方法获取节点对象，然后遍历其子节点和孙子节点。具体实现代码如下：

methods: {
  findChildNodes(nodeId) {
    const node = this.$refs.tree.getNode(nodeId);
    const childNodes = [];
    const findChildNodesRecursively = function(node) {
      if (node.children) {
        for (let i = 0, len = node.children.length; i < len; i++) {
          childNodes.push(node.children[i]);
          findChildNodesRecursively(node.children[i]);
        }
      }
    };
    findChildNodesRecursively(node);
    return childNodes;
  }
}

其中，findChildNodes 方法接收一个节点 id，获取节点对象后，定义了一个递归函数 findChildNodesRecursively 遍历其子节点和孙子节点，并将其存入 childNodes 数组中，最后返回该数组。

手写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 组件示例。你可以按照自己的需求进行修改和优化。