编程知识 cdmana.com

Vue drop-down tree select tree

Use vue-selecttree When the component ,
The pit I met :
1: In the initial loading, if you set tree Of value by "" when , The page will show “unknown”, Change its value to null that will do
2: When displaying custom drop-down options , The display can only be of simple type ( Object or array will report an error : Error in render: "TypeError: Cannot convert object to primitive value")
3: The plug-in has high requirements for rendering data , That is, it needs to fit its own data mode . So your data must contain :id,label Field , If there are subsets , Must use children do key
4: When customizing drop-down box options , The actual data value is not node, It is node.raw ( My day , It's like a storm crying here , I wanted to print out node have a look , The result is dead or alive 2 The fault of , And then directly node.type Is it worth it ,,, Fortunately, I finally found out that !)
5: Officials may also think that their third item is too abnormal , So there's a normalizer This property is easy to use , however !! Who told me to realize lazy loading !!! And then there was BUG, I'm going to doubt life , That's why it's on the page mounted When the data is standardized , Inside children The normalization is also completed before entering the page rendering .

It took three hours to finish , I blame myself for being too confident ! If you read the official lazy loading document earlier , It should have been over long ago , To record , I hope you don't step on the pit like me

stick gitlab Address , You can see that GitHub|vue-treeselect

Attached separately : Plugins are really great to use ! Praise for the big guys !

Source code :

<template>
  <div>
    <treeselect
      :options="fieldlist"
      v-model="value"
      :load-options="loadOptions"
      placeholder=" Try searching ">
      <label 
        slot="option-label" 
        slot-scope="{ node}">
          <!-- node.raw It's the actual value of each node  -->
        <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'

//  Lazy loading 
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":" This is a ID","type":"ID","name":"id1"},
        {"description":" This is a tanent","type":"Tatent","name":"tatent"},
      ],
      typesamplelist:staticjson.typesamplelist
    }
  },
  mounted(){
    //  Initialization list 
    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
    },
    //  Lazy loading 
    // 
    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()
        })
      }
    },
    /**
       *  Standardize data 
       *  This method does two things :
       * 1: Standardize data 
       * 2: According to the type set children Value 
       *  If it's a normal type , Not set up children value 
       *  If complex type , Set up children by null 
       *  In this way, the component can automatically add right expandable buttons for different values 
       * staticjson.typesamplelist Is a collection of common types , Full lowercase 
       * **/
      localnormalizer(node) {
        var flag = false;
        if(node.type){
          //  The type exists and does not belong to the basic type 
          if(this.typesamplelist.indexOf(node.type.toLocaleLowerCase())<0){
            flag = true
          }
        }
        //  Customize 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>

版权声明
本文为[charlotteeeeeee]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224163424921N.html

Scroll to Top