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

要实现级联下拉框省市城市，可以使用 Vue 的组件和插件，比如 Element UI 中的 Cascader 组件和 Vue-area-linkage 插件。

首先安装 Vue-area-linkage 插件：

npm install vue-area-linkage --save

然后在 Vue 组件中导入并注册 Cascader 和 Vue-area-linkage：

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

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

export default {
  name: 'CascaderDemo',
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhejiang',
          label: '浙江省',
          children: [
            {
              value: 'hangzhou',
              label: '杭州市',
              children: [
                {
                  value: 'xihu',
                  label: '西湖区'
                }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏省',
          children: [
            {
              value: 'nanjing',
              label: '南京市',
              children: [
                {
                  value: 'jianye',
                  label: '建邺区'
                }
              ]
            }
          ]
        }
      ],
      props: {
        expandTrigger: 'hover',
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  components: {
    ElCascader: Cascader
  },
  methods: {
    handleChange(selectedValues) {
      console.log('selectedValues', selectedValues);
    }
  },
  mounted() {
    Vue.use(VueAreaLinkage, {
      el: this.$el,
      data: this.options,
      selected: this.selectedOptions,
      props: this.props,
      separator: '/',
      firstLabel: '请选择',
      callback: selectedValues => {
        console.log('selectedValues', selectedValues);
      }
    });
  }
};
</script>

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

这里的 options 数组中包含了省市区数据，props 对象配置了 Cascader 组件的属性，selectedOptions 数组绑定了 Cascader 组件的选中值。handleChange 方法响应 Cascader 组件的 change 事件，输出选中的值。

在 mounted 钩子函数中使用 Vue-area-linkage 插件，将 options 和 selectedOptions 数组传入插件，设置一些配置参数，实现级联下拉框的功能。

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