<template> <a-cascader :options="options" :load-data="loadData" placeholder="Please select" change-on-select @change="onChange" /> </template> <script> export default { data() { return { options: [ { value: 'zhejiang', label: 'Zhejiang', isLeaf: false, }, { value: 'jiangsu', label: 'Jiangsu', isLeaf: false, }, ], }; }, methods: { onChange(value) { console.log(value); }, loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; // load options lazily setTimeout(() => { targetOption.loading = false; targetOption.children = [ { label: `${targetOption.label} Dynamic 1`, value: 'dynamic1', }, { label: `${targetOption.label} Dynamic 2`, value: 'dynamic2', }, ]; this.options = [...this.options]; }, 1000); }, }, }; </script>
a-cascader组件实现级联功能,该功能要求动态加载选项,代码是api上的例子,
该功能想要触发loadData方法一定要设置 isLeaf:false这个属性 一定要设置 不然不会触发的