el-tab-pane里嵌套el-form

### 如何在 `el-tab-pane` 组件内正确嵌套 `el-form` 组件 #### 示例代码 以下是通过 Element UI 实现 `el-tab-pane` 嵌套 `el-form` 的具体实现方式： ```html <template> <div id="app"> <!-- 设置 tab 左侧显示 --> <el-tabs v-model="activeTab" tab-position="left" style="height: 200px;"> <!-- Tab 页面项 --> <el-tab-pane label="表单一" name="form1"> <el-form :model="formData1" ref="form1Ref" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData1.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="formData1.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form1Ref')">提交</el-button> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane label="表单二" name="form2"> <el-form :model="formData2" ref="form2Ref" :rules="rules" label-width="80px"> <el-form-item label="邮箱" prop="email"> <el-input v-model="formData2.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form2Ref')">提交</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeTab: 'form1', formData1: { username: '', password: '' }, formData2: { email: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('验证失败'); return false; } }); } } }; </script> ``` --- #### 注意事项 1. **Tab 方向设置** 使用 `tab-position="left"` 属性可以让标签页的方向调整为左侧显示[^1]。 2. **动态绑定活动 Tab** 需要通过 `v-model` 动态绑定当前激活的 Tab，以便切换不同的表单项时能够正常工作。 3. **表单校验规则** 如果需要对表单数据进行校验，则需定义对应的 `rules` 并将其传递给 `el-form` 组件。同时，调用 `$refs[formName].validate()` 方法来触发校验逻辑。 4. **避免重复 ID 或 Name** 每个 `el-tab-pane` 中的子组件应具有唯一的名称或标识符（如 `ref`），以防止多个表单之间的干扰。 5. **加载 Element UI 资源** 可以通过 CDN 引入 Element UI 的 CSS 和 JS 文件，确保项目环境支持 Element UI 的运行[^2]。 --- ####