官方文档：https://www.vue-treeselect.cn/

官方示例

一、安装

建议通过npm安装vue-treeselect

npm install --save @riophae/vue-treeselect

二、引入组件和样式

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

三、注册

components: { Treeselect },

四、使用

options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],

完整代码：

效果如下：

常用属性：

如果将multiple的值设置为false，效果如下：

 而且只能选择一个

如果将clearable值设置为false,效果如下：

当default-expand-level值设置为0，效果如下：

 当default-expand-level值设置为1，效果如下：

searchable值设置为true，效果如下：

 searchable值设置为false，效果如下

如果要控制所选选项的显示顺序，请使用sortValueBy道具。该道具有三个选择：

• "ORDER_SELECTED" （默认）-选择订单
• "LEVEL" - 选择级别: C ?? BB ?? AAA
• "INDEX" - 选项索引: AAA ?? BB ?? C

 五、项目使用

注意：

1、cataId初始化时要设置为null，不能是空字符串，否则会报错unknown。

2、关闭对话框时要将cataId置空，否则打开对话框时显示的是上一次的数据。

六、解决显示no sub-options的问题

如果显示no sub-options,是因为如果child=[]时会显示，默认显示黄色感叹号和No sub-options，如果想要没有子部门直接不展示，我的方法是遍历数据源，删掉空数组

// 处理树形结构
    treeChange (arr) {
      return arr.map(item => {
        if (item.children && item.children.length > 0) {
          this.treeChange(item.children)
        } else {
          delete item.children
        }
        return item
      })
    }