怎么使用el-select与el-tree实现树形结构多选框

在前端开发中，树形结构的多选框是一个非常常见的需求。特别是在需要选择多个层级的数据时，树形结构的多选框能够提供更好的用户体验。本文将详细介绍如何使用 el-select 和 el-tree 组件来实现一个树形结构的多选框。

1. 引言

el-select 是 Element UI 中的一个下拉选择组件，而 el-tree 是一个树形结构组件。通过将这两个组件结合起来，我们可以实现一个树形结构的多选框。这种组合不仅能够提供更好的用户体验，还能够满足复杂的业务需求。

2. 准备工作

在开始之前，我们需要确保已经安装了 Element UI 库。如果你还没有安装，可以通过以下命令进行安装：

npm install element-ui --save

安装完成后，在项目的 main.js 文件中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 实现思路

我们的目标是将 el-select 和 el-tree 结合起来，实现一个树形结构的多选框。具体思路如下：

1. 使用 el-select 作为外层容器，用于显示已选择的项。
2. 在 el-select 的下拉框中嵌入 el-tree，用于展示树形结构。
3. 通过 el-tree 的 check 事件来更新 el-select 的选中项。

4. 实现步骤

4.1 创建基本结构

首先，我们需要创建一个基本的 Vue 组件结构：

<template>
  <div>
    <el-select
      v-model="selectedItems"
      multiple
      placeholder="请选择"
      @remove-tag="handleRemoveTag"
    >
      <el-option
        v-for="item in selectedItems"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @check="handleCheck"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleCheck(data, checkedNodes) {
      this.selectedItems = checkedNodes.checkedNodes.map(node => ({
        value: node.id,
        label: node.label,
      }));
    },
    handleRemoveTag(tag) {
      const node = this.$refs.tree.getNode(tag.value);
      if (node) {
        this.$refs.tree.setChecked(node, false, false);
      }
    },
  },
};
</script>

4.2 解释代码

• el-select: 我们使用 el-select 作为外层容器，并通过 v-model 绑定 selectedItems 数组来存储已选择的项。multiple 属性允许选择多个项。

• el-tree: 我们使用 el-tree 来展示树形结构。show-checkbox 属性允许节点显示复选框，node-key 属性指定节点的唯一标识符。

• handleCheck 方法: 当用户勾选或取消勾选树节点时，handleCheck 方法会被调用。我们通过 checkedNodes 参数获取当前选中的节点，并将其映射为 selectedItems 数组中的项。

• handleRemoveTag 方法: 当用户从 el-select 中移除一个标签时，handleRemoveTag 方法会被调用。我们通过 this.$refs.tree.getNode 获取对应的树节点，并将其设置为未选中状态。

4.3 样式调整

为了让 el-tree 能够嵌入到 el-select 的下拉框中，我们需要对样式进行一些调整。我们可以通过自定义 el-select 的下拉框样式来实现这一点。

<template>
  <div>
    <el-select
      v-model="selectedItems"
      multiple
      placeholder="请选择"
      @remove-tag="handleRemoveTag"
      popper-class="tree-select-dropdown"
    >
      <el-option
        v-for="item in selectedItems"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @check="handleCheck"
    />
  </div>
</template>

<style>
.tree-select-dropdown .el-select-dropdown__item {
  display: none;
}

.tree-select-dropdown .el-select-dropdown__list {
  padding: 0;
}

.tree-select-dropdown .el-tree {
  padding: 10px;
}
</style>

4.4 完整代码

以下是完整的代码实现：

<template>
  <div>
    <el-select
      v-model="selectedItems"
      multiple
      placeholder="请选择"
      @remove-tag="handleRemoveTag"
      popper-class="tree-select-dropdown"
    >
      <el-option
        v-for="item in selectedItems"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @check="handleCheck"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleCheck(data, checkedNodes) {
      this.selectedItems = checkedNodes.checkedNodes.map(node => ({
        value: node.id,
        label: node.label,
      }));
    },
    handleRemoveTag(tag) {
      const node = this.$refs.tree.getNode(tag.value);
      if (node) {
        this.$refs.tree.setChecked(node, false, false);
      }
    },
  },
};
</script>

<style>
.tree-select-dropdown .el-select-dropdown__item {
  display: none;
}

.tree-select-dropdown .el-select-dropdown__list {
  padding: 0;
}

.tree-select-dropdown .el-tree {
  padding: 10px;
}
</style>

5. 总结

通过将 el-select 和 el-tree 结合起来，我们实现了一个树形结构的多选框。这种组合不仅能够提供更好的用户体验，还能够满足复杂的业务需求。在实际开发中，我们可以根据具体需求对样式和功能进行进一步的调整和优化。

希望本文能够帮助你理解如何使用 el-select 和 el-tree 实现树形结构的多选框。如果你有任何问题或建议，欢迎在评论区留言讨论。