树形选择器VueTreeselect

最新推荐文章于 2025-10-28 10:40:46 发布

原创最新推荐文章于 2025-10-28 10:40:46 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #前端

前端专栏收录该内容

122 篇文章

订阅专栏

本文介绍了如何使用Vue-treeselect组件，特别是如何处理数据转换和解决unknown显示的问题。在使用options功能时，需要将数据转化为特定格式的树形结构，若原始数据属性名不同，可通过normalizer函数进行转换。当遇到unknown提示，可能是因为v-model绑定的初始值为空，设置为null即可。若发送请求时仍为null，需检查数据获取逻辑。

官网地址:vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。

使用方式官网解释的很清楚,无非安装>引入>注册组件>使用组件，并且有HTML与JS两部分可以参考。这里主要对之前自己工作中使用到的功能点不太理解，后面查资料顿悟的记录。

1.options

options:该功能主要传递数组数据,仅接收id、label、children三个属性,也就意味着接收的数据是包含这三个属性的树形数据,如果你跟我一样拿到的是列表数据,则就需要先转化。

需要的结构：

{
  id: '<id>',
  label: '<label>',
  children: [
    {
      id: '<child id>',
      label: '<child label>',
    },
    ...
  ],
}

解决方法:
在这里插入图片描述

转换后的数据结构确实没错了,但是我们通常拿到的属性名跟官网要求的属性名一般不会一样,所以提供了normalizer函数用于转换.

在这里插入图片描述

2.unknown解决

如果框里显示unknown,很可能是v-model绑定的值为空,就报错,这时候将绑定的值设置为null就可以。但如果还有另一个问题就是，发送请求时依然为null，或者获取值时为null，可以试下以下判断。

在这里插入图片描述