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

Posted 静享华年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+elementui 新增和编辑如何实现公用一个弹框相关的知识,希望对你有一定的参考价值。

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

 

以上是关于vue+elementui 新增和编辑如何实现公用一个弹框的主要内容,如果未能解决你的问题,请参考以下文章

vue+elementUi开发一个可拖拽的和拉伸编辑的画板

vue+elementUi+table实现单元格可输入功能StringsliceTimeFullYearMonthDateHoursMinutesSeconds

vue+elementUi+table实现单元格可输入功能StringsliceTimeFullYearMonthDateHoursMinutesSeconds

element-ui 表单编辑之后再新增表单数据无法清空问题(已解决)

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

vue+elementui表格中的字段实现编辑保存