树形选择器VueTreeselect

2,514 阅读1分钟

官网地址: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,可以试下以下判断。

在这里插入图片描述