VueTreeselect参数options的数据怎么转换

本篇内容介绍了“VueTreeselect参数options的数据怎么转换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

VueTreeselect 参数options的数据转换-参数normalizer

VueTreeselect 控件： 

<template>
  <div>
    <treeselect v-model="value" :normalizer="normalizer" placeholder="请选择..." :options="options" />
  </div>
</template>

• options的值是个树形结构的数组

options: [ {
          id: '1',
          name: 'a',
          children: [ {
            id: '11',
            name: 'aa',
          }, {
            id: '12',
            name: 'ab',
          } ],
        }, 
        {
          id: '2',
          name: 'b',
          children: []
        } ],

• normalizer属性，是用于将options的值，转换为符合vue-treeselect要求的数据格式

vue-treeselect中，即使您为children属性分配一个空数组，依然会显示有分支，这时就可以使用normalizer去掉children属性：

normalizer(node){
    //去掉children=[]的children属性
    if(node.children && !node.children.length){
        delete node.children;
    }
    return {
        id: node.id,
        //将name转换成必填的label键
        label:node.name,
        children:node.children
    }
}

VueTreeselect 参数options的数据转换解析

VueTreeselect 控件

            <Treeselect
                    :options="options"
                    :normalizer="normalizer"
                    placeholder="请选择..."                    
                    v-model="addEventForm.parentId"/>

options的值是个树形结构的数组，normalizer属性，是用于转换options的值的，把options的值，转换为符合vue-treeselect要求的数据格式。

//后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
normalizer(node){
    //去掉children=[]的children属性
    if(node.children && !node.children.length){
        delete node.children;
    }
    return {
        id: node.id,
        label:node.name,
        children:node.children
    }
}

“VueTreeselect参数options的数据怎么转换”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！