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

目录
  • VueTreeselect 参数options的数据转换-参数normalizer
  • 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
    }
}

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

赞 (0)

相关推荐

  • 关于下拉类型多选组件Vue-Treeselect(键名转换)

    关于下拉类型多选组件Vue-Treeselect(键名转换)

    目录 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 在一般项目中也可以使用 vue-treeselect下拉树 稍微注意点 下拉类型多选组件Vue-Treeselect(键名转换) 支持的功能项 1.支持嵌套选项的单选和多选 2.模糊匹配 3.异步搜索 4.延迟加载(仅在需要时加载深度选项的数据) 5.键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等) 6.丰富的选项和高度可定制的 7.支持 多种浏览器 它支持在vue项目中通过

  • Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    目录 一.后台构建两个表的数据选择查询功能 二.在VUE中引入Treeselect 三.使用Treeselect组件 四.构建初始的省级目录 五.构建动态生成的二.三.四级目录 六.最后效果 今天在项目中需要通过行政区域选择,然后选择该行政区域下面的景区,也就是要构建行政区划.景区两表数据表的树. 全国的行政区域到县已经3500多了,再加上景区会有几万个点,这棵选择树不论是在后台还是在前台构建都比较大,会影响系统性能,需要前后端结合,动态构建,使用时用懒加载,提升系统性能. 一.后台构建两个表的

  • vue组件vue-treeselect箭头和叉图标变大问题及解决

    vue组件vue-treeselect箭头和叉图标变大问题及解决

    目录 vue-treeselect箭头和叉图标变大 解决方法 解决后的样子 插件vue-treeselect用法 首先需要安装 用法看代码注释 vue-treeselect箭头和叉图标变大 最近在项目开发过程中使用vue的treeselect组件遇到了图标变大的问题,附图: 其他页面也有应用到这个组件但没有出现这种情况,在我从正常页面跳转到这个页面的时候,不会出现问题,几个页面的样式代码并没有区别. 后经排查发现问题是因为没有引入treeselect的样式导致的,没有异常的页面是因为页面引入的子

  • 如何修改vue-treeSelect的高度

    目录 修改vue-treeSelect的高度 vue-treeselect的基本使用 1.vue-treeselect是一个树形的下拉菜单 2.引入组件和样式 3.使用 修改vue-treeSelect的高度 .vue-treeselect{ height: 28px; } .vue-treeselect .vue-treeselect__control{ height: 28px !important; } .vue-treeselect__placeholder{ line-height:

  • element-ui+vue-treeselect下拉框的校验过程

    element-ui+vue-treeselect下拉框的校验过程

    目录 element-ui+vue-treeselect下拉框的校验(ivew也适用) vue-treeselect的插件使用 element-ui+vue-treeselect下拉框的校验(ivew也适用) 在项目开发中 使用了vue-treeselect的话,使用element-ui或者ivew自带的表单校验发现,trigger中blur和change均不生效,在选择了值之后验证依然存在 解决方法主要是使用vue-treeselect官网中api给出的事件中的input,在value改变后触

  • vue-treeselect显示unknown的问题及解决

    vue-treeselect显示unknown的问题及解决

    目录 vue-treeselect显示unknown问题 解决办法一 解决办法二 vue-treeselect中的小tip vue-treeselect显示unknown问题 解决办法一 官方上面绑定的value是不能为空的,要写成null才不会出现 解决办法二 这个方法简单粗暴~ 直接修改去你这个node-modules包里面找到这个组件的源码,在它dist文件里面找到这个文件 搜索unknown,把它干掉,完美解决 vue-treeselect中的小tip 1.设置选中当前节点不默认选中父节

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

    目录 VueTreeselect 参数options的数据转换-参数normalizer VueTreeselect 参数options的数据转换解析 VueTreeselect 参数options的数据转换-参数normalizer VueTreeselect 控件: <template>   <div>     <treeselect v-model="value" :normalizer="normalizer" placehol

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

  • MyBatis Mapper接受参数的四种方式代码解析

    这篇文章主要介绍了MyBatis Mapper接受参数的四种方式代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 对于单个参数而言,可以直接写#{param},这里的占位符名称没有限制,反正就一个参数一个占位符,不需要指定名称 对于多个参数,有常用的四种方式 根据位置排序号 public interface UserDao { public Integer addUser(String username, String password)

  • Python中函数的参数定义和可变参数用法实例分析

    本文实例讲述了Python中函数的参数定义和可变参数用法.分享给大家供大家参考.具体如下: 刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函数定义,我们都知道,下面的代码定义了一个函数funcA def funcA(): pass 显然,函数funcA没有参数(同时啥也不干:D). 下面这个函数funcB就有两个参数了, def funcB(a,

  • javascript setTimeout()传递函数参数(包括传递对象参数)

    于是,上网查找了一下,用了另一种写法setTimeout("fun("+参数+")", 1000),还是不行,但是以上写法在传递form表单的textarea是可以的,比如hml是这样: 复制代码 代码如下: <body> <div class="main"> <div id="showpane" class="showpane"> </div> <di

  • Python实现带参数与不带参数的多重继承示例

    本文实例讲述了Python实现带参数与不带参数的多重继承.分享给大家供大家参考,具体如下: 1. 不带参数的多重继承 # 作者:hhh5460 # 时间:2017.07.18 class A(object): def show_x(self): print('A') class B(object): def show_y(self): print('B') class C(object): def show_z(self): print('C') class D(A, B, C): pass #

  • Kotlin传递可变长参数给Java可变参数实例代码

    本文研究的主要是Kotlin传递可变长参数给Java可变参数的方法,具体实现代码如下. 定义Java可变参数方法 package com.tcl.john.studymvvm.utils; /** * 调用Java方法的工具类 * Created by ZhangJun on 2017/10/25. */ public class CallJavaUtils { public static int addNumbers(String name, int... args) { int result

  • PHP函数按引用传递参数及函数可选参数用法示例

    本文实例讲述了PHP函数按引用传递参数及函数可选参数用法.分享给大家供大家参考,具体如下: 一.函数按引用传递参数 1. 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • Scala可变参数列表，命名参数和参数缺省详解

    重复参数 Scala在定义函数时允许指定最后一个参数可以重复(变长参数),从而允许函数调用者使用变长参数列表来调用该函数,Scala中使用"*"来指明该参数为重复参数.例如: scala> def echo (args: String *) = | for (arg <- args) println(arg) echo: (args: String*)Unit scala> echo() scala> echo ("One") One sca

  • C#中参数数组、引用参数和输出参数示例详解

    前言 本文主要介绍了关于C#参数数组.引用参数和输出参数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 参数数组 在C#中,可以为函数指定一个不定长的参数,这个参数是函数定义中的最后一个参数,这个参数叫做参数数组. 下面是一个例子: namespace Ch6Ex2 { class Program { static int SumVals(params int[] vals) { int sum = 0; foreach (int val in vals) { sum

随机推荐