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

目录VueTreeselect参数options的数据转换-参数normalizerVueTreeselect参数options的数据转换解析VueTreeselect参数options的数据转...

目录

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

VueTreeselect 控件： 

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

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

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
 }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。