vue+element 如何在Cascader級聯選擇器 懶載入lazyload中 實現 服務端請求資料

在使用Element UI的Cascader級聯選擇中，有時候需要動態載入，在文件中，也提供了相關的示例程式碼：

這只是示例程式碼，lazyload中往往是通過請求服務端來獲取資料，不多說，直接貼程式碼

Element UI：

1 <el-cascader 
2     v-if="item.condition == 'input_select'" 
3     :props="codes" 
4     v-model="scope.row[item.field]"
5     :show-all-levels="false" 
6
 
     placeholder="請選擇職業類別">
7 </el-cascader>

Vue：

 1 <script>
 2     export default {
 3         name: 'basetable',
 4         data() {
 5             let that = this;
 6             return {
 7                 loading: false,
 8                 input_select_loading: false,
 9                 areas: this
 
.$regionData,
10                 codes: {
11                     value: 'code',
12                     label: 'name',
13                     lazy: true,
14                     lazyLoad(node, resolve) {
15                         const { level } = node; // 獲取當前node物件中的level屬性
16                         that.$http
 
17                             .post(that.Api.getOccupationCode, {
18                                 level: level,
19                                 code: node.value
20                             })
21                             .then(res => {
22                                 if (res.code == 1) {
23                                     const nodes = res.data;
24                                     if (level > 1) {
25                                         nodes.forEach(item => {
26                                             item.leaf = level >= 2; //判斷是否為末尾節點，這個地方是0,1,2三級
27                                             item.disabled = item.type == '拒保'; // 判斷是否可選
28                                         })
29                                     }
30                                     resolve(nodes);
31                                 } else {
32                                     that.$message.error(res.msg);
33                                 }
34                             })
35                     }
36                 },

服務端：

that.$http.post(that.Api.getOccupationCode, {level: level,code: node.value}).then()，是自己獲取服務端資料的方法，返回資料格式就是二維陣列

備註：

1、在呼叫時，注意this的指向問題；

2、注意每個節點node的leaf，一般第一層節點的leaf可以不做處理，在最後一層的資料中要判斷是否為末尾節點，否則會一直生成