avue 实现下拉框事件 自动填充其他框_简单三级联动的实现

您可以使用 Avue 的 `@change` 事件来监听下拉框的选项变化，然后通过 JavaScript 代码自动填充其他框。

具体实现步骤如下：

1. 在 Avue 表单中定义需要联动的下拉框和其他框。

<avue-form :model="formData" :config="formConfig">
  <avue-form-item label="省份">
    <avue-select v-model="formData.province" :options="provinceOptions" @change="handleProvinceChange"></avue-select>
  </avue-form-item>
  <avue-form-item label="城市">
    <avue-select v-model="formData.city" :options="cityOptions" @change="handleCityChange"></avue-select>
  </avue-form-item>
  <avue-form-item label="县区">
    <avue-select v-model="formData.county" :options="countyOptions"></avue-select>
  </avue-form-item>
</avue-form>

2. 在 Vue 实例中定义联动的数据和方法。

export default {
  data() {
    return {
      // 省份选项数据
      provinceOptions: [
        { label: '北京市', value: '北京市' },
        { label: '上海市', value: '上海市' },
        { label: '广东省', value: '广东省' },
      ],
      // 城市选项数据
      cityOptions: [],
      // 县区选项数据
      countyOptions: [],
      // 表单数据
      formData: {
        province: '',
        city: '',
        county: '',
      },
    };
  },
  methods: {
    // 省份变化时触发，更新城市选项数据
    handleProvinceChange(value) {
      if (value === '北京市') {
        this.cityOptions = [
          { label: '北京市', value: '北京市' },
          { label: '北京市辖区', value: '北京市辖区' },
        ];
      } else if (value === '上海市') {
        this.cityOptions = [
          { label: '上海市', value: '上海市' },
          { label: '上海市辖区', value: '上海市辖区' },
        ];
      } else if (value === '广东省') {
        this.cityOptions = [
          { label: '广州市', value: '广州市' },
          { label: '深圳市', value: '深圳市' },
          { label: '珠海市', value: '珠海市' },
        ];
      } else {
        this.cityOptions = [];
      }
      this.formData.city = '';
      this.formData.county = '';
    },
    // 城市变化时触发，更新县区选项数据
    handleCityChange(value) {
      if (value === '北京市' || value === '上海市') {
        this.countyOptions = [
          { label: '东城区', value: '东城区' },
          { label: '西城区', value: '西城区' },
          { label: '崇明区', value: '崇明区' },
        ];
      } else if (value === '广州市') {
        this.countyOptions = [
          { label: '天河区', value: '天河区' },
          { label: '海珠区', value: '海珠区' },
          { label: '番禺区', value: '番禺区' },
        ];
      } else if (value === '深圳市') {
        this.countyOptions = [
          { label: '福田区', value: '福田区' },
          { label: '罗湖区', value: '罗湖区' },
          { label: '南山区', value: '南山区' },
        ];
      } else if (value === '珠海市') {
        this.countyOptions = [
          { label: '香洲区', value: '香洲区' },
          { label: '金湾区', value: '金湾区' },
          { label: '斗门区', value: '斗门区' },
        ];
      } else {
        this.countyOptions = [];
      }
      this.formData.county = '';
    },
  },
};

3. 根据需求调用相应的方法即可实现简单的三级联动效果。

上述代码中通过 `handleProvinceChange` 方法实现了当省份选项变化时更新城市选项数据，并重置城市和县区数据；通过 `handleCityChange` 方法实现了当城市选项变化时更新县区选项数据，并重置县区数据。在这两个方法中，可以根据具体业务需求进行修改。

希望这个简单的示例可以帮助您实现 Avue 下拉框的自动填充功能。