电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue項目結合Vue-layer實現彈框式編輯功能(實例代碼)

瀏覽:104日期:2023-02-01 11:49:03

1. 實現效果

Vue項目結合Vue-layer實現彈框式編輯功能(實例代碼)

2.實現原理

在父組件中點擊編輯按鈕,將當前點擊對象的id傳給子組件,子組件根據id修改相應的內容

父組件中代碼:

//放置編輯按鈕的位置<button type='button' 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 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 >權限</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:{ //用來顯示對應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彈框式編輯內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 卧涛科技有限公司科技项目申报公司|高新技术企业申报|专利申请 | 新车测评网_网罗汽车评测资讯_汽车评测门户报道 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 电机保护器-电动机综合保护器-浙江开民 | 广州办公室设计,办公室装修,写字楼设计,办公室装修公司_德科 | 企业微信scrm管理系统_客户关系管理平台_私域流量运营工具_CRM、ERP、OA软件-腾辉网络 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 家庭教育吧-在线家庭教育平台,专注青少年家庭教育 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 电动葫芦-河北悍象起重机械有限公司 | 缝纫客| 陕西视频监控,智能安防监控,安防系统-西安鑫安5A安防工程公司 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | 乙炔气体报警装置|固定式氯化氢检测仪|河南驰诚电气百科 | 钢托盘,铁托盘,钢制托盘,镀锌托盘,饲料托盘,钢托盘制造商-南京飞天金属13260753852 | 泰兴市热钻机械有限公司-热熔钻孔机-数控热熔钻-热熔钻孔攻牙一体机 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 | 喷播机厂家_二手喷播机租赁_水泥浆洒布机-河南青山绿水机电设备有限公司 | 除尘器布袋骨架,除尘器滤袋,除尘器骨架,电磁脉冲阀膜片,卸灰阀,螺旋输送机-泊头市天润环保机械设备有限公司 | 螺纹三通快插接头-弯通快插接头-宁波舜驰气动科技有限公司 | 苏州伊诺尔拆除公司_专业酒店厂房拆除_商场学校拆除_办公楼房屋拆除_家工装拆除拆旧 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 中央空调温控器_风机盘管温控器_智能_液晶_三速开关面板-中央空调温控器厂家 | 陕西华春网络科技股份有限公司| 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 无味渗透剂,泡沫抑尘剂,烷基糖苷-威海威能化工有限公司 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 硅PU球场、篮球场地面施工「水性、环保、弹性」硅PU材料生产厂家-广东中星体育公司 | 电销卡 防封电销卡 不封号电销卡 电话销售卡 白名单电销卡 电销系统 外呼系统 | 凝胶成像仪,化学发光凝胶成像系统,凝胶成像分析系统-上海培清科技有限公司 | 寮步纸箱厂_东莞纸箱厂 _东莞纸箱加工厂-东莞市寮步恒辉纸制品厂 |