vue 下拉树 select-tree

charlotteeeeeee

使用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>
阅读 2.2k
36 声望
3 粉丝
0 条评论
你知道吗?

36 声望
3 粉丝
文章目录
宣传栏