Element el-cascader 級聯選擇器詳解

1. 概述

級聯選擇器用途比較廣泛，例如選擇人員所屬的機關，可以從總公司-分公司-部門-子部門這樣級聯選擇下來。

如果自己去實作一個級聯選擇器，實際上是難度較大的，Element提供了一個功能相當完善的級聯選擇器，本篇文章就進行一個詳細的介紹。

2. 資料綁定

2.1 預設資料綁定

級聯選擇器預設會綁定一個數組，節點的顯示文本和值分别對應label、value屬性，節點的後代對應children屬性。示例代碼如下：

預設資料綁定,選中值{{value}}

   <el-cascader v-model="value" :options="defaultOptions"></el-cascader>

1

2

export default {

 data() {

   return {

     value: [],

     defaultOptions: [{

       value: '1',

       label: '山東',

       children: [{

         value: '2',

         label: '濟南',

       },

       {

         value: '3',

         label: '泰安',

       }],

     }],

   }

 }

}

對應效果如下，注意綁定的值是一個數組，記錄了選擇路徑每個節點的值。

2.2 指定綁定資料格式

如果後端接口已開發完畢，後端傳回的資料格式是固定的，也可以通過props參數指定綁定資料的格式，代碼如下，将節點文本、節點值綁定的屬性改為了id和name。

 指定綁定屬性

   <el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'son' }"></el-cascader>

 myOptions: [{

       id: '1',

       name: '山東',

       son: [{

         id: '2',

         name: '濟南',

         id: '3',

         name: '泰安',

3. 常用功能

3.1 修改觸發方式

預設情況下，需要點選上一級的選項，才能展開下一級。通過修改expandTrigger參數可以實作懸停展開效果。

修改觸發方式，預設為click點選觸發,可以修改為hover懸停觸發

   <el-cascader v-model="value" :options="defaultOptions" :props="{ expandTrigger: 'hover' }"></el-cascader>

3.2 增加清空按鈕

通過設定clearable，增加一個清空按鈕，點選該按鈕可清空選中項。

增加清空按鈕

   <el-cascader v-model="value" :options="defaultOptions" clearable></el-cascader>

效果如下：

3.3 可搜尋

通過為el-cascader設定filterable屬性，即可輕松啟用搜尋功能。

可搜尋

   <el-cascader v-model="value" :options="defaultOptions" filterable></el-cascader>

3.4 選中項隻顯示最後一級

當級别較多時，顯示全部的級别會顯得很雜亂，我們可以設定:show-all-levels="false"來控制el-cascader隻顯示最後一級别。

   隻顯示最後1級

   <el-cascader v-model="value" :options="defaultOptions" :show-all-levels="false"></el-cascader>

3.5 可選中任意一級

有時候，我們想選中不是最後一級的節點，可以通過checkStrictly參數來實作。

可選中任意1級

   <el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true' }"></el-cascader>

3.6 面闆樣式

預設為下拉框的樣式，也可以完整顯示為一個面闆，使用l-cascader-panel标簽即可。

   面闆樣式：

   <el-cascader-panel v-model="value" :options="defaultOptions"></el-cascader-panel>

3.7 自定義節點内容

可以通過插槽自定義節點的内容，為節點添加圖示、修改字型、修改顔色。

自定義節點内容

   <el-cascader v-model="value" :options="defaultOptions">

     <template slot-scope="{ data }">

       <span style="color:red;">{{ data.label }}</span>

     </template>

   </el-cascader>

template中間的部分可以任意自定義，上面代碼運作效果：

4. 動态加載下級

有時候節點數量很多，一次性加載速度會很慢，此時可以選擇動态的加載下一級别。

動态加載下級

   <el-cascader :props="myProps"></el-cascader>

     myProps: {

       lazy: true,

       lazyLoad(node, resolve) {

         console.log(node);

         // 通過調用resolve将子節點資料傳回，通知元件資料加載完成

         let nodes = [];

         if (node.level == 0) {

           nodes.push({

             label: '山東',

             value: 1

           });

         } else if (node.level == 1) {

             label: '濟南',

             value: 2

         }

         resolve(nodes);

       }

     }

解釋下上面的代碼，通過lazy:true啟用動态加載，每次點選父節點會出發lazyLoad方法，并将節點資料node傳遞進來。

我們根據node.level判斷目前是第幾個級别，如果是第0級則傳回包含山東的數組，如果是第1級則傳回包含濟南的數組。

最後的resolve函數是關鍵，會将數組的元素解析為目前父節點的子節點。

注意在實際項目開發中，我們可以根據node.data來擷取節點綁定的資料資訊，進而向後端查詢目前節點的子節點數組。

5. 小結

el-cascader提供了靈活的功能，快捷的實作方式，在級聯選擇時非常好用。

相比于使用多個下拉框的方式，級聯選擇器節省了螢幕空間，且可以支援任意多個級别，無疑是更好的選擇。