vue使用避坑汇总

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

如下：

ini 复制代码

 <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>

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

表单item拥有大于1个表单元素的时候，如何触发validate ？

解决方式：

为dateTime设置好规则，

当formState.dateTimeS与formState.dateTimeE 其中一项更改的时候，给formState.dateTime赋值

ini 复制代码

<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代码：

scss 复制代码

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规则：

js 复制代码

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()
      }
    }
],

antDesignV2 如何实现动态表单的validate，

如下：

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

js 复制代码

<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函数

javascript 复制代码

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

ini 复制代码

 <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>