el-table-column嵌套el-form-item不能进行校验问题解决

在使用Element UI的el-table-column嵌套el-form-item进行表单验证时，可能会遇到无法触发验证的问题。这是因为el-table-column中的每个单元格实际上是独立的表单域，而el-form-item需要在一个包含el-form的上下文中才能正常工作。

解决方法：

1. 确保你的el-table包含了el-form组件，并设置ref属性。
2. 在el-table-column中使用template或scoped slot来定义你的el-form-item。
3. 使用Vue的v-for来为每个el-form-item创建一个独立的表单域。

示例代码：

<template>
  <el-form ref="tableForm">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="scope">
          <el-form-item
            :prop="'[' + scope.$index + '].age'"
            :rules="[{ required: true, message: '年龄不能为空' }]"
          >
            <el-input v-model="scope.row.age"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="validateForm">验证表单</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: ''
        },
        // ...更多数据
      ]
    };
  },
  methods: {
    validateForm() {
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          alert('验证成功');
        } else {
          alert('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们使用了scope.$index来为每个el-form-item的prop属性赋值，使得每个单元格的内容都能被独立验证。当你点击“验证表单”按钮时，会触发表单的验证，并且会根据验证结果弹出相应的提示信息。