Element UI Dialog 嵌套 Form 表单 - 完整指南

<p>在 Element UI Dialog 中嵌套 Form 表单，需要按照以下步骤进行操作：</p>
<ol>
  <li>在 Dialog 中添加 Form 组件，使用 ref 属性来获取表单实例。</li>
  <pre><code class="html"><template>
  <el-dialog title='编辑' :visible.sync="dialogVisible">
    <el-form ref="form" :model="form">
      <!-- 表单项 -->
    </el-form>
  </el-dialog>
</template></code></pre>
  <li>在 Dialog 中添加两个按钮，一个用于提交表单，一个用于关闭 Dialog。</li>
  <pre><code class="html"><template>
  <el-dialog title='编辑' :visible.sync="dialogVisible">
    <el-form ref="form" :model="form">
      <!-- 表单项 -->
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template></code></pre>
  <li>在 methods 中定义 submitForm 方法，该方法中调用表单实例的 validate 方法验证表单数据，如果验证通过则提交表单数据，否则提示用户错误信息。</li>
  <pre><code class="javascript">methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 提交表单数据
      } else {
        this.$message.error('表单填写不完整或不符合要求');
      }
    });
  }
}</code></pre>
</ol>
<p>完整示例代码如下：</p>
<pre><code class="html"><template>
  <el-dialog title='编辑' :visible.sync="dialogVisible">
    <el-form ref="form" :model="form">
      <el-form-item label='姓名'>
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label='年龄'>
        <el-input v-model.number="form.age" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交表单数据：', this.form);
        } else {
          this.$message.error('表单填写不完整或不符合要求');
        }
      });
    }
  }
};
</script></code></pre>