vue3在table里使用elementUI的form表单验证的示例代码

<template>
    <el-form
        :model="formParams.form"
        :rules="formParams.rules"
    >
      <el-form-item label="测试1" prop="input1">
        <el-input v-model="formParams.form.input1"></el-input>
      </el-form-item>
      <el-form-item label="测试2" prop="input2">
        <el-input v-model="formParams.form.input2"></el-input>
      </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
const formParams = reactive({
  form:{
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty (rule: any, value: string, callback: any)  {
  if (isEmpty(value)) {
  callback(new Error("必填项，请输入数据"));
} else {
  callback();
}
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

<template>
  <el-form
      :model="tableData.data"
      :rules="tableData.rules"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
data:[
  {
    input1: "",
    input2: ""
  }
],
rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
const formParams = reactive({
  form: {
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty(rule: any, value: string, callback: any) {
  if (isEmpty(value)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

<template>
  <el-form
      :model="tableData.data"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input1),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input2),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
  data: [
    {
      input1: "",
      input2: ""
    }
  ]
})
function validator_isEmpty_arg(rowValue: any, rule: any,value: string, callback: any){
  if (isEmpty(rowValue)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>