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>