1. 實現(xiàn)效果

2.實現(xiàn)原理

在父組件中點擊編輯按鈕，將當前點擊對象的id傳給子組件，子組件根據(jù)id修改相應(yīng)的內(nèi)容

父組件中代碼：

//放置編輯按鈕的位置<button type='button' v-on:click='edit(manage.id)'><i class='layui-icon'>&#xe642;</i>編輯</button>// 在methods中設(shè)計edit()方法//需要先引入編輯組件import EditManage from ’./EditManage’ edit(id){ this.$layer.iframe({ type:2, title:'編輯', area:[’600px’,’450px’], shade:true, offset:’auto’, content:{ content:EditManage,//傳遞的編輯組件主線 parent:this, data:{ info:{id:id}// 傳遞的要編輯內(nèi)容的id值 } } }) },

子組件EditManage代碼

<template> <div class='editmanage container'> <form v-on:submit='editManage'> <div class='form-group'> <label>賬號</label> <input type='text' required placeholder='賬號' autocomplete='off' v-model='manage.account'> </div> <div class='form-group'> <label>用戶名</label> <input type='text' required placeholder='用戶名' autocomplete='off' v-model='manage.username'> </div> <div class='form-group'> <label >密碼</label> <input type='password' required placeholder='密碼' autocomplete='off' v-model='manage.password'> </div> <div class='form-group'> <label >權(quán)限</label> <select name='authority' v-model='manage.authority'> <option value='超級管理員' >超級管理員</option> <option value='普通管理員' >普通管理員</option> </select> </div> <button type='submit' class='btn btn-info'>立即提交</button> </form> </div></template><script> export default { name: ’addmanage’, data () { return { manage:{}, form:{} } }, props:{ //接收父組件傳來的id值 info:{ type:Object, default:()=>{ return {} } }, layerid:{ type:String, default:'' }, lydata:{ type:Object, default:()=>{ return {} } } }, methods:{ //用來顯示對應(yīng)id的編輯內(nèi)容，在created中調(diào)用 fetchManage(id){ this.$http.get(’http://localhost:3000/manage/’+id) .then(function (response) { this.manage=response.body; }) }, editManage(e){ if(!this.manage.account||!this.manage.username||!this.manage.password||!this.manage.authority){ this.$layer.msg('請?zhí)砑訉?yīng)信息！') }else{ let updateManage={ account:this.manage.account, username:this.manage.username, password:this.manage.password, authority:this.manage.authority }; this.$http.put('http://localhost:3000/manage/'+this.info.id,updateManage) .then(function (response) { //關(guān)閉父組件中的編輯彈框 this.$layer.close(this.layerid); //彈出提示信息，默認時間為3秒 this.$layer.msg('修改管理員信息成功！'); }); e.preventDefault() } e.preventDefault() } }, created(){ // this.info.id父組件傳給子組件的id值 this.fetchManage(this.info.id); } }</script><style scoped> .editmanage{ margin:8px 20px 20px 20px; }</style>

到此這篇關(guān)于Vue項目結(jié)合Vue-layer實現(xiàn)彈框式編輯功能(實例代碼)的文章就介紹到這了,更多相關(guān)Vue彈框式編輯內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！