antVue--a-cascader級聯元件使用觸發loadData方法注意事項
阿新 • • 發佈:2021-10-27
<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,這個屬性不然不能觸發