elementui对话框Dialog使用，配合表单使用。vue-element-ui 弹窗，弹出层

Dialog 弹出一个对话框，适合需要页面元素更多的场景。

需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

配合表单使用：

<el-dialog title="提示"
            :visible.sync="dialogVisible"
            width="30%">
    <el-form :model="usermodel" label-width="80px">
        <el-form-item label="姓名">
            <el-input v-model="usermodel.UserName"></el-input>
        </el-form-item>
        <el-form-item label="学号">
            <el-input v-model="usermodel.Number"></el-input>
        </el-form-item>
        <el-form-item label="班级">
            <el-input v-model="usermodel.UserClass"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
            <el-select v-model="usermodel.CheckType"   placeholder="请选择">
                <el-option v-for="item in type" :label="item.val" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @@click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @@click="handlerUpdate">确 定</el-button>
    </span>
</el-dialog>