关于前端:vue-下拉树-selecttree

应用 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 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>