免费小程序生成_Vue项目结合Vue

2021-01-05 15:29

Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)       这篇文章主要介绍了Vue项目中结合Vue-layer实现弹框式编辑功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1. 实现效果

2.实现原理

在父组件中点击编辑按钮，将当前点击对象的id传给子组件，子组件根据id修改相应的内容

父组件中代码：

//放置编辑按钮的位置
 button type="button" v-on:click="edit(manage.id)" i #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 
 form v-on:submit="editManage" 
 div 
 label 账号 /label 
 input type="text" required placeholder="账号" plete="off" v-model="manage.account" 
 /div 
 div 
 label 用户名 /label 
 input type="text" required placeholder="用户名" plete="off" v-model="manage.username" 
 /div 
 div 
 label 密码 /label 
 input type="password" required placeholder="密码" plete="off" v-model="manage.password" 
 /div 
 div 
 label 权限 /label 
 select name="authority" v-model="manage.authority" 
 option value="超级管理员" 超级管理员 /option 
 option value="普通管理员" 普通管理员 /option 
 /select 
 /div 
 button type="submit" 立即提交 /button 
 /form 
 /div 
 /template 
 script 
 export default {
 name: 'addmanage',
 data () {
 return {
 manage:{},
 form:{}
 pro凡科抠图:{
 //接收父组件传来的id值
 info:{
 type:Object,
 default:()= {
 return {}
 layerid:{
 type:String,
 default:""
 lydata:{
 type:Object,
 default:()= {
 return {}
 methods:{
 //用来显示对应id的编辑内容，在created中调用
 fetchManage(id){
 this.$http.get('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("manage/"+.id,updateManage)
 .then(function (response) {
 //关闭父组件中的编辑弹框
 this.$layer.close(this.layerid);
 //弹出提示信息，默认时间为3秒
 this.$layer.msg("修改管理员信息成功！");

到此这篇关于Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)的文章就介绍到这了,更多相关Vue弹框式编辑内容请搜索凡科以前的文章或继续浏览下面的