ant design vue 实现级联动态加载选项

Ant Design Vue提供了一个`Cascader`级联选择器组件，可以用于实现级联动态加载选项的功能。以下是一个简单的示例：

<template>
  <a-cascader v-model="selectedOptions" :options="options" :load-data="loadData"></a-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'beijing',
          label: '北京市',
          children: []
        },
        {
          value: 'shanghai',
          label: '上海市',
          children: []
        },
        {
          value: 'guangzhou',
          label: '广州市',
          children: []
        }
      ]
    }
  },
  methods: {
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      // 模拟异步加载数据
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          {
            value: `${targetOption.value}-1`,
            label: `${targetOption.label}-1`
          },
          {
            value: `${targetOption.value}-2`,
            label: `${targetOption.label}-2`
          }
        ];
      }, 1000);
    }
  }
}
</script>

在上面的示例中，我们首先定义了一个`Cascader`组件，并将`options`属性设置为我们的级联选项。然后，我们在`loadData`方法中模拟了异步加载数据的过程，并将加载到的子选项设置为目标选项的`children`属性。当用户选择一个选项时，`loadData`方法将会被调用，并将当前选中的选项传递给它。我们可以利用这些信息来动态加载子选项。

需要注意的是，我们在`targetOption`对象上设置了`loading`属性，以便在数据加载时显示加载状态。当数据加载完成后，我们将其设置为`false`，以便隐藏加载状态。