嗯，今天專案遇到，弄了一會，這裡分享一下，不足之處請小夥伴指出來，
官網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>