树形选择多选，vue3和element-puls齐齐上阵！

前端

2023-06-12 11:32:11

初学者指南：用 Vue 3 + Element Plus 创建树形选择多选功能

准备踏上 Vue 3 与 Element Plus 的精彩旅程，打造令人惊艳的树形选择多选功能吧！本指南将提供详细的步骤和示例代码，助你轻松驾驭这些强大的工具。

Vue 3 的魅力

Vue 3 作为前端开发领域的明星，以其简便性、响应性和性能优化而著称。对于初学者来说，它是一个绝佳的选择，让你快速入门并掌握这个卓越的框架。

Element Plus 助力 UI 美观

Element Plus 是一个与 Vue 3 完美契合的 UI 库，为你的项目提供精美的外观和一致的用户体验。它的 TreeSelect 组件专门用于创建具有多选功能的树状结构，为你带来直观且用户友好的选择界面。

TreeSelect 的强大功能

TreeSelect 组件赋予你构建树形选择器的强大功能，它支持多选、级联选择、搜索过滤和自定义样式等特性。利用这些特性，你可以创建出量身定制的交互式用户界面，满足各种需求。

清晰的步骤，轻松上手

1. 创建 Vue 3 项目

首先，使用 Vue CLI 创建一个新的 Vue 3 项目。

2. 安装 Element Plus

通过 npm 安装 Element Plus：

npm install element-plus

3. 引入 TreeSelect 组件

在你的 Vue 组件中，引入 TreeSelect 组件：

import { ElTreeSelect } from 'element-plus'

4. 设置 modelValue 和数据

在你的 Vue 组件中，使用 v-model 指令绑定 modelValue，并定义你的数据：

<template>
  <el-tree-select v-model="value" :tree-data="data"></el-tree-select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const value = ref([])
    const data = [
      // 省略数据示例
    ]
    return {
      value,
      data
    }
  }
}
</script>

5. 配置 TreeSelect props

通过配置 TreeSelect 的 props，你可以自定义组件的行为，例如：

:default-expand-all="true"：默认展开所有节点
:expand-on-click-node="false"：禁止点击节点展开
:check-strictly="true"：严格检查选中项

示例代码

<template>
  <el-tree-select
    v-model="value"
    :tree-data="data"
    :default-expand-all="true"
    :expand-on-click-node="false"
    :check-strictly="true"
    multiple
    placeholder="请选择"
  >
  </el-tree-select>
</template>

获取多选结果

当用户做出选择后，可以通过 value 来获取选中的结果。

深入挖掘，解锁更多可能

TreeSelect 的强大特性还包括：