vue3 elementplus表单验证列表内容的使用

在使用element-plus form表单验证规则时，若想验证表单内的列表内的每行的数据，可以使用以下方法

<el-table
:data="dataForm.dealerDeliveryOrderItemDtoList"
border
style="width: 100%"
:header-cell-style="{ 'text-align': 'center' }"
@selection-change="selChange"
>
    <el-table-column
    fixed="right"
    label="本次发货数量"
    width="200"
    align="center"
    >
    <template #default="scope">
      <el-form-item
        :prop="`dealerDeliveryOrderItemDtoList.${scope.$index}.goodsCount`"
        :rules="[
          {
            required: true,
            message: '发货数量不能为空',
            trigger: 'blur',
          },
          {
            type: 'number',
            message: '最小发货数量是0',
            min: 0,
            trigger: 'blur',
          },
          {
            type: 'number',
            message: '最大发货数量不得超过剩余发货数量',
            max:
              scope.row.count -
              (scope.row.deliveryCount ? scope.row.deliveryCount : 0),
            trigger: 'blur',
          },
        ]"
        :inline-message="true"
        ><el-input
          v-model.number="scope.row.goodsCount"
          placeholder="输入本次发货数量"
          type="number"
        />
      </el-form-item>
    </template>
    </el-table-column>
</el-table>

该表格列表是在form表单内的，form表单绑定的数据是dataForm，表格数据是form表单内的dealerDeliveryOrderItemDtoList。

在使用el-form-item时，prop的写法可以如图所示，将prop设置为变量，变量的值为字符串，并将数组的写法换成访问对象的简写形式，通过.读取数据，例如：`dealerDeliveryOrderItemDtoList.${scope.$index}.goodsCount`，若要读取数组第一个，则会转换成dealerDeliveryOrderItemDtoList.0.goodsCount；然后在el-form-item上添加rules属性。