<think>我们使用Element UI的MessageBox组件（即`this.$confirm`）结合`this.$createElement`（在Vue实例中通常用`h`作为别名）来创建包含表格（这里使用`<el-form>`）和文本的弹窗内容。 步骤： 1. 使用`this.$createElement`创建`<el-form>`及其子元素（表单项）。 2. 将创建的`<el-form>`和下方的文本组合成一个VNode（虚拟节点）。 3. 在`this.$confirm`的配置中，将`message`设置为这个组合的VNode，并设置其他配置项（如标题、按钮等）。 注意：由于`this.$confirm`默认不支持直接渲染Vue组件（如`<el-form>`）的复杂交互，所以我们这里创建的`<el-form>`仅用于展示，如果要实现表单交互（如输入、验证等），建议使用自定义弹窗组件（如引用[4]的方法）。 但根据问题要求，我们只展示如何通过`this.$confirm`和`this.$createElement`在弹窗中显示`<el-form>`和文本。 示例代码： </think> 在 Vue2 中，通过 `this.$confirm()` 和 `this.$createElement()` 在弹窗中显示 `<el-form>` 表格及下方文本，可以通过以下方法实现： ### 完整实现代码 ```javascript methods: { showFormConfirm() { // 使用createElement创建表单结构 const formVNode = this.$createElement('div', [ this.$createElement('el-form', { props: { model: this.formData, labelWidth: '80px' } }, [ // 姓名输入框 this.$createElement('el-form-item', { props: { label: '姓名' } }, [ this.$createElement('el-input', { props: { value: this.formData.name, placeholder: '请输入姓名' }, on: { input: (val) => { this.formData.name = val } } }) ]), // 年龄输入框 this.$createElement('el-form-item', { props: { label: '年龄' } }, [ this.$createElement('el-input', { props: { value: this.formData.age, placeholder: '请输入年龄', type: 'number' }, on: { input: (val) => { this.formData.age = val } } }) ]), // 职位选择器 this.$createElement('el-form-item', { props: { label: '职位' } }, [ this.$createElement('el-select', { props: { value: this.formData.position, placeholder: '请选择职位' }, on: { change: (val) => { this.formData.position = val } } }, [ this.$createElement('el-option', { props: { label: '工程师', value: 'engineer' } }), this.$createElement('el-option', { props: { label: '设计师', value: 'designer' } }), this.$createElement('el-option', { props: { label: '产品经理', value: 'pm' } }) ]) ]) ]), // 表格下方的文本 this.$createElement('p', { style: { color: '#f56c6c', fontSize: '14px', marginTop: '20px' } }, '请确认表单信息无误，提交后将无法修改！') ]); // 显示确认弹窗 this.$confirm({ title: '表单信息确认', message: formVNode, showCancelButton: true, confirmButtonText: '确认提交', cancelButtonText: '取消', customClass: 'custom-form-confirm', dangerouslyUseHTMLString: false, beforeClose: (action, instance, done) => { if (action === 'confirm') { // 表单验证逻辑 if (!this.formData.name) { this.$message.error('请输入姓名'); done(false); // 阻止关闭 return; } if (!this.formData.position) { this.$message.error('请选择职位'); done(false); return; } // 验证通过，继续关闭 done(); } else { done(); // 直接关闭 } } }).then(() => { // 提交表单逻辑 this.submitForm(); }).catch(() => { this.$message.info('操作已取消'); }); }, submitForm() { // 表单提交逻辑 console.log('提交的表单数据:', this.formData); this.$message.success('表单提交成功！'); } }, data() { return { formData: { name: '', age: '', position: '' } } } ``` ### 关键实现说明 1. **创建表单结构**： ```javascript this.$createElement('el-form', { ... }, [表单项]) ``` 使用 `$createElement` 构建 `<el-form>` 组件，传递 `props` 配置表单模型和布局[^1] 2. **构建表单项**： ```javascript this.$createElement('el-form-item', { props: { label: '姓名' } }, [ this.$createElement('el-input', { props: { value: this.formData.name }, on: { input: (val) => { this.formData.name = val } } }) ]) ``` 为每个字段创建表单项，绑定数据模型和输入事件 3. **添加底部文本**： ```javascript this.$createElement('p', { style: { ... } }, '提示文本...') ``` 在表单下方添加文本节点，使用 CSS 控制样式和间距 4. **表单验证逻辑**： ```javascript beforeClose: (action, instance, done) => { if (action === 'confirm') { if (!this.formData.name) { this.$message.error('请输入姓名'); done(false); // 阻止关闭 return; } done(); // 验证通过 } } ``` 使用 `beforeClose` 回调实现提交前的表单验证[^3] 5. **样式优化**： ```css .custom-form-confirm .el-message-box__content { max-height: 70vh; overflow: auto; padding: 20px; } .custom-form-confirm .el-form-item { margin-bottom: 18px; } ``` 通过 `customClass` 添加自定义样式，确保表单布局合理 ### 完整功能扩展 若要实现更复杂的表单交互（如验证规则），推荐使用自定义弹窗组件： ```javascript // utils/formConfirm.js import Vue from 'vue'; import FormConfirm from '@/components/FormConfirm.vue'; export default function formConfirm(formConfig) { return new Promise((resolve, reject) => { const container = document.createElement('div'); document.body.appendChild(container); const vm = new Vue({ el: container, render: (h) => h(FormConfirm, { props: { formConfig, title: formConfig.title || '表单确认' }, on: { submit: (data) => { resolve(data); this.$destroy(); }, cancel: () => { reject(); this.$destroy(); } } }) }); }); } ``` 在组件中使用： ```javascript import formConfirm from '@/utils/formConfirm'; methods: { async showAdvancedForm() { try { const formData = await formConfirm({ title: '高级表单', fields: [ { type: 'input', label: '姓名', prop: 'name', required: true }, { type: 'select', label: '职位', options: [...] }, // 其他字段配置 ] }); console.log('提交数据:', formData); } catch { console.log('用户取消'); } } } ``` ### 注意事项 1. **数据绑定**：使用 `props.value` + `on.input` 实现双向绑定 2. **组件注册**：确保所有 Element UI 组件已全局注册 3. **性能优化**：复杂表单建议使用自定义组件而非 `$createElement` 4. **样式隔离**：使用 `customClass` 避免样式冲突 5. **销毁处理**：自定义组件需手动销毁 DOM 元素防止内存泄漏[^4]