Vue-Treeselect 中文文档深入解析

一、介绍

Vue treeselect 是一个易于使用，高效，具有可定制和实用功能的多选下拉菜单组件。它使用Vue.js组件系统，支持按需渲染选项和动态搜索，并能够呈现任意类型的数据。

Vue-Treeselect的设计旨在创造出一种友好的、可交互的多选下拉菜单，其中包括通过前端展示用户需要查询的内容，同时也支持后端通过Ajax等方式返回查询列表数据的多选下拉框组件。

通常，当我们需要展示包含多个数据层级的结构时，会用到嵌套的下拉菜单。而Vue-Treeselect能更好地实现这种需求。

二、如何使用Vue treeselect

Vue-Treeselect是一个Vue组件，使用它前你需要保证Vue.js已经被加载了，由此需要在HTML页面中先引入Vue.js库。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>vue-treeselect</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-treeselect@0.4.0/dist/vue-treeselect.css">
  <script src="//unpkg.com/vue-treeselect@0.4.0/dist/vue-treeselect.min.js"></script>
</head>
<body>
  <div id="app">
    <vue-treeselect ...></vue-treeselect>
  </div>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

上述代码中，我们需要引入vue.js和vue-treeselect.css，这样才能利用CSS样式表，否则我们将看到一个不可视的Vue-Treeselect。此外，在调用组件时，还需要使用Vue构造函数生成根Vue实例的示例，并且使用vue-treeselect组件进行渲染。

当我们使用Vue-Treeselect进行渲染时，还需要针对组件提供一些必要的选项，其中最显著的是：“options”, 它包含嵌套选项来渲染组件。下面是重要的选项清单，它包括组件支持的一些重要属性和方法：


{
  /* 选项数据 */
  options: [ ],

  /* 选中的值 */
  value: [ ],

  /* 删除选项时的提示 */
  deleteRemovalConfirmation: true,

  /* 是否使用远程搜索 */
  remote: false,

  /* 可输入自定义 */
  allowInput: false,

  /* 自适应 */
  autoPosition: false,

  /* 选中时事件处理 */
  onChange(selectedValues, selectedOptions) {
    // ...
  },

  /* 远程搜索事件处理 */
  loadOptionsAsync(searchInput, loadedOptions) {
    // ...
  }
}

三、Vue-Treeselect的选项属性

Vue treeselect组件中可以使用的options数据是一个树形数组。每一个节点都包括以下属性：

id: 传递到onChange事件回调中，等价于valueKey。
label: 显示在tree select中的文本。
children: 包含选项或子节点的数组。
hasChildren: 对于使用异步加载数据的情况，可以使用此属性进行加载更多节点。
parentId: 渲染树时的父节点的id属性。
…: 你可以在数据中添加自定义属性，在组件回调时使用。

四、Vue-Treeselect的事件

Vue-Treeselect提供了onChange和loadOptionsAsync两个事件，以响应组件的行为。

当选项发生改变时，onChange会被触发，并且会传递已选值（以数组的形式）和已选选项（已选值的引用）作为其两个参数。


{
  onChange(selectedValues, selectedOptions) {
    console.log('Selected Options:', selectedOptions);
  }
}

对于异步加载选项的使用情况，可以使用loadOptionsAsync处理搜索事件。这个函数接受两个参数：搜索输入值和一个回调函数，这个回调函数负责更新你的options。


{
  loadOptionsAsync(searchInput, loadedOptions) {
    console.log('loadOptionsAsync:', searchInput, loadedOptions);
  }
}

五、Vue-Treeselect的高级用法

5.1 使用ref属性进行树选择的打开/关闭

在某些情况下，可能需要从父元素（例如一个按钮或一个链接）打开和关闭树选择。这时候，我们可以使用ref引入Vue-Treeselect的组件实例（下文实例变量名为 treeSelect），并使用组件内置的打开和关闭方法：openMenu()和closeMenu()：

<vue-treeselect ref="treeSelect"></vue-treeselect>


this.$refs.treeSelect.openMenu();
this.$refs.treeSelect.closeMenu();

5.2 搜索防抖

默认情况下，Vue-Treeselect响应搜索。每当搜索状态发生变化时，用户输入将更新值。Vue-Treeselect使用一个搜索防抖技术（默认时间(750ms)），以防止过度响应搜索。

在某些情况下，该延迟可能无法满足特定的需求。果需要更改防抖时间，请使用“debounceSearch”选项更改它：

<vue-treeselect :searchable="true" :debounce-search="500"></vue-treeselect>

通过上述代码，我们可以将默认防抖时间，从750ms更改为500ms，这样会更灵敏的响应用户的搜索输入事件。

5.3 启用嵌套菜单的多选

默认情况下，Vue-Treeselect不支持对嵌套菜单进行多选。此时需要使用属性“flattenSearchResults”进行递归菜单的多选设置。

<vue-treeselect :flatten-search-results="true"></vue-treeselect>

当将递归结果扁平化时，“flatten-search-results”属性将默认启用多选效果，以便嵌套菜单中的所有菜单被选中。

5.4 查询其他非标准选项的配置

在实际应用中，有可能需要在数据中包含某些自定义选项属性，这些选项属性不在Vue Treeselect内置的一组标准属性中。在这种情况下，可借助Vue Treeselect的“capable”计算属性和“on-”前缀组合使用来让Vue Treeselect处理您自定义的属性。

在Vue Treeselect中，属性成员变量名称必须以on-为前缀，如果它不是一个内置属性名，则成员变量被视为自定义选项，并会传递给组件的事件处理程序。下面是一个示例的自定义选项名称“on-random-int”：


{
  capable: ({ onRandomInt }) => onRandomInt != null,

  onRandomInt(selectedValues, selectedOptions) {
    const randomNode = selectedOptions.find(o => o.onRandomInt != null);
    console.log('Random int =', randomNode.onRandomInt);
  },
}

结语

Vue-Treeselect是一个易于使用、高度定制、易于实用的多选下拉菜单组件。通过Vue Treeselect，我们可以更好地展示多级数据结构，支持搜索、异步加载和自定义事件响应。通过本文的阐述，读者可以快速上手使用Vue Treeselect，并掌握其基本选项、事件处理和高级设置。

原创文章，作者：AKXSH，如若转载，请注明出处：https://www.506064.com/n/372144.html