vue-treeselect下拉树

最近遇到下拉树的需求，what？下拉框和树的结合？赶紧element-UI找一波，然而并没有找到这种组件，于是问了下度娘，发现好多人都是自己封装的下拉树组件，五花八门的功能，但是都不完善，还是决定用靠谱点的库，于是用了vue-treeselect这个库，也是vue系列，这个库就是专门弄下拉树组件；但有个不好是这个库是全英文的，没有中文版本，要看懂的话只有慢慢翻译和尝试。
链接：Vue-Treeselect
同理，下拉树的数据也有同步数据和异步加载两种，同步数据较简单，这儿只说懒加载(延迟加载)。
稍微注意点：
1.延迟加载，它提供规范函数用于转化树节点字段label/children，特别关键，不转化时只认label/children(children属性决定了节点是否有子节点即是否叶子节点)，转化之后只认转化后的字段，比如将将name转化为label，那么只会认name，即使数据中有label但没有name，则子选项不会显示，因为规范函数只会去找转化后的字段。
2.另外，看文档时一定要细心，正因为是英文文档则更要谨慎，特别是案例demo最好copy下来试试每个属性/方法/事件 的效果，不然会踩跟多坑。
3.组件规定：下拉树单选时，绑定值初始值必须是null，不然会出现unknown，多选时，初始值必须是**[ ]，不然会报错。
4.下拉树默认绑定选中节点的value值，可以使用valueFormat属性指定下拉树绑定值为所选中节点对象。**
5.库里提供了很多属性及方法，基本可以满足下拉树的所有需求，比如节点关联选择，禁用，全选，单选等，需要时自行查看api。

下载：
npm install --save @riophae/vue-treeselect
引入及注册：

// 引入下拉树组件
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
// 引入下拉树样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

const simulateAsyncOperation = fn => {
  setTimeout(fn, 500)
}
export default {
    name: 'PathTrafficConfig',
    components: { Treeselect },
     data(){
        return {}
          } 

使用：

<el-form-item label="派单大小类:" label-width="87px" prop="typeIds">
    <treeselect
         :multiple="true"
         :options="typeIdsOptions"
         value-consists-of="ALL_WITH_INDETERMINATE"
         :load-options="loadTypeIdsOptions"
         :normalizer="typeIdsNormalizer"                               
         placeholder="请选择"
         v-model="outerQueryCondition.typeIds"
     />
 </el-form-item>

// 派单大小类树--初始默认数组
 typeIdsOptions: [
      {
          id: 0,
          name: '派单大小类树',
          children: null,
          telType: 0
      }
  ],

// 获取派单大小类树
loadTypeIdsOptions({ action, parentNode, callback }) {
    let self = this;
    // 临时数组
    let typeIdsOptions= [];
    let formData = {
        id: parentNode.id
    };
    // 根据父id请求子选项
    fetchThreeOrderTree( formData )
    .then( response => {
        if(response.data.code == 200){
            typeIdsOptions = response.data.data.list;
            typeIdsOptions.forEach( item => {
                // 判断是否是叶子节点，不是叶子节点就添加children属性
                if( item.expand == true ){
                    self.$set( item,'children',null)                            
                }                        
            });
            console.log('派单大小类列表',typeIdsOptions);
        }else{
            self.$message({
                message: response.data.msg,
                type: 'danger'
            });
        }
    })
    .catch(err => {
    });
    // 将子选项放入对应的父节点下
    if (action === LOAD_CHILDREN_OPTIONS) {
        // 模拟加载中loading
        simulateAsyncOperation(() => {
            parentNode.children = typeIdsOptions;
            callback()
        })
    }  
},

const simulateAsyncOperation = fn => {
  setTimeout(fn, 500)
}
export default {
    name: 'PathTrafficConfig',
    components: { Treeselect },
     data(){
        return {
            typeIdsNormalizer(node) {     // 自定义派单大小类树键名
                return {
                    id: node.id,
                    label: node.name,
                }
            }, 
            ClassNormalizer(node) {     // 自定义话务分类下拉树键名
                return {
                    id: node.id,
                    label: node.name,
                }
            }, 

总之，Vue-Treeselect库还是挺好用的。