vue- admin编写级联下拉框省市城市

好的，下面是一个基于Vue和Element UI的级联下拉框示例代码，用于选择省份、城市和区县：

<template>
  <div>
    <el-cascader
      :options="options"
      :props="props"
      v-model="selectedOptions"
      @change="handleChange"
      placeholder="请选择地址"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      options: [], // 用于存储省市区数据的数组
      selectedOptions: [], // 用于存储当前选择的省市区数据的数组
      props: {
        value: 'name', // 显示的文本
        label: 'name', // 返回的值
        children: 'children', // 子节点
        isLeaf: 'isLeaf' // 是否为叶子节点
      }
    };
  },
  mounted() {
    // 获取省份数据
    this.loadData(0, data => {
      this.options = data;
    });
  },
  methods: {
    // 加载数据
    loadData(id, callback) {
      axios.get('/api/address/' + id).then(res => {
        const data = res.data;
        if (data.status === 0) {
          callback(data.data);
        } else {
          this.$message.error(data.message);
        }
      }).catch(error => {
        this.$message.error(error.message);
      });
    },
    // 选择器值改变时的回调
    handleChange(value, selectedOptions) {
      // 如果最后一个选项不是叶子节点，则加载它的子节点
      const lastOption = selectedOptions[selectedOptions.length - 1];
      if (!lastOption.isLeaf) {
        this.loadData(lastOption.id, data => {
          // 动态添加子节点
          this.$set(lastOption, 'children', data);
        });
      }
    }
  }
};
</script>

在该示例中，`options`数组用于存储省市区数据，`selectedOptions`数组用于存储当前选择的省市区数据。`props`对象用于设置`el-cascader`组件的属性，包括显示的文本、返回的值、子节点和是否为叶子节点。`mounted`生命周期钩子函数中，我们调用`loadData`方法获取省份数据。`loadData`方法接收一个`id`参数，用于指定父节点的ID，以此加载子节点数据。`handleChange`方法用于处理选择器值改变时的回调，如果最后一个选项不是叶子节点，则加载它的子节点。