vue3在table里使用elementUI的form表单验证

在Vue 3中使用Element UI的<el-table>组件并结合<el-form>进行表单验证，你需要确保Element UI库与Vue 3兼容。以下是一个简单的例子：

1. 安装Element Plus，它是Element UI的Vue 3版本：

npm install element-plus --save

2. 在你的组件中引入Element UI组件和Vue的相关库：

<template>
  <el-form :model="form">
    <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">
        <template #default="scope">
          <el-form-item :prop="`[${scope.$index}].name`" :rules="rules.name">
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </el-form>
</template>
 
<script>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElTable, ElTableColumn } from 'element-plus';
 
export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElTable,
    ElTableColumn
  },
  setup() {
    const form = ref([{ name: '', date: '' }]);
    const tableData = ref([{ name: '', date: '' }]);
    const rules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      // 其他字段的验证规则
    };
 
    return {
      form,
      tableData,
      rules
    };
  }
};
</script>

在这个例子中，我们定义了一个包含姓名和日期的表单模型form，以及一个表格数据数组tableData。rules对象包含了每列需要应用的验证规则。在<el-table-column>中，我们使用template #default来渲染每个单元格，并使用<el-form-item>包裹<el-input>以应用表单验证。

注意：

• 请确保你的Element Plus库与Vue 3兼容。
• 这里的scope.$index是当前行的索引，它用于在表单验证规则中构建动态的prop路径。
• 你可能需要根据实际需求调整表单的结构和验证规则。