vue-treeselect问题总结

1.做下拉框组织树，本来打算自己封装组件，但是发现自己封装的组件会有各种问题，就去搜了下组件，然后找到了这个功能比较完善的下拉框组织树，官网链接：https://www.vue-treeselect.cn/#node

2.组织树最终效果：

3.组织树代码

下载

npm install --save @riophae/vue-treeselect

导入

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

注册组件

components: { Treeselect }

页面使用

 <treeselect
          noResultsText="暂无结果"
          placeholder="请选择上级菜单"
          noChildrenText=""
          :default-expand-level="Infinity"
          v-model="deptData.parentId"
          :options="deptOptions"
          :normalizer="normalizer"
        />

下拉框支持搜索功能，noResultsText="搜索为空时的文案"

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

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

:default-expand-level="Infinity"是默认展开所有节点，也可以设置其他值

v-model="数据源" :options="树形数组"

:normalizer="normalizer"  normalizer是绑定的函数，用来更改键名

normalizer (node) {
        //方法
        return {
          id: node.departmentId, // 键名转换，方法默认是label和children进行树状渲染
          label: node.departmentName,
          children: node.childrenList
        }
      },