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

来源：https://blog.csdn.net/weixin_46211267/article/details/111853109