vue3 + element-plus 表格行内编辑，如何实现表单校验？

在Vue 3和Element Plus中实现表格行内编辑并进行表单验证，你可以使用el-form和el-form-item组件来创建表单，并在el-table-column中使用自定义模板来显示编辑组件。以下是一个简化的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" inline>
          <el-form-item prop="email">
            <el-input v-model="row.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRow(row)">确认</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
 
const tableData = reactive([
  {
    date: '2016-05-02',
    name: '王小虎',
    email: 'wangxiaolv@example.com',
  },
  // ...更多数据
]);
 
const rules = {
  email: [
    {
      required: true,
      message: '请输入邮箱地址',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
};
 
const submitRow = (row) => {
  // 使用表单验证
  row.ref.validate((valid) => {
    if (valid) {
      // 验证成功，处理更新逻辑
      console.log('提交数据:', row);
    } else {
      // 验证失败
      console.log('验证失败!');
      return false;
    }
  });
};
</script>

在这个例子中，el-form和el-form-item被用于创建表单，并且每行数据都有一个对应的el-form实例。rules对象定义了表单验证规则，submitRow方法在用户点击确认按钮时被触发，并对当前行的数据进行验证。如果验证通过，则执行更新逻辑；如果不通过，则显示错误信息。