ElementUI級聯選擇器動態加載Demo

 

嗯，今天項目遇到，弄了一會，這里分享一下，不足之處請小伙伴指出來，

官網Demo：

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

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `選項${id}`,
                  leaf: level >= 2
                }));
              // 通過調用resolve將子節點數據返回，通知組件數據加載完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

這是官網的Demo，我們要做的就是把

 Array.from({ length: level + 1 }) .map(item => ({}）

數據處理一下，換成我們的接口數據。

通過解構賦值替換參數，需要注意的是，leaf是一個booler值，為true時不顯示子節點，反之顯示。其他參數直接賦值即可。

level 代表級數。默認為0，會自動累加

具體的Demo代碼：

var vm = new Vue({
        el: "#apps",
        data() {
            return {
                props: {
                    lazy: true,
                    lazyLoad(node, resolve) {
                        const { level } = node;
                        console.log(node)
                        setTimeout(() => {
                            // 第一級
                            if (node.level == 0) {
                                // Ajax請求數據，填充選擇框
                                asiox.get(url).then((response) => {
                                    const nodes = response.data.map((item, index) => ({
                                            value: item.id,
                                            lable: item.nodeName,
                                            leaf:node.level >= 2
                                    }));
                                    resolve(nodes);         
                                })
                            }
                            // 第二級
                            if(node.level == 1){
                                // Ajax請求數據，填充選擇框，傳遞上一級參數
                                asiox.get(url+node.value).then((response) => {
                                    const nodes = response.data.map((item, index) => ({
                                            value: item.id,
                                            lable: item.nodeName,
                                            leaf:node.level >= 2
                                    }));
                                    resolve(nodes);         
                                })
                            }
                    
                        }, 100);
                    }
                }
            };
        },
        computed: {

        },
        mounted() {

        },
        methods: {
            handleChange(value) {

                console.log(value);
            
            },
        }


    })

 

  <el-cascader clearable :props="props" style="width:100%"
                             @change="handleChange">
                </el-cascader>