ElementUI級聯選擇器動態載入Demo
阿新 • • 發佈:2020-10-20
嗯,今天專案遇到,弄了一會,這裡分享一下,不足之處請小夥伴指出來,
官網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>
&n