el-tree 选择树形结构

el-tree 是一个基于 Element UI 的树形组件，它提供了一种方便的方式来展示和操作树形结构的数据。在 el-tree 中，可以通过选择框来选择树形结构的节点。通过设置 el-tree 的 show-checkbox 属性为 true，即可启用选择功能。当用户选择节点时，可以通过监听 el-tree 的 check-change 事件来获取用户选择的节点信息。在处理选择树形结构时，可以根据节点的 id、parentId 和 priority 属性来进行相关操作，以实现树形结构的选择和更新。

相关问题

el-tree前端树形结构展示

### el-tree 组件用于前端树形结构展示的方法

Element UI 的 `el-tree` 是一个非常强大的组件，适用于在前端应用中构建和显示树状层次结构的数据。为了有效地利用这个组件来创建交互式的树形界面，开发者可以遵循特定的配置选项和属性设置。

#### 数据准备
要使 `el-tree` 正常工作，首先需要准备好合适格式的数据源。通常情况下，这些数据会被构造成嵌套的对象数组形式，其中每个对象代表一个节点，并可能含有子节点列表作为其属性之一。例如：

const data = [
  {
    label: 'Level one 1',
    children: [{
      label: 'Level two 1-1',
      children: [{
        label: 'Level three 1-1-1'
      }]
    }]
  },
];

#### 基本使用示例
下面是一个简单的 HTML 和 JavaScript 结合的例子，展示了如何初始化并渲染一棵基本的树形结构[^1]。

<template>
  <div id="app">
    <!-- Tree component -->
    <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"></el-tree>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      data: [
        {
          id: 1,
          label: "Parent Node",
          children: [
            { id: 2, label: "Child Node A", children: [] },
            { id: 3, label: "Child Node B", children: [] }
          ]
        }
      ]
    };
  }
};
</script>

这段代码片段设置了几个重要的参数：
- `show-checkbox`: 启用了复选框模式；
- `node-key`: 定义了一个唯一键名用来标识各个节点；
- `default-expand-all`: 默认展开所有层级；
- `expand-on-click-node=false`: 防止点击节点时自动扩展/折叠子项；

对于拥有大量数据的情况，建议采用懒加载的方式优化性能表现，即仅当用户请求查看某个父级下的具体内容时才去获取相应的子集信息[^2]。这可以通过监听事件或通过异步函数动态更新子节点的方式来实现。

el-select和el-tree树形结构下拉单选

可以使用 `el-select` 和 `el-tree` 配合使用来实现树形结构下拉单选。

首先，需要将数据转换为 `el-tree` 的节点格式，例如以下数据：

const treeData = [
  {
    id: 1,
    label: '节点1',
    children: [
      {
        id: 2,
        label: '节点1-1'
      },
      {
        id: 3,
        label: '节点1-2'
      }
    ]
  },
  {
    id: 4,
    label: '节点2',
    children: [
      {
        id: 5,
        label: '节点2-1'
      },
      {
        id: 6,
        label: '节点2-2'
      }
    ]
  }
]

需要转换为 `el-tree` 的节点格式：

const treeNodes = [
  {
    id: 1,
    label: '节点1',
    children: [
      {
        id: 2,
        label: '节点1-1',
        isLeaf: true
      },
      {
        id: 3,
        label: '节点1-2',
        isLeaf: true
      }
    ]
  },
  {
    id: 4,
    label: '节点2',
    children: [
      {
        id: 5,
        label: '节点2-1',
        isLeaf: true
      },
      {
        id: 6,
        label: '节点2-2',
        isLeaf: true
      }
    ]
  }
]

其中，每个节点需要添加 `isLeaf` 属性，用于标记该节点是否为叶子节点。

接着，在 `el-select` 中使用 `el-tree` 作为下拉选项。代码示例：

<template>
  <el-select v-model="selectedItem" placeholder="请选择" clearable>
    <el-tree :data="treeNodes" :props="treeProps" :node-key="treeProps.id" :highlight-current="true" :default-expand-all="true" :expand-on-click-node="false" v-if="treeVisible"></el-tree>
    <el-option v-else v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      treeNodes: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点1-1',
              isLeaf: true
            },
            {
              id: 3,
              label: '节点1-2',
              isLeaf: true
            }
          ]
        },
        {
          id: 4,
          label: '节点2',
          children: [
            {
              id: 5,
              label: '节点2-1',
              isLeaf: true
            },
            {
              id: 6,
              label: '节点2-2',
              isLeaf: true
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf'
      },
      options: [
        {
          label: '选项1',
          value: '1'
        },
        {
          label: '选项2',
          value: '2'
        },
        {
          label: '选项3',
          value: '3'
        }
      ],
      treeVisible: false
    }
  },
  watch: {
    selectedItem(val) {
      if (val && val.children && val.children.length > 0) {
        this.treeVisible = true
      } else {
        this.treeVisible = false
      }
    }
  }
}
</script>

上述代码中，`el-select` 的下拉选项分为两部分：`el-tree` 和 `el-option`。根据当前选中的节点是否有子节点，判断显示 `el-tree` 还是 `el-option`。

在 `el-tree` 中，需要设置 `props` 属性，指定节点数据中的属性名，以及 `node-key` 属性，用于标识节点的唯一属性名。其他属性根据实际需求进行设置。

在 `watch` 中，根据当前选中的节点是否有子节点，控制 `el-tree` 的显示与隐藏。

注意：以上代码只实现了树形结构下拉单选的基本功能，还需要根据实际需求进行修改和完善。