Vue+Element-Ui弹出框的搭建及使用

1.  @click="dialogFormVisible = true"       这种是直接点击就打开

<el-button type="success" size="small" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary" size="small" @click="update">修改</el-button>
        <el-button type="danger" size="small" @click="del">删除</el-button>

<el-dialog
        title="添加"
        :visible.sync="dialogFormVisible" //这里需要和上面的按钮绑定
        :show-close="showClo" //不显示x关闭
        @close="clear">  //清空输入框的数据
//这里写你的前端代码
<div slot="footer" class="dialog-footer">
    //这里也需要绑定一下由于你点击取消的时候让这个框不显示
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
 </el-dialog>

<script>
export default {
//如果这个是单独的组件,外部需要用的时候,在这里需要把他暴露出去
  name:"dialog",
data(){
    return{
      dialogFormVisible: false
    },
    methods:{
      onSubmit(){
          //ajax发送成功的是响应的时候也需要要关闭弹出层
          this.dialogFormVisible = false
    }
  }
}
</script>

2.  @click="update"    点击这个放法执行

<el-button type="primary" size="small" @click="update">修改</el-button>

<el-dialog
        title="修改"
        :visible.sync="dialogFormEdit"
        :show-close="showClo">
        //这里需要回显的话千万别加@close="clear"
        //这个也是在methods中写的clear方法
    <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
</el-dialog>  

<script>
export default {
//如果这个是单独的组件,外部需要用的时候,在这里需要把他暴露出去
  name:"dialog",
data(){
    return{
      dialogFormEdit: false
    },
    methods:{
    //修改按钮
    update(){
    this.dialogFormEdit= true
      },
      //提交按钮
      edit(){
          //ajax发送成功的是响应的时候也需要要关闭弹出层
          this.dialogFormEdit= false
    },
    //点击取消需要关闭
    cancel(){
      this.dialogFormEdit= false
    }
  }
}
</script>