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可以不做處理，在最后一層的數據中要判斷是否為末尾節點，否則會一直生成