返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何修改vue-treeSelect的高度
  • 573
分享到

如何修改vue-treeSelect的高度

2024-04-02 19:04:59 573人浏览 独家记忆
摘要

目录修改Vue-treeSelect的高度vue-treeselect的基本使用1.vue-treeselect是一个树形的下拉菜单2.引入组件和样式3.使用修改vue-t

修改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),有需要的小伙伴自己查看。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 如何修改vue-treeSelect的高度

本文链接: https://lsjlt.com/news/165220.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何修改vue-treeSelect的高度
    目录修改vue-treeSelect的高度vue-treeselect的基本使用1.vue-treeselect是一个树形的下拉菜单2.引入组件和样式3.使用修改vue-t...
    99+
    2024-04-02
  • vue如何修改table行高
    今天小编给大家分享一下vue如何修改table行高的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。vue修改table行高的方...
    99+
    2023-07-05
  • vue对插件(iview,elementui,treeselect)样式的局部修改方式
    目录(iview,elementui,treeselect)样式的局部修改学习描述具体方法vue+iview 样式穿透-修改第三方插件样式修改第三方插件样式(iview,elemen...
    99+
    2024-04-02
  • jquery 修改css 高度
    在前端开发中,我们常常需要对页面元素进行动态的样式修改。jQuery作为一款非常优秀的JavaScript库,具有简洁、强大、直观等特点,因此广泛应用于Web开发中。本文主要介绍如何使用jQuery来修改CSS高度。1. 获取元素首先,我们...
    99+
    2023-05-14
  • Dreamweaver中的AP元素如何修改宽度高度和颜色
    这篇文章主要介绍Dreamweaver中的AP元素如何修改宽度高度和颜色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先我们找到桌面的网页设计软件,双击打开应用程序然后我们我们进来了,进入之后新建一个空白的HTML...
    99+
    2023-06-08
  • jquery怎么修改高度
    使用jquery修改高度的方法:1.新建html项目,引入jquery;2.创建div标签,设置id属性;3.为标签设置宽高;4.添加button按钮,绑定onclick点击事件;5.通过id获取标签对象,使用css()方法修改宽高;具体步...
    99+
    2024-04-02
  • jQuery如何修改td的高
    这篇文章将为大家详细讲解有关jQuery如何修改td的高,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery修改td高的方法:1、使用attr()方法,语法“$(&...
    99+
    2024-04-02
  • jquery如何修改img的宽度
    这篇文章主要介绍“jquery如何修改img的宽度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何修改img的宽度”文章能帮助大家解决问题。首先,我们需要将jQuery引入我们的HTM...
    99+
    2023-07-05
  • jquery如何改变元素的高度
    这篇文章将为大家详细讲解有关jquery如何改变元素的高度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jquery改变元素的高度的方法:1...
    99+
    2024-04-02
  • vue如何修改UTC time
    这篇文章主要介绍了vue如何修改UTC time,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。UTC time在使用VueHighchart...
    99+
    2024-04-02
  • vue怎么修改table行高
    本教程操作环境:Windows10系统、Vue 3版、DELL G3电脑vue怎么修改table行高?vue element UI el-table表格调整行高,及单元格内字体大小说明: 缩小:行高到一定程度之后便不能缩小。 好像最...
    99+
    2023-05-14
    行高 Vue
  • jquery如何修改td宽度
    本篇内容介绍了“jquery如何修改td宽度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • css如何修改button宽度
    本篇内容主要讲解“css如何修改button宽度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css如何修改button宽度”吧! ...
    99+
    2024-04-02
  • css如何改变li标签的高度
    今天小编给大家分享一下css如何改变li标签的高度的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一...
    99+
    2024-04-02
  • vue如何监听窗口高度
    在vue中监听窗口高度的方法:1.新建项目,引入vue;2.定义data值,记录窗口高度;3.使用window.onresize获取窗口高度;4.使用watch方法实时监听窗口高度;具体步骤如下:首先,新建一个html项目,并在项目中引入v...
    99+
    2024-04-02
  • vue如何监听屏幕高度
    这篇文章主要介绍“vue如何监听屏幕高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue如何监听屏幕高度”文章能帮助大家解决问题。首先需要在data里面定义页面的高度data (){&...
    99+
    2023-07-04
  • vue如何修改端口号
    这篇文章主要为大家展示了“vue如何修改端口号”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何修改端口号”这篇文章吧。修改端口号大多数项目默认是监听80...
    99+
    2024-04-02
  • vue如何动态修改meta的title
    目录如何动态修改meta的title动态修改路由的meta.title需求解决办法如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页q...
    99+
    2024-04-02
  • 如何使用jquery改变div高度
    这篇文章主要讲解了“如何使用jquery改变div高度”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用jquery改变div高度”吧! ...
    99+
    2024-04-02
  • jquery如何修改宽和高
    使用jquery修改文本框宽和高的方法:1.新建html项目,引入jquery;2.添加文本框,设置id属性;3.新建button按钮,绑定onclick事件;4.获取input对象,使用width和height设置宽高;具体步骤如下:首先...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作