Element-dialog创建新建页面

使用dialog创建页面

1、操作：点击新建，打开新建页面

<template>
    <!-- 新建按钮 -->
    <div class="button">
      <el-button type="primary" @click="openAddPage">新建</el-button></div>
    <!-- Dialog对话框 -->
    <el-dialog :visible.sync="dialogFormVisible" :title="dialogTitle"  width="500px">
      <!-- 表单 -->
      <el-form :model="addForm" :labelPosition="labelPosition" label-width="80px" :rules="rules" ref="addForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age" >
          <el-input v-model.number="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单底部按钮 -->
      <div slot="footer"  class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickButton('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        dialogTitle: '',
        addForm: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
   methods: {
    // 打开新建页面
    openAddPage () {
      this.dialogTitle = '新建'
      this.dialogFormVisible = true
    }
  }
</script>

---

属性

1、:visible.sync="dialogFormVisible" - visible是否显示 Dialog，当visible值为true弹框显示，反之则隐藏。加上.sync可以关闭弹框（不是点击关闭按钮，是右上角的叉），不加.sync关闭不了弹框

2、:title="dialogTitle" - 弹框标题，动态绑定，根据情况可以自定义复制显示标题

3、:model="addForm" - 动态绑定数据

4、v-model="addForm.name" -  v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，应该通过 JavaScript 在组件的 data 选项中声明初始值。

5、prop="name" - Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

6、slot="footer" 相当于加一个组件