vue+elementui 新增和编辑如何实现公用一个弹框

Posted 2020-11-17 静享华年

//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>

　　

　　//弹框

 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>