Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
195 浏览量
2020-10-15
13:05:09
上传
评论
收藏 63KB PDF 举报
Vue项目结合项目结合Vue-layer实现弹框式编辑功能实现弹框式编辑功能(实例代码实例代码)
主要介绍了Vue项目中结合Vue-layer实现弹框式编辑功能,本文通过实例代码给大家介绍的非常详细，对大家的
学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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"></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">
资源评论
Nedl002
- 粉丝: 148
- 资源: 949
最新资源
- 基础算法-python爬楼梯问题
- 某音Web端参数X-Bogus获取算法（逆向分析）
- 头歌答案 C语言程序设计实践 实验二 数据类型与基本操作（1）
- java高校实习生管理系统设计和实现springboot+vue毕业设计源码+数据库mysql代码.rar
- springboot+vue.js辽B代驾管理系统java毕业设计源码+数据库代码.rar
- OceanBase OBCA初级考试认证资料
- java可信捐赠管理系统的设计与开发springboot+vue毕业设计源码+数据库代码.rar
- vue基于Springboot的网上宠物店系统的设计与实现java毕业设计源码+数据库代码.rar
- OceanBase OBCA 部分题目
- vue基于springboot的七彩云南文化旅游网站的设计与实现java毕业设计源码代码+数据库.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
