1.实现效果

2 .添加功能实现原理

点击添加按钮出现添加弹框，添加页面和功能操作封装在添加组件中，添加完成之后，添加弹框关闭，并出现“添加成功”的提示信息。

父组件中的代码：

//放置添加按钮的位置
  <button  type="button" class="layui-btn" v-on:click="add()">
          添加管理员</button>
     

methods中的add()方法

注意：需要引入添加组件：

import AddManage from ‘./AddManages’

 add(){
        this.flag=true;
        if(this.flag){
       this.$layer.iframe({
           type:2,
           title:"添加",
           area:['600px','450px'],
           shade:true,
           offset:'auto',
           content:{
              content:AddManage,//传递的组件主线
              parent:this,
              data:{
              }
            }
          })

        }
      },

子组件AddManages中的代码

<template>
  <div class="addmanage container">
    <form  class="form" v-on:submit="addManage">
      <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中存储父组件中默认传过来的layerid和lydata值，用于在子组件中关闭父组件的弹框
    props:{
      layerid:{
          type:String,
        default:""
      },
      lydata:{
          type:Object,
        default:()=>{
          return {};
        }
      }
    },
    methods:{
    // 添加功能函数
      addManage(e){
 if(!this.manage.account||!this.manage.username||!this.manage.password||!this.manage.authority){
          this.$layer.msg("请添加对应信息！")
        }else{
            let newManage={
              account:this.manage.account,
              username:this.manage.username,
              password:this.manage.password,
              authority:this.manage.authority
            };
            this.$http.post("http://localhost:3000/manage",newManage)
              .then(function (response) {
                this.$layer.close(this.layerid);
                this.$layer.msg("添加管理员成功！");


              });
          e.preventDefault()
        }
    e.preventDefault()
      }
    },
   
  }
</script>


<style scoped>
.addmanage{
  margin:8px 20px 20px 20px;
}
</style>