应用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也是在进入页面渲染前就实现了规范化。

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

贴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 componentimport treeselect from '@riophae/vue-treeselect'// import the stylesimport '@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>