1. 實現效果

2.實現原理

在父元件中點選編輯按鈕，將當前點選物件的id傳給子元件，子元件根據id修改相應的內容

父元件中程式碼：

//放置編輯按鈕的位置
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon">&#xe642;</i>編輯</button>
// 在methods中設計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}// 傳遞的要編輯內容的id值
      }
     }
    })
   },

子元件EditManage程式碼

<template>
 <div class="editmanage container">
  <form class="form" v-on:submit="editManage">
   <div class="form-group">
    <label>賬號</label>
    <input type="text" required placeholder="賬號" autocomplete="off" class="form-control" v-model="manage.account">
   </div>
   <div class="form-group">
    <label>使用者名稱</label>
    <input type="text" required placeholder="使用者名稱" autocomplete="off" class="form-control" v-model="manage.username">
   </div>
   <div class="form-group">
    <label >密碼</label>
    <input type="password" required placeholder="密碼" autocomplete="off" class="form-control" v-model="manage.password">
   </div>

   <div class="form-group">
    <label >許可權</label>
    <select name="authority" class="form-control" 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:{
  //用來顯示對應id的編輯內容，在created中呼叫
   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("請新增對應資訊！")
    }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) {
      //關閉父元件中的編輯彈框
       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>

到此這篇關於Vue專案結合Vue-layer實現彈框式編輯功能(例項程式碼)的文章就介紹到這了,更多相關Vue彈框式編輯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！