ElementUI級聯選擇器動態載入Demo

意必固我_LRL發表於2020-10-20
UI

 

嗯，今天專案遇到，弄了一會，這裡分享一下，不足之處請小夥伴指出來，

官網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>

 

相關文章