el-form表单数组的验证

1、使用key可以刷新vue组件

<component :key="ts"> </component>
https://juejin.cn/post/7044551605269561380

2 el-form表单数组的验证

<template>
  <div :class="ns.b()">
    <content-section theme="border" title="车辆清单">
      <WrapperForm
        ref="formInstanceRef"
        :model="formData"
        class="flex basic-gap flex-col"
      >
        <el-row
          v-for="(item, index) in formData.carList"
          :key="index"
          class="flex w-full"
        >
          <el-col :span="10">
            <el-form-item
              :rules="{
                required: true,
                message: '请选择车辆',
                trigger: 'blur'
              }"
              label="车辆选择"
              :prop="`carList.${index}.flightZoneDeicingCarId`"
            >
              <el-input
                v-model="item.flightZoneDeicingCarId"
                :placeholder="DEFAULT_INPUT_PLACEHOLDER"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="数量"
              :prop="`carList.${index}.num`"
              :rules="{
                required: true,
                message: '请选择车辆',
                trigger: 'blur'
              }"
            >
              <el-input-number
                v-model="item.num"
                class="w-full"
                :placeholder="DEFAULT_INPUT_PLACEHOLDER"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" :class="ns.e('mg-left')">
            <el-button
              icon="el-icon-plus"
              type="primary"
              circle
              @click="newItem"
            />
            <el-button
              icon="el-icon-minus"
              type="danger"
              circle
              @click="removeItem(index)"
            />
          </el-col>
        </el-row>
      </WrapperForm>
    </content-section>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from '@/hooks'
import type { AddFlightZoneDeicingCarListDto } from '@/api/airfield-area-safety/flight-zone-deicing-car/interface'
type FormData = Partial<AddFlightZoneDeicingCarListDto[]>
import type { FormInstance, FormRules } from 'element-plus'
import { DEFAULT_INPUT_PLACEHOLDER } from '@/constants'
const formData = ref<{
  carList: AddFlightZoneDeicingCarListDto[]
}>({
  carList: [
    {
      flightZoneDeicingCarId: '',
      num: 0
    }
  ]
})
const formInstanceRef = ref<FormInstance>()
const ns = useNamespace('car-list-add')

function newItem() {
  formData.value.carList.push({
    flightZoneDeicingCarId: '',
    num: 0
  })
}
function removeItem(index: number) {
  formData.value.carList.splice(index, 1)
}

async function validate() {
  return formInstanceRef.value!.validate()
}

async function getFormData() {
  return formData.value
}

defineExpose({
  getFormData,
  validate
})
</script>

<style scoped lang="scss">
@include b(car-list-add) {
  @include e(mg-left) {
    margin-left: 10px;
  }
}
</style>

vue组件再Typescript的引用写法

const addCarRef = shallowRef<InstanceType>()

const formRules = ref<FormRules<FormData>>({
  high: [
    {
      required: true,
      validator: validateProp
    }
  ],
  mid: [
    {
      required: true,
      validator: validateProp
    }
  ]
})
const formRef = ref<WrapperFormInstance>()
// 初始化表单
function createData(): FormData {
  return {
    projectId: userStore.currentProjectInfo?.projectId,
    high: '',
    mid: ''
  }
}
function validateProp(rule: any, value: any, callback: any) {
  if (formData.value.high == formData.value.mid && formData.value.high) {
    return callback(new Error('预案配置优先级不能重复配置'))
  }
  return callback()
}

const aiDetectionServerIdRule = computed(() => [
  {
    required: formData.value.isAiDetection === 1,
    message: '请选择',
    trigger: 'blur'
  }
])
const ivsServerIdRule = computed(() => [
  {
    required: formData.value.ipcCompany === 'HUAWEI',
    message: '请选择',
    trigger: 'blur'
  }
])

watchEffect(() => {
  formRules.aiDetectionServerId = aiDetectionServerIdRule.value
  formRules.ivsServerId = ivsServerIdRule.value
})