vue使用避坑汇总

  1. 配合antdesign-vue(V2) 进行表单validate的时候,设置了blur或者change,validate不能生效

如下:

 <a-form-item label="扶持配额" name="daySupportSum">
      <span class="i-dollar">$</span>
      <a-input-number 
          v-model:value="formState.daySupportSum"
          placeholder="金额≤999"
          :step="0.01"
          :precision="2"
          allow-clear
          prefix="$"
          class="w30 fc-sq" />
</a-form-item>

解决方式: 需把表单元素放到第一个位置

  1. 表单item拥有大于1个表单元素的时候,如何触发validate ?

vue使用避坑汇总

解决方式:

  • 为dateTime设置好规则,
  • 当formState.dateTimeS与formState.dateTimeE 其中一项更改的时候,给formState.dateTime赋值
<a-form-item label="时间" name="dateTime">
      <a-date-picker  v-model:value="formState.dateTimeS"/> 
          <span class="line">-</span> 
      <a-date-picker v-model:value="formState.dateTimeE" />
</a-form-item>

js代码:

const formState = reactive({
    fcTime: [],
    fcTimeS: undefined,
    fcTimeE: undefined,
})

watch(() => formState.dateTimeS, (val) => {
  formState.dateTime = [formState.dateTimeS, formState.dateTimeE]
})

watch(() => formState.dateTimeE, (val) => {
  formState.fcTime = [formState.dateTimeS, formState.dateTimeE]
  formRef.value.validateFields(['dateTime'])
})

rule规则:

dateTime: [
    {
      required: true,
      trigger: ['change', 'blur', 'submit'],
      message: '上课时间不能为空',
      type: 'array',
      validator: (rule, value) => {
        if (!value || !value[0] || !value[1]) {
          return Promise.reject('上课时间不能为空')
        }
        return Promise.resolve()
      }
    }
],
  1. antDesignV2 如何实现动态表单的validate,

    如下:

    vue使用避坑汇总

相对比antdesignV2来,antDesignV3 实现动态表单的validate方便,

<a-space v-for="(sight, index) in dynamicValidateForm.sights" :key="sight.id"> 
     <a-form-item 
         :name="['sights', index, 'value']" 
         label="Sight" 
         :rules="{ required: true, message: 'Missing sight', }" > 
         <a-select v-model:value="sight.value"
             :options="(sights[dynamicValidateForm.area] || []).map(a => ({ value: a }))" >
         </a-select> 
      </a-form-item> 
      <a-form-item 
          label="Price" 
          :name="['sights', index, 'price']" 
          :rules="{ required: true, message: 'Missing price', }" 
      > 
          <a-input v-model:value="sight.price" /> 
      </a-form-item>
      <MinusCircleOutlined @click="removeSight(sight)" /> 
</a-space>

下面是antDesignV2的方式:

rules:

  • 通过makeRules函数
const makeRules = (list) => {
      list.forEach((item) => {
        const ruleItem = {
          [`x x x-xxx-${item.id}`]: [
            {
              type: 'number',
              required: true,
              message: `请输入`,
              trigger: ['blur', 'change', 'submit'],
              validator: (rule, value) => {
                if (!value && value !== 0) {
                  return Promise.reject(`请输入`)
                }
                return Promise.resolve()
              }
            }
          ],
          [`xxx-xxx-${item.id}`]: [
            {
              type: 'array',
              required: true,
              message: `请选择`,
              trigger: ['blur', 'change', 'submit'],
              validator: (rule, value) => {
                if (!value || (value && !value.length)) {
                  return Promise.reject(`请选择`)
                }
                return Promise.resolve()
              }
            }
          ]
        }
        rulesObj = {
          ...rulesObj,
          ...ruleItem
        }
        return rulesObj
      })
    }
  • 通过makeRules(list)得到rules规则,然后给赋值给a-form的rules
 <a-form ref="formRef"
            :model="formState"
            :rules="rules"
            layout="vertical">   
      <div class="flex price-item" v-for="(item, index) of xxxList" :key="item.id">
          <a-form-item class="item-unit" label="xxx" :name="`price-${tabId}-${item.id}`">
            <a-input-number class="price-number" v-model:value="formState[`xxx-xxx-${item.id}`]" :min="0.01" />
          </a-form-item>
          <a-form-item class="item-unit" label="xxx" :name="`xxx-${tabId}-${item.id}`">
            <a-input v-model:value="formState[`country-${tabId}-${item.id}`]"/>
          </a-form-item>
          <DeleteOutlined class="delete-btn" @click="deletePriceItem(item.id, index, item)" />
    </div>
    </a-form>

原文链接:https://juejin.cn/post/7351581179017199650 作者:我是大龄程序员

(0)
上一篇 2024年3月29日 下午4:00
下一篇 2024年3月29日 下午4:11

相关推荐

发表评论

登录后才能评论