前言

最近在做一个人员管理系统，在增改用户信息时，可能会设置用户所在的部门，因为部门是多级的，于是想到用Element_UI的TreeSelect组件实现
效果：
在这里插入图片描述

1、安装

npm install --save @riophae/vue-treeselect

安装完成后，打开package.json 可以看到@riophae/vue-treeselect的版本：
在这里插入图片描述

2、引用

在需要使用TreeSelect的组件中引入

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

并将Treeselect加到components中：
在这里插入图片描述

3、使用

<el-form-item label="归属部门" prop="deptId">
                <treeselect v-model="form.deptId" :normalizer="tenantIdnormalizer" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
</el-form-item>

如果后端传回的树形结构是{id:“a”,label:“aa”,children: [{}]}

[
          {
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 105,
        label: '测试部门',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }
      ],

则不需要添加 :normalizer=“tenantIdnormalizer”，因为normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换，而treeselect默认的格式是 id:“”,label:“”,children:[{}] }。但是如果返回的属性结构与默认的不符，则需要进行格式转换。

以我的为例：
后端返回的树形结构是这样的：
在这里插入图片描述
label为deptName
则需要对数据格式进行转换：

tenantIdnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.deptName,
        children: node.children
      }
    },