动态el-table里面嵌套el-form校验必填自动滑到没填文本框

### 实现嵌套表单的必填项校验并自动滚动到未填写文本框 在 `Element UI` 中，当需要在一个嵌套结构（如 `el-table` 和 `el-form` 组合）中实现必填项校验，并且希望自动滚动到未填写的文本框时，可以按照以下方式进行设计。 #### 1. **解决输入框失去焦点问题** 如果遇到 `el-input` 输入一个字后失去焦点的情况，通常是因为动态渲染引起的。可以通过调整 `key` 属性来解决问题。例如，在表格中的每一行设置唯一的索引作为 `key` 值[^1]： ```html <el-table :data="tableData"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-form-item :prop="'rows.' + scope.$index + '.name'" :rules="rules.nameRules"> <el-input v-model="scope.row.name" :key="scope.$index"></el-input> </el-form-item> </template> </el-table-column> </el-table> ``` 通过上述方式，确保每次渲染都基于固定的索引来绑定数据，从而避免因频繁重绘而导致的失焦现象。 --- #### 2. **嵌套表单的校验逻辑** 对于嵌套表单的校验，可以在父级 `el-form` 上定义统一的校验规则，并针对子组件内的字段进行路径映射。以下是完整的代码示例： ```html <el-form ref="formRef" :model="formData" :rules="rules"> <el-table :data="formData.rows"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-form-item :prop="'rows.' + scope.$index + '.name'" :rules="rules.nameRules"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> </el-table> <!-- 提交按钮 --> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> ``` 其中，`formData` 是整个表单的数据模型，而 `rules` 定义了具体的校验规则： ```javascript export default { data() { return { formData: { rows: [ { name: '' }, { name: '' } ] }, rules: { nameRules: [{ required: true, message: '请输入名称', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.formRef.validate(valid => { if (valid) { console.log('提交成功'); } else { // 失败后的处理逻辑 this.scrollToFirstError(); return false; } }); }, scrollToFirstError() { setTimeout(() => { const isError = document.querySelectorAll('.el-form-item.is-error'); if (isError.length > 0) { isError[0].scrollIntoView({ behavior: 'smooth' }); } }, 100); } } }; ``` 在此代码中，`scrollToFirstError` 方法会在校验失败后延迟执行，以等待 Vue 更新 DOM 结构后再定位错误位置[^3]。 --- #### 3. **优化 ESLint 配置以支持代码风格一致性** 为了保持项目代码的一致性和可维护性，建议配置 ESLint 来规范化代码格式。具体操作如下： - 创建 `.eslintrc.js` 文件： ```javascript module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/prettier'], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', quotes: ['error', 'single'], // 使用单引号 semi: ['error', 'always'] // 强制分号结尾 } }; ``` 此配置禁用了不必要的语法规则，并强制使用单引号和分号结束语句[^2]。 --- #### 总结 以上方案解决了以下几个核心问题： 1. 动态渲染导致的输入框失焦问题； 2. 嵌套表单的校验逻辑及其自动化处理； 3. 通过 JavaScript 调整页面视图至首个错误字段的位置； 4. 设置合理的 ESLint 规范以提升团队协作效率。 --- ###