首页 > 其他分享 >ant-desgin-vue

ant-desgin-vue

时间:2023-02-09 14:36:53浏览次数:43  
标签:vue span help err rules 校验 ant desgin validateStatus

  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) {
      // 这里是监听改变的业务逻辑,比如获取下级地址列表
    },
  }
}

标签:vue,span,help,err,rules,校验,ant,desgin,validateStatus
From: https://www.cnblogs.com/charlesxiao/p/17105137.html

相关文章

  • vue 一次显示多张图片的轮播图
    1. npm i vue-slick-carousel<template><div><divclass="activities"><VueSlickCarouselv-bind="settings"><divclass="activity">......
  • vue 图片分页
    <divclass="activitiesphone"><!--动态--><divclass="activity"v-for="(item,index)inimgList.slice(......
  • vue 前端, 树形菜单的回显
      //树菜单回显(多级)  changeDetSelect(key,treeData){   letarr=[];//在递归时操作的数组   letreturnArr=[];//存放结果的数组 ......
  • 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块
    第14章、内建组件和模块14.1KeepAlive组件的实现原理KeepAlive一词借鉴了HTTP协议。KeepAlive组件可以避免组件被频繁的销毁/重建。本质是缓存管理,再加上特殊的挂......
  • 【Vue】父子组件传值、方法引用
    父子组件值、方法引用1、值1.1父组件获取子组件值父组件<template><div><button@click="getChildValue">click</button><childref="child"></child>......
  • Vue 常用
    阅读目录​​Vue3中八个生命周期函数​​​​js动态添加对象属性​​​​js遍历对象​​​​第一种:for......in​​​​第二种​​​​第三种:使用Object.getOwnPropertyNa......
  • Vue 的优化技巧
    演示代码使用Vue3+ts+Vite编写,但是也会列出适用于Vue2的优化技巧,如果某个优化只适用于Vue3或者Vue2,我会在标题中标出来。代码优化v-for中使用key使用v......
  • Vue2.9.6安装element-ui
    阅读目录安装element-ui源码路由文件:E:\node\vue296\src\router\index.js入口:E:\node\vue296\src\main.js组件:E:\node\vue296\src\components\Count.vue......
  • Vue 中遇到的错误
    阅读目录解决VUE启动问题(Youmayusespecialcommentstodisablesomewarnings)两种方法解决方法一方法二安装vuex启动报错“export‘watch‘wasn......
  • [email protected]选项卡
    阅读目录<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>body{font-family:"Micr......