vue + elementUI 设置省市下拉框二级联动具体操作步骤和代码，包括怎么获得数据引入api

在Vue.js项目中使用Element UI实现省市联动功能，通常涉及以下几个步骤：

1. **安装依赖**
首先需要安装Element UI库，如果还没有安装，可以使用npm或yarn进行安装：

   npm install element-ui@latest

2. **创建组件**
创建一个名为`ProvincesCity.vue`的文件，用于展示省市联动的选择器。这里使用自定义事件来传递数据。

<template>
  <el-select v-model="selectedProvince" placeholder="请选择省份">
    <el-option
      v-for="province in provinces"
      :key="province.id"
      :label="province.name"
      :value="province.id">
    </el-option>
  </el-select>

  <el-select v-model="selectedCity" :disabled="!selectedProvince" placeholder="请选择城市">
    <el-option
      v-for="city in cities"
      :key="city.id"
      :label="city.name"
      :value="city.id">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: [], // 省份数据
      cities: []     // 城市数据
    };
  },
  mounted() {
    this.getProvinces(); // 获取省份数据
  },
  methods: {
    getProvinces() {
      // 这里假设你有一个API接口获取省级数据，实际应用中替换为你的API请求
      axios.get('/api/provinces')
        .then(response => {
          this.provinces = response.data; // 将数据赋值给provinces
        })
        .catch(error => console.error('Error fetching provinces:', error));
    },
    handleProvinceChange(province) { // 当省份选择变化时触发
      this.selectedCity = ''; // 清空城市选项
      this.getCitiesByProvince(province); // 根据选中的省份获取城市数据
    },
    getCitiesByProvince(province) {
      // 同理，这里假设你有对应的城市接口，根据省份id获取
      axios.get(`/api/cities?provinceId=${province.id}`)
        .then(response => {
          this.cities = response.data;
        })
        .catch(error => console.error('Error fetching cities:', error));
    }
  }
};
</script>

3. **注册组件并使用**
在你的主入口文件或需要这个组件的地方，注册并使用这个组件。

注意：这只是一个基本的示例，实际开发中可能还需要处理接口返回的状态、错误处理以及状态管理等问题。同时，如果数据量较大，你可能会考虑使用Vuex来进行状态管理。