ue-admin级联下拉框实现动态获取省市城市

要实现动态获取省市城市数据，可以通过调用接口获取数据并渲染到 Cascader 组件中。

假设有一个获取省市区数据的接口 `/api/getAddress`，返回的数据格式如下：

{
  "code": 0,
  "data": [
    {
      "value": "zhejiang",
      "label": "浙江省",
      "children": [
        {
          "value": "hangzhou",
          "label": "杭州市",
          "children": [
            {
              "value": "xihu",
              "label": "西湖区"
            }
          ]
        }
      ]
    },
    {
      "value": "jiangsu",
      "label": "江苏省",
      "children": [
        {
          "value": "nanjing",
          "label": "南京市",
          "children": [
            {
              "value": "jianye",
              "label": "建邺区"
            }
          ]
        }
      ]
    }
  ]
}

可以使用 axios 或者其他的 HTTP 库发送 GET 请求获取数据，然后在组件中将获取到的数据赋值给 options 数组即可。

以下是一个示例代码：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      :props="props"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import axios from 'axios';
import VueAreaLinkage from 'vue-area-linkage';
import 'vue-area-linkage/dist/index.css';

export default {
  name: 'CascaderDemo',
  data() {
    return {
      selectedOptions: [],
      options: [],
      props: {
        expandTrigger: 'hover',
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    handleChange(selectedValues) {
      console.log('selectedValues', selectedValues);
    },
    getAddress() {
      axios.get('/api/getAddress').then(res => {
        if (res.data.code === 0) {
          this.options = res.data.data;
          Vue.use(VueAreaLinkage, {
            el: this.$el,
            data: this.options,
            selected: this.selectedOptions,
            props: this.props,
            separator: '/',
            firstLabel: '请选择',
            callback: selectedValues => {
              console.log('selectedValues', selectedValues);
            }
          });
        }
      });
    }
  },
  mounted() {
    this.getAddress();
  }
};
</script>

<style>
/* 样式可以根据自己的需要调整 */
.el-cascader {
  width: 300px;
}
</style>

在 mounted 钩子函数中调用 `getAddress` 方法获取数据。在 getAddress 方法中发送 GET 请求获取数据，如果请求成功，将获取到的数据赋值给 options 数组，然后使用 Vue-area-linkage 插件渲染级联下拉框。在插件的配置中，el 参数设置为 this.$el，表示使用当前组件的根元素作为级联下拉框的容器。callback 参数设置为 handleChange 方法，响应级联下拉框的 change 事件，输出选中的值。

以上代码仅供参考，具体实现还需要根据自己的项目需求进行调整。