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