element cascader 动态加载省市区

element cascader 是一个基于 Vue.js 的级联选择器组件，可以实现动态加载省市区的功能。

在使用 element cascader 动态加载省市区之前，我们需要先准备好相应的数据。一般来说，省市区数据是以树形结构组织的，每个地区都有一个唯一的标识符，以及父级地区的标识符来建立层级关系。我们可以将这些地区数据存储在一个数组中，每个元素包含地区的名称、标识符以及父级地区的标识符。

首先，我们需要在页面中引入 element cascader 组件，并将数据作为 props 传入：

<el-cascader :options="options" v-model="selectedAreas"></el-cascader>

在 Vue 实例中，我们需要定义一个数组来保存选中的地区，并且需要定义一个方法来动态加载地区数据。当用户选择某个地区时，我们需要根据该地区的标识符来获取该地区的子级地区数据，并将数据添加到 props 的 options 中，实现动态加载省市区的效果。

data() {
  return {
    selectedAreas: [], // 保存选中的地区
    options: [], // 地区数据
  };
},
methods: {
  loadAreas(selectedOptions) {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true; // 设置加载状态为 true

    // TODO: 根据 targetOption 中的标识符获取子级地区数据，并将数据添加到 targetOption 的 children 中

    targetOption.loading = false; // 数据加载完成后设置加载状态为 false
  },
},

在 `loadAreas` 方法中，我们可以根据 `targetOption` 中的标识符来向后端发送请求，获取子级地区数据。获取到数据后，我们将其添加到 `targetOption` 的 `children` 属性中，并设置 `loading` 状态为 false，表示数据加载完成。

通过以上的操作，我们就可以在使用 element cascader 组件时实现动态加载省市区的功能。用户选择某个地区时，组件会根据选择的地区标识符动态加载该地区的子级地区数据。