Modify the height of 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;
}Basic use of vue-treeselect
Official website address: Vue-Treeselect
/
The company used Ruoyi to build a crash project. Ruoyi is a free and open source front-end project. Interested friends Baidu.
I came into contact with something magical:
vue-treeselect is really hard to describe, but after researching it, it is still very convenient, but the official website is in English and difficult to understand. Other resources on the Internet are also limited and not very thorough. I will explain the basic usage in the simplest way to you. It should be no problem to solve 80% of your needs. It is also recorded and convenient for you to check it in the future. Without further ado, you can gain talent.
-treeselect is a tree-shaped drop-down menu
As for how many nodes there are, it depends on how many layers your data source has, which is quite convenient. Needless to say, download dependency
npm install --save @riophae/vue-treeselect
2. Introduce components and styles
As for whether to introduce globally or single pages, it depends on your own needs. I will list the single pages to introduce them here.
import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/";
3. Use
<treeselect v-model="" :options="deptOptions" :normalizer="normalizer" placeholder="Select the previous directory" @select="change(node)"/>
-
v-model:Two-way data binding, needless to say -
options: Data source for tree drop-down menu options -
normalizer: Customize the display structure field, to put it bluntly, replace your name with the name specified by the tree -
select: Select event
First, let’s post a piece of data structure code:
data: [{
id: 10,
label: 'meat',
children: [{
id: 11,
label: 'pork'
}, {
id: 12,
label: 'beef'
}]
},
{
id:20,
label:'fruit',
children:[{
id:21,
label:'apple',
children:[{
id:211,
label:'Green Apple'
},{
id:212,
label:'Red Apple'
}]
}]
}],First, let’s talk about the normalizer attribute. It looks fancy and easy to understand:
normalizer(node) {
//When the child node is children=[], remove the child node if ( && !) {
delete ;
}
return {
id: ,
label: ,
children:
};
},He first deletes all the children in your data with empty nodes, and then specifies three fields: id, label, and children to operate the data more conveniently.
The parameter node is each node, commonly speaking, it is every child item data
-
idThat is the value obtained by your v-model, which is equivalent to the value in the opiton -
labelIt is the value you want to display, and what the user sees is equivalent to the label in the option -
childrenNeedless to say, the child nodes of your data
To put it simply, it is possible that the data id your backend engineer gives you is called ids, label is called value, and children is called content, but the tree only knows id, label, and children, then you can give it the corresponding id, it's that simple.
Next is to select the event. This is easy to understand. The parameter node is the current node. You can get it to do what you want.
change(node){
=
...
}Speaking of this, I can already meet most needs. Please study other fancy functions by yourself. If you have any experience, you can share it with me.
ps: If the backend gives you data of the same level of structure and let you convert it into a tree structure by yourself, I know that the fastest way is to use the method encapsulated in the framework, which is very convenient. If you do it in one line (if it depends on the framework yyds), please check it yourself if you need it.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.