1. 程式人生 > 其它 >antVue--a-cascader級聯元件使用觸發loadData方法注意事項

antVue--a-cascader級聯元件使用觸發loadData方法注意事項

<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,這個屬性不然不能觸發