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>