Vue-Treeselect 树形下拉框的使用及常见问题记录

如果你想实现一个下拉树的组件，可以直接使用 element plus 中的 treeSelect 组件，但是如果你的项目正在用的是 element 2.X 版本，那么它是不包含 treeSelect 组件的，但是我们还是可以基于一些第三方的插件比如：@riophae/vue-treeselect 插件。

使用方法

1 安装

复制代码

npm i @riophae/vue-treeselect
// 或
yarn add @riophae/vue-treeselect

2 引入

为方便使用，我们可以在全局引入。在 main.js 全局引入，并注册全局组件。

复制代码

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('treeselect', Treeselect)

3 使用示例

复制代码

<template>
  <div class="box">
    <treeselect v-model="selectedItems" placeholder="请选择" :options="treeData"></treeselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: null,
      treeData: [
        {
          id: 1,
          label: "水果",
          children: [
            { id: 2, label: "西瓜" },
            { id: 3, label: "香蕉" },
            { id: 4, label: "橙子" },
          ],
        },
        {
          id: 5,
          label: "蔬菜",
          children: [
            { id: 6, label: "西红柿" },
            { id: 7, label: "黄瓜" },
            { id: 8, label: "青菜" },
          ],
        },
        {
          id: 9,
          label: "零食",
          children: [
            { id: 10, label: "薯片" },
            { id: 11, label: "巧克力" },
          ],
        },
      ],
    };
  },
};
</script>

常见问题

（1）占位符 unknown，或其他异常报错。

解决方法：

v-model 不能写成空字符串或者空数组，否则会出现 unknown，可以默认是 null。

（2）数据提示英文

解决方法

使用 noChildrenText、noOptionsText 和 noResultsText 自定义文本的属性。

noChildrenText：用于定义当某个选项没有子选项时的文本提示。例如，当一个分类没有子分类时，可以使用 noChildrenText 来显示相应的提示文本。
noOptionsText：用于定义当没有可选项时的文本提示。例如，当数据为空或没有匹配的选项时，可以使用 noOptionsText 来显示相应的提示文本。
noResultsText：用于定义当搜索结果为空时的文本提示。例如，当用户进行搜索但没有匹配的结果时，可以使用 noResultsText 来显示相应的提示文本。

<treeselect v-model="selectedItems" :options="treeData" noChildrenText="没有子选项" noOptionsText="没有可选项" noResultsText="没有匹配的结果"></treeselect>

（3）数据结构不符合

很多时候后台返回回来的数据结构的字段并不是 id、label、children 这些，这个时候就需要我们将其换成符合要求的数据结构。

这时候我们可以使用 normalizer 属性，它用于规范化选项数据。通过 normalizer 属性，你可以自定义选项数据的结构，以适应插件的要求。

（4）获取选中节点对象而不是单一的值

valueFormat 属性能够决定 value 属性的格式。

当设置为 id 时，value 属性的格式就是 id 或 id 数组。
当设置为 object 时，value 属性的格式就是 node 或 node 数组。