如何修改vue-treeSelect的高度
作者:RxnNing 时间:2024-05-08 09:33:55
修改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里的valuelabel
就是你要展示的值,让用户看到的东西,就相当于option里的labelchildren
也不用说了,你数据的子节点
说的在在在通俗点,有可能你的后端工程师给你的数据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
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQL Server中使用DTS设计器进行数据转移
Python 递归式实现二叉树前序,中序,后序遍历
![](https://img.aspxhome.com/file/2023/7/66777_0s.png)
python绘图库Matplotlib的安装
![](https://img.aspxhome.com/file/2023/4/62894_0s.jpg)
使用Python操作MySQL的一些基本方法
SpringBoot首页设置解析(推荐)
![](https://img.aspxhome.com/file/2023/5/102935_0s.png)
python输出国际象棋棋盘的实例分享
Dreamweaver快捷键大全
Python数据可视化:幂律分布实例详解
![](https://img.aspxhome.com/file/2023/2/133762_0s.jpg)
javascript内置对象Math案例总结分析
![](https://img.aspxhome.com/file/2023/7/136877_0s.png)
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
![](https://img.aspxhome.com/file/2023/3/107803_0s.jpg)
Go Gin实现文件上传下载的示例代码
TensorFlow安装并在Pycharm搭建环境的详细图文教程
![](https://img.aspxhome.com/file/2023/4/127794_0s.jpg)
详解Python3序列赋值、序列解包
python入门学习之自带help功能初步使用示例
扫盲大讲堂:SQL查询结果集对注入的影响及利用
mysql8.0忘记密码的详细解决方法
![](https://img.aspxhome.com/file/2023/2/102372_0s.png)
python3+PyQt5实现自定义分数滑块部件
![](https://img.aspxhome.com/file/2023/5/67255_0s.jpg)
ASP+AJAX做类似google的搜索提示
pytorch 求网络模型参数实例
![](https://img.aspxhome.com/file/2023/3/103233_0s.jpg)