elementplus 下拉框 联动

### Element Plus 下拉框组件联动使用示例

#### 基本概念
Element Plus 提供了丰富的表单控件，其中`<el-select>`用于创建下拉列表，而`<el-cascader>`则适用于级联选择场景。当涉及到多个下拉菜单之间的逻辑关联时，则需通过监听特定事件并更新其他组件的状态来实现这种交互效果。

#### 示例代码展示
下面是一个简单的例子，展示了如何利用 Vue.js 和 Element Plus 来构建两个相互影响的选择器：

<!-- HTML部分 -->
<div id="app">
  <!-- 第一个选择器触发第二个选择器的变化 -->
  <el-form>
    <el-form-item label="省份" prop="province">
      <el-select v-model="form.province" @change="handleProvinceChange" placeholder="请选择省">
        <el-option v-for="(prov, index) in provinces" :key="index" :label="prov.name" :value="prov.code"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="城市" prop="city">
      <el-select v-if="cities.length !== 0" v-model="form.city" placeholder="请选择市">
        <el-option v-for="(city, idx) in cities" :key="idx" :label="city.name" :value="city.code"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</div>

// JavaScript 部分 (Vue实例配置)
new Vue({
  el: '#app',
  data() {
    return {
      form: { province: '', city: '' },
      provinces: [
        { name: '广东省', code: 'gd' }, 
        { name: '江苏省', code: 'js'}
      ],
      allCities: {
        gd: [{name:'广州市',code:'gz'}, {name:'深圳市',code:'sz'}],
        js: [{name:'南京市',code:'nj'}, {name:'苏州市',code:'sz'}]
      },
      cities:[]
    };
  },
  methods:{
    handleProvinceChange(value){
      this.cities = this.allCities[value];
    }
  }
});

此段代码实现了基于用户对第一个下拉菜单（即省级行政区划）的选择自动填充第二个下拉菜单（市级行政区划）。每当选择了不同的省份时，都会调用 `handleProvinceChange()` 方法刷新可用的城市列表[^1]。

为了更进一步增强用户体验，在实际项目开发过程中还可以考虑加入加载动画、错误提示等功能模块，并确保页面布局美观大方[^2]。