vue3编写带提示的表格组件功能

<template>
  <el-table :data="tableData" class="w100">
    <!-- 姓名列 -->
    <el-table-column prop="name" label="姓名">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="name">
            <el-input v-model="row.name" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <!-- 年龄列 -->
    <el-table-column prop="age" label="年龄">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="age">
            <el-input v-model="row.age" type="number" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="电话号码">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" ref="form">
          <el-form-item prop="phone">
            <el-input v-model="row.phone" maxlength="11" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="handleSave(row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script  setup>
import { ref } from 'vue';
    // 表格数据
    const tableData = ref([
      { name: '张三', age: 25 },
      { name: '李四', age: 30 },
    ]);
    // 验证规则
    const rules = {
      name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
        { min: 2, max: 5, message: '姓名长度在 2 到 5 个字符', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '年龄不能为空', trigger: 'blur' },
        { type: 'number', min: 0, max: 120, message: '年龄必须在 0 到 120 之间', 
         trigger:'blur' },
      ],
      phone: [
        { required: false, message: '电话号码不能为空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
      ],
    };
    // 保存操作
    const handleSave = (row) => {
      // 这里可以调用后端接口保存数据
      console.log('保存数据:', row);
    };
</script>
<style scoped>
/* .el-input {
  width: 100px;
} */
 .w100{width: 100%;}
 /* .w200{width: 200px;} */
</style>

<template>
  <div>
    <el-table :data="tableData" class="w100">
      <!-- 姓名列 -->
      <el-table-column prop="name" label="姓名">
        <template #default="{ row, $index }">
          <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
            <el-form-item prop="name">
              <el-input v-model="row.name"  class="w100"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- 年龄列 -->
      <el-table-column prop="age" label="年龄">
        <template #default="{ row, $index }">
          <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
            <el-form-item prop="age">
              <el-input v-model="row.age" type="number"  class="w100"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--电话号码 -->
      <el-table-column prop="phone" label="电话号码">
      <template #default="{ row }">
        <el-form :model="row" :rules="rules" :ref="(el) => setFormRef(el, $index)">
          <el-form-item prop="phone">
            <el-input v-model="row.phone" maxlength="11" class="w100"/>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    </el-table>
    <!-- 全部保存按钮 -->
    <el-button type="primary" @click="handleSaveAll">全部保存</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
    // 表格数据
    const tableData = ref([
      { name: '张三', age: 25 },
      { name: '李四', age: 30 },
    ]);
    // 表单引用
    const formRefs = ref([]);
    // 设置表单引用
    const setFormRef = (el, index) => {
      if (el) {
        // 根据索引更新对应的form ref
        formRefs.value[index] = el;
        console.log(el,index)
      }
    };
    // 验证规则
    const rules = {
      name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
        { min: 2, max: 5, message: '姓名长度在 2 到 5 个字符', trigger: 'blur' },
      ],
      age: [
        { required: true, message: '年龄不能为空', trigger: 'blur' },
        { type: 'number', min: 0, max: 120, message: '年龄必须在 0 到 120 之间', trigger: 'blur' },
      ],
      phone: [
        { required: false, message: '电话号码不能为空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
      ],
    };
    // 全部保存操作
    const handleSaveAll = async () => {
      let isValid = true;
      // 遍历所有表单并触发验证
      for (let i = 0; i < formRefs.value.length; i++) {
        const formRef = formRefs.value[i];
        console.log(formRef, 222);
        if (formRef) {
          try {
            await formRef.validate();
          } catch (error) {
            isValid = false;
            console.error(`第 ${i + 1} 行数据验证失败:`, error);
          }
        }
      }
      // 如果所有表单验证通过，保存数据
      if (isValid) {
        console.log('全部数据验证通过，保存数据:', tableData.value);
        // 这里可以调用后端接口保存数据
      } else {
        console.log('部分数据验证失败，请检查输入');
      }
    };
</script>
<style scoped>
.w100 {
  width: 100%;
}
</style>