el-tree 选择树形结构

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

相关问题

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` 的显示与隐藏。

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

ElementUI中el-tree树形结构默认三角形改成加减号

Element UI 的 `el-tree` 组件默认使用三角形图标表示节点的展开和折叠状态，如果你想将其改为加减号（+/-），这需要一些自定义样式和JavaScript处理。首先，你需要禁用Element UI的内置递归图标，然后你可以创建一个自定义的箭头组件或者直接使用HTML和CSS来实现加减号效果。

1. 首先，在模板 (`template`) 中禁用默认的递归图标：

<template>
  <el-tree :props="treeProps" :default-expand-all="true" :load="loadNode" node-key="id">
    <span slot-scope="{ node, $index }">{{ node.label }}</span>
  </el-tree>
</template>

2. 然后，添加一个自定义的 `expand-icon` 或者 `collapse-icon` 属性，并通过 CSS 样式覆盖原有样式：

<template>
  <el-tree :props="treeProps" :default-expand-all="true" :load="loadNode" node-key="id"
           :expand-icon="customExpandIcon" :collapse-icon="customCollapseIcon">
    ...
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      customExpandIcon: '<i class="fas fa-plus"></i>', // 或者 '<i class="fas fa-minus"></i>'
      customCollapseIcon: '<i class="fas fa-minus"></i>', // 或者 '<i class="fas fa-plus"></i>'
    };
  },
  ...
}
</script>

<style scoped>
.el-tree-node__expand-icon,
.el-tree-node__collapse-icon {
  display: inline-block;
  font-size: inherit; /* 或者设置合适的大小 */
}
</style>

这里假设你已经引入了 Font Awesome 的减号（fa-minus）和加号（fa-plus）图标库。