vue3的Element Plus 表单校验（表单可手动按钮增、删）-- vue2的Element-ui原理一样

下面是关键代码（根据具体业务逻辑修改）：

<template>
  <div>
    <el-form :model="orderNumber" label-width="9rem">
      <!-- 可自动添加数据检验表单 -->
      <template
        v-for="(item, index) in orderNumber.orderList"
        :key="index + Math.random()"
      >
        <el-form-item
          :prop="'orderList.' + index + '.orderValue'"
          :rules="[
            {
              required: false,
              message: '请输入订单号',
              trigger: 'blur',
            },
            {
              validator: validatePrice,
              trigger: 'blur',
            },
          ]"
          label="输入订单号"
        >
          <div style="display: flex">
            <!-- $forceUpdate() //强制更新输入框，组件内置函数 -->
            <el-input @input="$forceUpdate()" v-model="item.orderValue" />
            <!-- 显示删除按钮 -->
            <div
              v-if="orderNumber.orderList.length > 1"
              class="pay_order_cancel"
              @click="cancelOrder(index)"
            >
              <i class="iconfont icon-shanchu"></i>
            </div>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <!-- 限制表单最多展示三个 -->
    <div
      v-if="orderNumber.orderList.length < 3"
      class="pay_order_add_buttom"
      @click="addOrder"
    >
      <i class="iconfont icon-tianjia" style="margin-right: 1rem"></i>新增订单号
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
const validatePrice = (rule, value, callback) => {
  // 订单号输入框规则校验
  if (!value) return callback(new Error("请输入订单号"));
  return callback();
};

//订单号数据
const orderNumber = reactive({
  orderList: [{ orderValue: "" }],
});

const addOrder = () => {
  // 添加订单
  // console.log(orderNumber.orderList);
  orderNumber.orderList.push({ orderValue: "" });
};

const cancelOrder = (index) => {
  // 删除订单
  orderNumber.orderList.splice(index, 1);
};
</script>
<style scoped></style>

下面解释主要的踩坑点：

<template
    v-for="(item, index) in orderNumber.orderList"
    :key="index + Math.random()"
 >
<el-form-item
          :prop="'orderList.' + index + '.orderValue'"
          :rules="[
            {
              required: false,
              message: '请输入订单号',
              trigger: 'blur',
            },
            {
              validator: validatePrice,
              trigger: 'blur',
            },
          ]"
          label="输入订单号"
        >

       <el-input @input="$forceUpdate()" v-model="item.orderValue" />

   </el-form-item>
</template>

解释：

（1）要使用的扩展列表要用<template>包含 ， v-for的key需要自增保持唯一，这里使用了随机数Math.random()使key值唯一

（2）:prop="'orderList.' + index + '.orderValue'" 的内容，

orderList是数组的名字

index是v-for的 index 序列号，

orderValue是输入框的检验变量 ，注意：一定要和验证字段的参数名字严格对应，比如，上面例子和输入框<el-input @input="$forceUpdate()" v-model="item.orderValue" /> 中的v-model值orderValue严格对应