动态添加el-form表单项且动态增加表单校验，自定义校验

需求：省市放在同一行，且当选择了省才可以出现市的选择框，二者只要出现均为必填。

 完整代码：

<el-form-item>
  <div slot="label"><span class="require">*</span>省市</div>
  <el-col :span="8">
    <!-- 省 -->
    <el-form-item prop="province">
      <el-select v-model="addressForm.province">
        <el-option v-for="province in provinceList" :key="province.id" :label="province.name" :value="province">{{ province.name }}</el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <!-- 市 -->
    <el-form-item prop="city" v-if="cityList.length" :rules="cityList.length ? addressFormRule.city : []">
<!-- addressFormRule.city 为自定义校验，如果不需要自定义校验，则可以写  :rules = "cityList.length ? {required: true, message: '省份不能为空', trigger: 'change'}: []" -->
      <el-select v-model="addressForm.city">
        <el-option v-for="city in cityList" :key="city.id" :label="city.name" :value="city">{{ city.name }}</el-option>
      </el-select>
    </el-form-item>
  </el-col>
</el-form-item>

data () {
  var validateCityId = (rule, value, callback) => {
    if (this.dataForm.cityId === null || this.dataForm.cityId === '') {
      callback(new Error('城市不能为空'))
    } else {
      callback()
    }
  }
  
  return {
    addressFormRule: {
      province: [{required: true, message: '请选择省份', trigger: 'change'}],
      city: [{validator: validateCityId, trigger: 'change'}]
    }
  }
}