vue-element弹框和表单相结合

可以使用 vue-element 的 Dialog 组件和 Form 组件相结合来实现弹框和表单的组合。具体步骤如下：

1. 在弹框中使用 Form 组件，将表单项放在 Form 组件中。

2. 在弹框中添加确定和取消按钮，确定按钮绑定一个方法，用来提交表单数据；取消按钮绑定一个方法，用来关闭弹框。

3. 在确定按钮的方法中，调用 Form 组件的 validate 方法来校验表单数据，如果校验通过则提交表单数据并关闭弹框，否则不做任何操作。

示例代码如下：

<template>
  <el-dialog :visible.sync="dialogVisible" title="弹框标题">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="表单项1" prop="item1">
        <el-input v-model="form.item1"></el-input>
      </el-form-item>
      <el-form-item label="表单项2" prop="item2">
        <el-input v-model="form.item2"></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: {
        item1: '',
        item2: ''
      },
      rules: {
        item1: [{ required: true, message: '请输入表单项1', trigger: 'blur' }],
        item2: [{ required: true, message: '请输入表单项2', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单数据
          // ...
          // 关闭弹框
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>