目录修改Vue-treeSelect的高度vue-treeselect的基本使用1.vue-treeselect是一个树形的下拉菜单2.引入组件和样式3.使用修改vue-t
.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
https://vue-treeselect.js.org/
公司用若依搞了一个速成项目,若依是一个免费开源的前后端项目,感兴趣的朋友百度。
在里边接触到了一个神奇的东西 :
vue-treeselect,用起来真的是一言难尽,不过研究过后发现还是很方便的,但是官网全英文,很难懂,网上其他资源也有限,不是很透彻,我给大家用最简单的方式讲一下基本的用法,解决你百分之八十的需求应该是没问题的。也记录一下方便自己以后查阅,话不多说,上才艺。
至于到底有多少节点那就要看你的数据源有多少层了,挺方便的。下面这个这个不用多说吧,下载依赖
npm install --save @riophae/vue-treeselect
至于是全局引入还是单页面引入那就看你自己需求了,我这里列举单页面引入。
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.CSS";
<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),有需要的小伙伴自己查看。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 如何修改vue-treeSelect的高度
本文链接: https://lsjlt.com/news/165220.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0