element-ui Cascader 动态加载

你可以使用 Element UI 的 Cascader 组件来实现动态加载。Cascader 组件支持通过 `lazy` 属性来实现动态加载数据。当用户点击父级选项时，你可以通过监听 `load` 事件来触发加载子级选项的数据。

首先，你需要在父级选项的 `load` 事件中调用异步函数加载子级选项的数据。在加载完成后，将数据赋值给子级选项，并将 `loading` 属性设置为 `false`。

以下是一个简单的示例代码：

<template>
  <el-cascader
    :options="options"
    :load-data="loadData"
    @load="handleLoad"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      options: [] // 父级选项数据
    };
  },
  methods: {
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      
      // 模拟异步加载数据
      setTimeout(() => {
        targetOption.loading = false;
        targetOption.children = [
          { label: '子级选项1', value: '1' },
          { label: '子级选项2', value: '2' },
          { label: '子级选项3', value: '3' }
        ];
      }, 1000);
    },
    handleLoad(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
    }
  }
};
</script>

在这个示例中，当用户点击父级选项时，会触发 `load` 事件，在 `handleLoad` 方法中设置 `loading` 属性为 `true`，然后在 `loadData` 方法中加载子级选项的数据，并将加载完成后的数据赋值给子级选项。

你可以根据自己的需求修改加载数据的方式和逻辑。

希望能够帮到你！如有任何问题，请随时提问。