修改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/

公司用若依搞了一個(gè)速成項(xiàng)目，若依是一個(gè)免費(fèi)開源的前后端項(xiàng)目，感興趣的朋友百度。

在里邊接觸到了一個(gè)神奇的東西 ：

vue-treeselect，用起來真的是一言難盡，不過研究過后發(fā)現(xiàn)還是很方便的，但是官網(wǎng)全英文，很難懂，網(wǎng)上其他資源也有限，不是很透徹，我給大家用最簡(jiǎn)單的方式講一下基本的用法，解決你百分之八十的需求應(yīng)該是沒問題的。也記錄一下方便自己以后查閱，話不多說，上才藝。

1.vue-treeselect是一個(gè)樹形的下拉菜單

至于到底有多少節(jié)點(diǎn)那就要看你的數(shù)據(jù)源有多少層了，挺方便的。下面這個(gè)這個(gè)不用多說吧，下載依賴

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="選擇上級(jí)目錄" @select="change(node)"/>

• v-model:雙向數(shù)據(jù)綁定，不用多說
• options：樹形下拉菜單選項(xiàng)的數(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:'紅蘋果'
? ? ? ? ? ? }]
? ? ? ? ? }]
? ? ? ? }],

首先說一下這個(gè)normalizer這個(gè)屬性，看著花里胡哨，其實(shí)很好理解：

? ? normalizer(node) {
//當(dāng)子節(jié)點(diǎn)也就是children=[]時(shí)候去掉子節(jié)點(diǎn)
? ? ? if (node.children && !node.children.length) {
? ? ? ? delete node.children;
? ? ? }
? ? ? return {
? ? ? ? id: node.catalogueId,
? ? ? ? label: node.catalogueName,
? ? ? ? children: node.children
? ? ? };
? ? },

他先把你數(shù)據(jù)里所有的children為空的節(jié)點(diǎn)都刪掉，然后規(guī)定三個(gè)字段：id，label，children來更方便的操作數(shù)據(jù)。

參數(shù)node就是每個(gè)節(jié)點(diǎn)，通俗說就是每隔子項(xiàng)數(shù)據(jù)

• id就是你v-model獲取到的值，就相當(dāng)于opiton里的value
• label就是你要展示的值，讓用戶看到的東西，就相當(dāng)于option里的label
• children也不用說了，你數(shù)據(jù)的子節(jié)點(diǎn)

說的在在在通俗點(diǎn)，有可能你的后端工程師給你的數(shù)據(jù)id叫ids，label叫value，children叫content，但是樹只認(rèn)識(shí)id，label，children，那你給他對(duì)應(yīng)上就行了，就這么簡(jiǎn)單。

再來就是選擇事件了，這個(gè)好理解，參數(shù)node是當(dāng)前的節(jié)點(diǎn)，你可以得到他做你想做的操作

change(node){
? ? this.aa=node.firstName
? ? ...
}

說到這里就已經(jīng)可以應(yīng)付大多數(shù)需求了，其他花里胡哨的功能小伙伴們自己研究吧，如果有心得也可以分享給我。

ps：如果后端給你的是同級(jí)結(jié)構(gòu)數(shù)據(jù)，讓你自己轉(zhuǎn)換為樹形結(jié)構(gòu)的話，我知道最快速的方法就是若以框架里封裝好的方法，非常方便，一行搞定（若依框架yyds）,有需要的小伙伴自己查看。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論