vue3.0 element plus表格循环出的输入框进行校验(setup语法糖)

<template>
  <div class="mg-1em pd-1em bg-color">
    <h1>el-table表格循环的输入框如何进行校验</h1>
    <div class="form">
      <el-form ref="formTableRef" :model="formTable" :rules="rules" :inline="true">
        <el-table :data="formTable.tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="address" label="地址" align="center"></el-table-column>
          <el-table-column label="价格" align="center">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData[${$index}].purchaseNum`" :rules="rules.purchaseNum" :label-width="1">
                <el-input v-model="row.purchaseNum">
                  <template #suffix>
                    <span>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="btn">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//这里面是引入共工的自定义校验的方法，没有可以删除
import { verifyGreaterThanZero } from '@/utils/validate'

// 表单form
const formTableRef = ref()

//校验规则
const rules = {
  purchaseNum: [
    {
      required: true,
      message: '价格不能为空',
      trigger: 'blur',
    },
    { validator: verifyGreaterThanZero, trigger: 'blur' },//自定义校验
  ],
}

// 表格数据
const formTable = ref({
  tableData: [
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄',
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄',
    },
  ],
})

// 表单提交校验
function handleSubmit() {
  formTableRef.value.validate((valid) => {
    if (valid) {
      alert('校验通过')
    }
  })
}
</script>

效果图(代码可复制查看效果)安装element plus 和vue版本在3以上