如何修改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的基本使用
官網(wǎng)地址:Vue-Treeselect
https://vue-treeselect.js.org/
公司用若依搞了一個速成項目,若依是一個免費開源的前后端項目,感興趣的朋友百度。
在里邊接觸到了一個神奇的東西 :
vue-treeselect,用起來真的是一言難盡,不過研究過后發(fā)現(xiàn)還是很方便的,但是官網(wǎng)全英文,很難懂,網(wǎng)上其他資源也有限,不是很透徹,我給大家用最簡單的方式講一下基本的用法,解決你百分之八十的需求應(yīng)該是沒問題的。也記錄一下方便自己以后查閱,話不多說,上才藝。
1.vue-treeselect是一個樹形的下拉菜單
至于到底有多少節(jié)點那就要看你的數(shù)據(jù)源有多少層了,挺方便的。下面這個這個不用多說吧,下載依賴
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
:雙向數(shù)據(jù)綁定,不用多說options
:樹形下拉菜單選項的數(shù)據(jù)源normalizer
:自定義展示結(jié)構(gòu)字段,說白了把自己的名字換成樹規(guī)定的名字select
:選擇事件
首先貼一段數(shù)據(jù)結(jié)構(gòu)的代碼瞅瞅:
? ? ? ? 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) { //當子節(jié)點也就是children=[]時候去掉子節(jié)點 ? ? ? if (node.children && !node.children.length) { ? ? ? ? delete node.children; ? ? ? } ? ? ? return { ? ? ? ? id: node.catalogueId, ? ? ? ? label: node.catalogueName, ? ? ? ? children: node.children ? ? ? }; ? ? },
他先把你數(shù)據(jù)里所有的children為空的節(jié)點都刪掉,然后規(guī)定三個字段:id,label,children來更方便的操作數(shù)據(jù)。
參數(shù)node就是每個節(jié)點,通俗說就是每隔子項數(shù)據(jù)
id
就是你v-model獲取到的值,就相當于opiton里的valuelabel
就是你要展示的值,讓用戶看到的東西,就相當于option里的labelchildren
也不用說了,你數(shù)據(jù)的子節(jié)點
說的在在在通俗點,有可能你的后端工程師給你的數(shù)據(jù)id叫ids,label叫value,children叫content,但是樹只認識id,label,children,那你給他對應(yīng)上就行了,就這么簡單。
再來就是選擇事件了,這個好理解,參數(shù)node是當前的節(jié)點,你可以得到他做你想做的操作
change(node){ ? ? this.aa=node.firstName ? ? ... }
說到這里就已經(jīng)可以應(yīng)付大多數(shù)需求了,其他花里胡哨的功能小伙伴們自己研究吧,如果有心得也可以分享給我。
ps:如果后端給你的是同級結(jié)構(gòu)數(shù)據(jù),讓你自己轉(zhuǎn)換為樹形結(jié)構(gòu)的話,我知道最快速的方法就是若以框架里封裝好的方法,非常方便,一行搞定(若依框架yyds),有需要的小伙伴自己查看。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯(v-model綁定的數(shù)據(jù)不能實時更新)
這篇文章主要介紹了VUE table表格動態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯(v-model綁定的數(shù)據(jù)不能實時更新),本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2020-04-04vue實例成員?插值表達式?過濾器基礎(chǔ)教程示例詳解
這篇文章主要為大家介紹了vue實例成員?插值表達式?過濾器基礎(chǔ)教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪2022-04-04Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進了一些細節(jié)和樣式,本文結(jié)合示例代碼給大家詳細講解,需要的朋友可以參考下2023-04-04vue 實現(xiàn)數(shù)字滾動增加效果的實例代碼
最近做了個項目需要做數(shù)字滾動增加的效果,剛開始接到這個項目還真是懵了,后來發(fā)現(xiàn)實現(xiàn)代碼很簡單的,下面小編給大家?guī)砹藇ue 實現(xiàn)數(shù)字滾動增加效果的實例代碼,需要的朋友參考下吧2018-07-07