ant design vue 选择下拉框 联动

前言：

考核周期：当考核类型选择的是平时考核的时候，可选第一季度/第二季度/第三季度/第四季度，当考核类型是年度考核的时候，考核周期默认显示为全年不可修改

效果图：

---

html

              <a-form-item v-bind="formItemLayout" label="考核类型">
                <a-select
                  placeholder="请选择"
                  v-decorator="['type', {
                    rules:[{required:true,message:'请选择'}]
                  }]"
                  style="width: 180px"
                  :options="options.assessType"
                  @change="handleProvinceChange"
                >
                </a-select>
              </a-form-item>

              <a-form-item v-bind="formItemLayout" label="考核周期">
                <a-select
                  style="width: 180px"
                  placeholder="请选择"
                  v-decorator="['period', {
                    rules:[{required:true,message:'请选择'}]
                  }]"
                  v-if="this.varKey == 20"
                  :disabled="true"
                  name="this.thirdCity.name"
                >
                  <a-select-option v-for="city in thirdCities" :key="city.id">
                    {{ city.name }}
                  </a-select-option>
                </a-select>
                <a-select
                  style="width: 180px"
                  placeholder="请选择"
                  v-decorator="['period', {
                    rules:[{required:true,message:'请选择'}]
                  }]"
                  v-else
                >
                  <a-select-option v-for="city in cities" :key="city.id">
                    {{ city.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>

js

  const provinceData = [10, 20]
  const cityData = {
    10: [{id:10,name:'第一季度'},{id:20,name:'第二季度'},{id:30,name:'第三季度'},{id:40,name:'第四季度'}],
    20: [{id:50,name:'全年'}],
  }
data(){
    return{
        varKey:0,
        provinceData,
        cityData,
        cities: cityData[provinceData[0]],
        thirdCities: cityData[provinceData[1]],
        thirdCity: cityData[provinceData[1]][0],
    }
},
methods: {
      handleProvinceChange(value) {
        this.cities = cityData[value]
        this.varKey = value
        if(value == 20){
          this.$nextTick(() => {
            this.form.setFieldsValue({period: this.thirdCity.id})
          })
        }
      }
}