VueTreeselect在使用过程中遇到的问题及解决方法

最新推荐文章于 2025-06-19 09:14:13 发布

原创最新推荐文章于 2025-06-19 09:14:13 发布 · 4.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

开发中遇到的问题同时被 2 个专栏收录

8 篇文章

订阅专栏

笔记

4 篇文章

订阅专栏

博客介绍了vue-treeselect多选组件，它支持Vue.js嵌套选项，具备模糊匹配、异步搜索等功能，需Vue 2.2+。还说明了其安装及使用步骤，同时针对后台数据格式不标准、叶子结点展示问题给出解决办法，如增加normalizer属性、删除特定children。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简单介绍

vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持

支持嵌套选项的单选和多选
模糊匹配
异步搜索
延迟加载（仅在需要时加载深度选项的数据）
键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
丰富的选项和高度可定制的
支持多种浏览器

需要Vue 2.2+

具体样式展示：

二、安装及使用

2.1、安装

npm install --save @riophae/vue-treeselect

2.2、引入组件和样式

import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

2.3、注册

components: {
   treeSelect
},

2.4、使用

<treeSelect v-model="value"
            :options="options"
            :show-count="true"
            :normalizer="normalizer"
            placeholder="please select……" />

data() {
   return {
      // define the default value
      value: null,
      // define options
      options: [{
         id: 'a',
         label: 'a',
         children: [{
           id: 'aa',
           label: 'aa'
         }, {
           id: 'ab',
           label: 'ab'
         }],
        }, {
          id: 'b',
          label: 'b'
        }, {
          id: 'c',
          label: 'c'
        }]
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,  //自定义id
          label: node.label,  //自定义label
          children: node.children && node.children.length > 0 ? node.children: 0  //处理children，当children为[]或null时，子节点会展示No sub-options，一般子节点不需要展示这个，所以这样处理
        };
      }
    }
}

三、遇到的问题及解决方法

3.1、后台返回的数据格式不是标准的，即没有id和label

解决方法：增加normalizer属性，将id和label字段转换，比如部门接口返的数据是deptId和deptName，需要做如下处理

normalizer(node) {
  if (node.children && !node.children.length) {
     delete node.children;
  }
  return {
     id: node.deptId,  //自定义id
     label: node.deptName,  //自定义label
  }
}

3.2、叶子结点不期望展示下拉角标和提示文字（No sub-options）

原因分析：是由于children为[ ]或null 造成的

解决方法：children为[ ]或null时，将children删除，可以自己写方法遍历删除，也可以在normalizer中处理。以下是最简单的处理方法：

normalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children;
  }
  return {
    id: node.id,  //自定义id
    label: node.label,  //自定义label
    //处理children，当children为[]或null时，子节点会展示No sub-options，一般子节点不需要展示这个，所以将children置为0
    children: node.children && node.children.length > 0 ? node.children: 0  
    };
  }
}