//html代码:
 //按钮
 <el-button type="primary" size="medium" @click="addEquipment">新增</el-button>
  <el-button type="text" size="medium" @click="handelEdit(scope.$index, scope.row)">编辑</el-button>
  
  //弹框
 <el-dialog
:title="titleMap[dialogStatus]"
:visible.sync="dialogFormVisible" >
<el-form :model="form">
<el-form-item label="major" >
<el-input v-model="form.major" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="minior" >
<el-input v-model="form.minior" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="mac">
<el-input v-model="form.mac" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="出场时间">
<div class="block" style="margin-top:40px">
<el-date-picker
v-model="form.date"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>

//javascirpt:

 <script>
export default {
data() {
return{
dialogFormVisible:false,
form:{
major:"",
minior:"",
mac:"",
date:""
},
//新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
titleMap: {
addEquipment:'新增设备',
editEquipment: "编辑设备"
},
//新增和编辑弹框标题
dialogStatus: "",
},
method:{
//新增
addEquipment() {
//显示弹框
this.dialogFormVisible = true;
//新增弹框标题
this.dialogStatus = "addEquipment";
},
//编辑
handelEdit() {
//显示弹框
this.dialogFormVisible = true;
//编辑弹框标题
this.dialogStatus = "editEquipent"
},
}
}
</script>

vue+elementui 新增和编辑如何实现共用一个弹框的更多相关文章

  1. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  2. vue封装一个弹框组件

    这是一个提示框和对话框,例:   这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...

  3. vue+element-ui实现表格编辑(增加或删除行,删除单行或删除多行)

    <template> <div class="app-container"> <div class="filter-container&qu ...

  4. vue element 新增、编辑类Dialog公用函数

    调用 <el-button type="primary" class="my-button" size="small" :loadin ...

  5. vue的通讯与传递props emit (简单的弹框组件)

    props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...

  6. vue.js 利用组件之间通讯,写一个弹出框例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue规格新增一对多的例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  9. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

随机推荐

  1. ZJOI2018酱油记

    ZJOI2018酱油记 前言 作为\(HN\)高一蒟蒻选手,毕竟去了趟\(ZJOI\)玩泥巴 不写点游记还是不太好吧. 今天来补一补. Day0 星期天,中午,我们一群人滚到了学校门口 然后集合,滚去 ...

  2. HIGH-SPEED PACKET PROCESSING USING RECONFIGURABLE COMPUTING

    摘要 本文介绍了一种新的工具链,它将一门称为 PX 的专门用于包处理的编程语言运用到基于 FPGA 技术的高性能可重构计算架构(HIGH-PERFORMANCE RECONFIGURABLECOMPU ...

  3. 【IOI 2018】Werewolf 狼人

    虽然作为IOI的Day1T3,但其实不是一道很难的题,或者说这道题其实比较套路吧. 接下来讲解一下这个题的做法: 如果你做过NOI 2018的Day1T1,并且看懂了题面,那你很快就会联想到这道题,因 ...

  4. 为smokeping添加日志开启debug

    用包管理工具安装smokeping没有自带日志输出,为了定位问题开启日志就成为第一需求. 1.修改smokeping的配置 # vim /etc/smokeping/config.d/General ...

  5. Java虚拟机加载类

    Java虚拟机是如何加载Java类的 Java虚拟机加载Java类总共需要经过3步:加载-----链接-----初始化.Java语言的类型可以分为两大类:基本类型和引用类型.基本类型是有Java虚拟机 ...

  6. POI操作word和html相互转化

    下面是里两个类:第一个类是html转为word,第二个是word转html(最下面附上jar包下载链接) package com.wz.poi.wordHtml; /** * 2018/4/24 * ...

  7. Java ConcurrentModificationException 异常分析与解决方案

    Java ConcurrentModificationException 异常分析与解决方案http://www.2cto.com/kf/201403/286536.html java.util.Co ...

  8. 学些goosman-lei的博客感触

    在进行程序员职业规划标题搜索的时候,csdn推荐了<专访雷果国:从1.5K到18K 一个程序员的5年成长之路>感触颇深链接:https://www.csdn.net/article/201 ...

  9. 在Ubuntu16.04上安装virtualbox后无法装载vboxdrv模块

    首先按照:http://blog.csdn.net/ipsecvpn/article/details/52175279 这个网址上的教程安装, 安装完成后报错:大体意思就是vboxdrv没有被内核装载 ...

  10. mysql 对应 binlog 查看

    什么是 binlog binlog,即二进制日志,它记录了数据库上的所有改变. 改变数据库的SQL语句执行结束时,将在binlog的末尾写入一条记录,同时通知语句解析器,语句执行完毕. binlog格 ...