//html代碼：
　//按鈕
　<el-button type="primary" size="medium" @click="addEquipment">新增</el-button>

 1 <el-dialog 
 2     :title="titleMap[dialogStatus]"
 3     :visible.sync="dialogFormVisible"
 
 >
 4         <el-form :model="form">
 5             <el-form-item label="major" >
 6             <el-input v-model="form.major" auto-complete="off"></el-input>
 7             </el-form-item>
 8             <el-form-item label="minior" >
 9                 <el-input 
 
v-model="form.minior" auto-complete="off"></el-input>
10             </el-form-item>
11             <el-form-item label="mac">
12                 <el-input v-model="form.mac" auto-complete="off"></el-input>
13             </el-form-item>
14             <el-form-item 
 
label="出場時間">
15                   <div class="block" style="margin-top:40px">
16                     <el-date-picker
17                     v-model="form.date"
18                     type="date"
19                     placeholder="選擇日期">
20                     </el-date-picker>
21                 </div>
22             </el-form-item>
23         </el-form>
24         <div slot="footer" class="dialog-footer">
25             <el-button @click="dialogFormVisible = false">取 消</el-button>
26             <el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
27         </div>
28 </el-dialog>

//javascirpt：

 1 <script>
 2 export default {
 3     data() {
 4         return{
 5                 dialogFormVisible:false,
 6                 form:{
 7                     major:"",
 8                     minior:"",
 9                     mac:"",
10                     date:""
11                 },
12                 //新增or編輯彈框標題(根據點擊的新增or編輯按鈕顯示不同的標題)
13                 titleMap: {
14                     addEquipment:‘新增設備‘,
15                     editEquipment: "編輯設備"
16                 },
17                 //新增和編輯彈框標題
18                 dialogStatus: "",
19     },
20     method:{
21             //新增
22             addEquipment() {
23                 //顯示彈框
24                 this.dialogFormVisible = true;
25                 //新增彈框標題
26                 this.dialogStatus = "addEquipment";
27             },
28             //編輯
29             handelEdit() {
30                 //顯示彈框
31                 this.dialogFormVisible = true;
32                 //編輯彈框標題
33                 this.dialogStatus = "editEquipent"
34             },
35     }
36 }
37 </script>       

vue+elementui 新增和編輯如何實現公用一個彈框