vue 下拉树 select-tree

使用vue-selecttree组件时，
我所遇到的坑：
1：初始加载的时候如果设置tree的value为""时，页面会显示“unknown”，将其值改为null即可
2：自定义下拉选项的展示时，里面的展示只能为简单类型类型（对象或者数组会报错： Error in render: "TypeError: Cannot convert object to primitive value"）
3：该插件对渲染数据要求高，即需要贴合它本身的数据模式。所以你的数据必须包含：id,label字段，如果有子集，必须用children做key
4:自定义下拉框选项时，实际的数据值不是node，而是node.raw （我天，这里简直暴风哭泣，我本来想打印出node看看，结果死活报2的错，然后直接node.type的时候有没有值，，，还好最后被机智的我发现了！）
5:官方可能也觉得自己的第三条太变态了，所以提供了一个normalizer 这个属性本是好用的，但是！！谁叫我要实现懒加载！！！然后就出现了BUG，调到我都要怀疑人生了，所以才有了在页面mounted的时候对数据进行规范化处理，里面的children也是在进入页面渲染前就完成了规范化。
6:append-to-body在对话框等地方无效，全局增加样式：

类名是它组件自带的

.vue-treeselect--append-to-body {
    z-index: 999999 !important;
}

做了三小时才做完，都怪自己太自信！早点看官方的懒加载文档的话，应该早就完了，以此记录，望大家不要同我一样踩坑

贴gitlab地址，大家可以看看GitHub|vue-treeselect

另附：插件真的超好用！为大佬们点赞！

源码：

<template>
  <div>
    <treeselect
      :options="fieldlist"
      v-model="value"
      :load-options="loadOptions"
      placeholder="尝试搜索">
      <label 
        slot="option-label" 
        slot-scope="{ node}">
          <!-- node.raw实际才是每个节点的值 -->
        <span style="float: left">{{ node.raw.label?node.raw.label:node.raw.id }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ node.raw.type }}</span> 
      </label>
      



  </treeselect>
  </div>
</template>
<script>
// cnpm i @riophae/vue-treeselect --save-dev
 // import the component
import treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

// 懒加载
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
const simulateAsyncOperation = fn => {
  setTimeout(fn, 1000)
}


import staticjson from '../../static/staticjson.json'
export default {
  components:{
    treeselect
  },
  data(){
    return{
      value:null,
      optionvalue:"",
      fieldlist:[
        
      ],
      origindatalist:[
        {"description":"这是ID","type":"ID","name":"id1"},
        {"description":"这是tanent","type":"Tatent","name":"tatent"},
      ],
      typesamplelist:staticjson.typesamplelist
    }
  },
  mounted(){
    // 初始化列表
    this.fieldlist=this.initList()
  },
  methods:{
    // initList
    initList(list){
      list = list&&list.length?list:this.origindatalist;
      var backlist =[]
      list.forEach(element => {
        var item = this.localnormalizer(element)
        backlist.push(item)
      });
      return backlist
    },
    // 懒加载
    // 
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        simulateAsyncOperation(() => {
          var children = [
            {"type":"ID","description":"id2","name":"id2"+new Date().getTime()+Math.random()},
            {"type":"App","description":"app","name":"app"+new Date().getTime()+Math.random()}
          ]
          var pchildren = []
          children.forEach((citem)=>{
            var ccitem = this.localnormalizer(citem)
            pchildren.push(ccitem)
          })
          parentNode.children=pchildren
          console.log('sdsds',parentNode.children)
          console.log(this.fieldlist)
          callback()
        })
      }
    },
    /**
       * 规范化数据
       * 该方法做两件事情：
       * 1：规范化数据
       * 2：根据类型set children的值
       * 如果是普通类型，不设置children值
       * 如果是复杂类型，设置children为null 
       * 这样组件便能自动为不同值添加右侧可展开按钮
       * staticjson.typesamplelist为普通型类型集合，全小写
       * **/
      localnormalizer(node) {
        var flag = false;
        if(node.type){
          // 类型存在且不属于基本类型
          if(this.typesamplelist.indexOf(node.type.toLocaleLowerCase())<0){
            flag = true
          }
        }
        // 自定义key==type
        var item ={
          id: node.name,
          label: node.description?node.description:node.name,
          type:node.type
        }
        // 
        if(flag){
          item.children= null
        }
        return item
      }
  }
}
</script>