介绍下 elementui 中的 el-tree

elementui 中的 el-tree 是一个树形控件，用于展示层级结构的数据。它可以展开和折叠子节点，支持多选和单选模式，可以通过自定义节点内容来展示不同类型的数据。el-tree 也提供了一些事件和方法，使得开发者可以方便地对树形控件进行操作，比如选中节点、展开节点、获取节点信息等等。

在使用 el-tree 的时候，我们需要提供一个树形数据源，数据源需要符合一定的格式，比如每个节点需要包含一个 label 属性用于展示节点名称，children 属性用于存放子节点等等。同时，我们还可以通过一些配置项来自定义节点的样式、展开图标、选中状态等等，以满足不同的需求。

相关问题

elementui获取el-tree选中的节点Id

要获取 Element UI 中 el-tree 组件选中的节点的 ID，你可以使用以下方法：

1. 首先，给 el-tree 组件添加一个 ref 属性，例如：`ref="tree"`。

2. 在你的代码中，通过 `$refs` 对象引用该组件：`this.$refs.tree`。

3. 使用 `getCheckedNodes` 方法获取选中的节点数组，该方法返回一个包含选中节点的数组。

4. 遍历该数组，通过访问节点对象的 `id` 属性来获取节点的 ID。

下面是一个示例代码：

<template>
  <el-tree
    ref="tree"
    :data="data"
    show-checkbox
    node-key="id"
    default-expand-all
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            { id: 2, label: 'Node 1-1' },
            { id: 3, label: 'Node 1-2' },
          ],
        },
        {
          id: 4,
          label: 'Node 2',
          children: [
            { id: 5, label: 'Node 2-1' },
            { id: 6, label: 'Node 2-2' },
          ],
        },
      ],
    };
  },
  methods: {
    getSelectedNodeIds() {
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      const selectedNodeIds = checkedNodes.map(node => node.id);
      console.log(selectedNodeIds);
    },
  },
};
</script>

在上面的代码中，`getSelectedNodeIds` 方法会在控制台打印选中节点的 ID 数组。你可以根据自己的需求进行处理或进一步操作。记得在需要的地方调用 `getSelectedNodeIds` 方法获取选中节点的 ID。

vue+elementui使用el-tree实现带头像下拉树

可以通过在el-tree中使用自定义模板来实现带头像的下拉树。具体步骤如下：

1. 在el-tree节点数据中添加头像url属性，例如：

[
  {
    label: '节点1',
    children: [
      { label: '子节点1', avatar: '头像url' },
      { label: '子节点2', avatar: '头像url' }
    ]
  },
  {
    label: '节点2',
    children: [
      { label: '子节点3', avatar: '头像url' },
      { label: '子节点4', avatar: '头像url' }
    ]
  }
]

2. 在el-tree中使用自定义模板来渲染节点，例如：

<el-tree :data="data">
  <template v-slot="{ node, data }">
    <span v-if="data.avatar">
      <img :src="data.avatar" alt="" style="width: 20px; height: 20px; border-radius: 50%; margin-right: 10px;">
    </span>
    <span>{{ node.label }}</span>
  </template>
</el-tree>

这样就可以在el-tree中显示带头像的下拉树了。