如何修改vue-treeSelect的高度

 更新时间:2022年07月26日 09:30:16   作者:RxnNing  
这篇文章主要介绍了如何修改vue-treeSelect的高度,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

修改vue-treeSelect的高度

  .vue-treeselect{
    height: 28px;
  }
  .vue-treeselect .vue-treeselect__control{
    height: 28px !important;
  }
  .vue-treeselect__placeholder{
    line-height: 28px;
    font-size: 14px;
  }
  .vue-treeselect input{
    font-size: 16px;
  }

vue-treeselect的基本使用

官网地址:Vue-Treeselect

https://vue-treeselect.js.org/

公司用若依搞了一个速成项目,若依是一个免费开源的前后端项目,感兴趣的朋友百度。

在里边接触到了一个神奇的东西 :

vue-treeselect,用起来真的是一言难尽,不过研究过后发现还是很方便的,但是官网全英文,很难懂,网上其他资源也有限,不是很透彻,我给大家用最简单的方式讲一下基本的用法,解决你百分之八十的需求应该是没问题的。也记录一下方便自己以后查阅,话不多说,上才艺。

1.vue-treeselect是一个树形的下拉菜单

至于到底有多少节点那就要看你的数据源有多少层了,挺方便的。下面这个这个不用多说吧,下载依赖

npm install --save @riophae/vue-treeselect

2.引入组件和样式

至于是全局引入还是单页面引入那就看你自己需求了,我这里列举单页面引入。

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

3.使用

<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级目录" @select="change(node)"/>
  • v-model:双向数据绑定,不用多说
  • options:树形下拉菜单选项的数据源
  • normalizer:自定义展示结构字段,说白了把自己的名字换成树规定的名字
  • select:选择事件

首先贴一段数据结构的代码瞅瞅:

        data: [{
          id: 10,
          label: '肉类',
          children: [{
            id: 11,
            label: '猪肉'
          }, {
            id: 12,
            label: '牛肉'
          }]
        },
        {
          id:20,
          label:'水果',
          children:[{
            id:21,
            label:'苹果',
            children:[{
              id:211,
              label:'青苹果'
            },{
              id:212,
              label:'红苹果'
            }]
          }]
        }],

首先说一下这个normalizer这个属性,看着花里胡哨,其实很好理解:

    normalizer(node) {
//当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.catalogueId,
        label: node.catalogueName,
        children: node.children
      };
    },

他先把你数据里所有的children为空的节点都删掉,然后规定三个字段:id,label,children来更方便的操作数据。

参数node就是每个节点,通俗说就是每隔子项数据

  • id就是你v-model获取到的值,就相当于opiton里的value
  • label就是你要展示的值,让用户看到的东西,就相当于option里的label
  • children也不用说了,你数据的子节点

说的在在在通俗点,有可能你的后端工程师给你的数据id叫ids,label叫value,children叫content,但是树只认识id,label,children,那你给他对应上就行了,就这么简单。

再来就是选择事件了,这个好理解,参数node是当前的节点,你可以得到他做你想做的操作

change(node){
    this.aa=node.firstName
    ...
}

说到这里就已经可以应付大多数需求了,其他花里胡哨的功能小伙伴们自己研究吧,如果有心得也可以分享给我。

ps:如果后端给你的是同级结构数据,让你自己转换为树形结构的话,我知道最快速的方法就是若以框架里封装好的方法,非常方便,一行搞定(若依框架yyds),有需要的小伙伴自己查看。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    webpack+vue-cli项目中引入外部非模块格式js的方法

    今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3实现下拉选择框多选功能的方法详解

    Vue3实现下拉选择框多选功能的方法详解

    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,下面这篇文章主要给大家介绍了关于Vue3实现下拉选择框多选功能的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue使用axios接收流文件的实现

    vue使用axios接收流文件的实现

    本文主要介绍了vue使用axios接收流文件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue滚动固定顶部及修改样式的实例代码

    vue滚动固定顶部及修改样式的实例代码

    这篇文章主要介绍了vue滚动固定顶部及修改样式,本文给大家提到了滚动固定位置有多种方法,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解,代码具有一定的价值,感兴趣的小伙伴可以来学习一下
    2021-11-11
  • 在vue中实现antd的动态主题的代码示例

    在vue中实现antd的动态主题的代码示例

    在需求开发阶段,鉴于项目采用了antd作为基础组件库,确保组件外观与antd一致变得尤为重要,这包括颜色、字体大小及尺寸等样式的统一,然而,截至当前antd-vue尚未实现这一便捷的CSS变量特性,但理解其背后的实现机制后,我们可以自行构建这一功能,需要的朋友可以参考下
    2024-07-07
  • vue2.0开发实践总结之疑难篇

    vue2.0开发实践总结之疑难篇

    这篇文章主要为大家总结了vue2.0开发实践的疑难,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue实现图片预览组件封装与使用

    vue实现图片预览组件封装与使用

    这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 在iview+vue项目中使用自定义icon图标方式

    在iview+vue项目中使用自定义icon图标方式

    这篇文章主要介绍了在iview+vue项目中使用自定义icon图标方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04

最新评论