ant-desgin-vue

1. 报错[antdv: Form.Item] Cannot generate validateStatus and help automatically
   分析：此类问题，一般都是a-form-item标签下，包含了多个 v-decorator属性导致的
   解决：1.保障只有一个 v-decorator即可；2.如果需要一个 FormItem 中多个被装饰过的表单元素，就需要自己配置 help, required, validateStatus 即可,具体操作如下：

<template>
  <a-form :form="form">
    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label="地址"
      :help="help"
      :validateStatus="validateStatus"
    >
      <a-input-group compact>
        <a-select
          style="width:33%"
          placeholder=" - "
          v-decorator="['provinceId', validatorRules.provinceId]"
          @change="handleCityChange"
        >
          <a-spin v-if="regionList.province.fetch" slot="notFoundContent" size="small" />
          <a-select-option
            v-for="i in regionList.province.list"
            :key="i.id"
            :title="i.regionName"
          >{{ i.regionName }}</a-select-option>
        </a-select>
        <a-select
          style="width:33%"
          placeholder=" - "
          v-decorator="['cityId',validatorRules.cityId]"
          @change="handleCityChange"
        >
          <a-spin v-if="regionList.city.fetch" slot="notFoundContent" size="small" />
          <a-select-option
            v-for="i in regionList.city.list"
            :key="i.id"
            :title="i.regionName"
          >{{ i.regionName }}</a-select-option>
        </a-select>
        <a-select
          style="width:33%"
          placeholder=" - "
          v-decorator="['areaId', validatorRules.areaId]"
        >
          <a-spin v-if="regionList.area.fetch" slot="notFoundContent" size="small" />
          <a-select-option
            v-for="i in regionList.area.list"
            :key="i.id"
            :title="i.regionName"
          >{{ i.regionName }}</a-select-option>
        </a-select>
      </a-input-group>
    </a-form-item>
    <a-form-item :wrapperCol="offsetWrapperCol">
      <a-button type='primary' @click="handleSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: 'address-modal',
  data() {
    return {
      // 自定义校验信息
      validateStatus: '',
      help: '',
      form: this.$form.createForm(this),
      confirmLoading:false,
      // 校验规则
      validatorRules: {
        provinceId: { rules: [{ required: true, message: '请选择省份' }] },
        cityId: { rules: [{ required: true, message: '请选择城市' }] },
        areaId: { rules: [{ required: true, message: '请选择地区' }] },
      },
      // 城市列表数据
      regionList: {
        province: {
          list: [],
          fetch: false
        },
        city: {
          list: [],
          fetch: false
        },
        area: {
          list: [],
          fetch: false
        }
      },
      // 表单栅格
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      offsetWrapperCol: {
        xs: { span: 24 },
        sm: { span: 16, offset: 5 }
      },
    }
  },
  methods: {
    handleSubmit() {
      // 监听表单提交事件，触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          // 这里是验证通过之后的操作
        } else {
          // 校验失败，自定义校验信息
          // 这边三个值依次取值，返回第一个有错误信息的属性
          const onErr = err.provinceId || err.cityId || err.areaId 
          if (onErr && onErr.errors) {
            // 如果有错误信息，设置错误状态
            this.validateStatus = 'error'
            // 一个错误信息内部是校验内容是以数组的形式返回的，可以在data.validatorRules中的rules中看到顺序
            this.help = onErr.errors[0].message
          } else {
            // 如果没有报错的情况
            this.validateStatus = 'success'
            this.help = ''
          }
        }
      })
    },
    handleCityChange(value, option) {
      // 这里是监听改变的业务逻辑，比如获取下级地址列表
    },
  }
}