vue + elementUI 实现下拉框二级联动

你可以使用 Vue 和 Element UI 来实现下拉框的二级联动。下面是一个简单的示例：

首先，在你的 Vue 组件中引入相关的库和组件：

<template>
  <div>
    <el-select v-model="selectedProvince" @change="handleProvinceChange">
      <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option>
    </el-select>
    <el-select v-model="selectedCity">
      <el-option v-for="city in cities" :key="city" :label="city" :value="city"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: ['省份1', '省份2', '省份3'], // 替换成你的省份数据
      cities: {
        '省份1': ['城市1', '城市2', '城市3'], // 替换成你的城市数据
        '省份2': ['城市4', '城市5', '城市6'],
        '省份3': ['城市7', '城市8', '城市9']
      }
    };
  },
  methods: {
    handleProvinceChange() {
      this.selectedCity = ''; // 清空已选择的城市
    }
  }
};
</script>

在上面的示例中，我们使用了两个 `el-select` 组件来展示省份和城市的下拉框。`provinces` 数组存储了所有的省份数据，`cities` 对象存储了每个省份对应的城市数据。当选择省份时，`handleProvinceChange` 方法会被调用，清空已选择的城市并更新城市下拉框的选项。

请注意，上述示例中的省份和城市数据都是静态的，你需要根据实际情况进行替换。你可以从后端或其他数据源中获取数据，并将其动态地传递给组件。

希望这个示例能帮助到你实现下拉框的二级联动！如有任何问题，请随时提问。