vue.js - el-table-column 中如何使用 el-form-item 进行表单验证？

Question

该如何正确的做动态表单校验：

<el-table-column label="物品名称" prop="stuffName" width="150">  <template slot-scope="scope">    <el-form-item :prop="`stuffName${scope.$index}`"      :rules="{ required: true, message: '请选择一个物品名称', trigger: 'change' }">      <el-select v-model="scope.row.stuffName" filterable @change="handleChange(scope.row)"        placeholder=" 请选择物品名称">        <el-option v-for="item in laborStuffList" :label="item.label" :value="item.name" :key="item.id">{{  item.name }}        </el-option>      </el-select>    </el-form-item>  </template></el-table-column>

“el-form-item”是后来加上的，加上el-select之后位置都变了

Answer 1

在 Element UI 中，el-form-item 通常用于 el-form 内部进行表单验证。当在 el-table-column 中使用 el-form-item 时，确实需要注意一些事项，因为 el-table 的渲染方式和 el-form 不完全相同。

你提供的代码片段已经基本正确地将 el-form-item 放在了 el-table-column 中，但如果你发现 el-select 的位置或显示有问题，可以尝试以下方法来解决：

1. 确保父元素有 el-form 包裹：
   确保你的 el-table 是在一个 el-form 元素内部的。这样，el-form-item 才能正确地与 el-form 的验证系统关联。
2. 使用 slot 而不是 slot-scope：
   在较新版本的 Vue 和 Element UI 中，推荐使用 slot 替代 slot-scope。你可以尝试使用 slot="default" 替代 slot-scope="scope"。
3. 使用 :prop 动态绑定属性：
   你已经正确使用了 :prop 来动态绑定属性，这样每个行的验证规则都会有所不同。
4. 样式调整：
   如果 el-select 的位置或显示有问题，可能需要调整 CSS 样式。检查是否有任何冲突的样式规则影响了 el-form-item 或 el-select 的显示。
5. 确保数据绑定正确：
   确保 v-model="scope.row.stuffName" 正确绑定了数据，并且 laborStuffList 也被正确传递给了组件。
6. 使用 validate 方法进行校验：
   如果你想要触发表单校验，可以使用 el-form 的 validate 方法。在需要的时候调用这个方法来进行校验。
7. 检查 Element UI 版本：
   确保你使用的 Element UI 版本支持你的用法。有时候，库的新版本会引入一些变化或修复一些已知问题。

如果以上方法都不能解决问题，你可能需要更详细地检查代码，或者考虑使用其他方法来实现动态表单校验，比如使用自定义的校验逻辑而不是 el-form-item。