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

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

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

瀏覽:105日期: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
相關文章:
主站蜘蛛池模板: 淘趣英语网 - 在线英语学习,零基础英语学习网站 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 泡沫消防车_水罐消防车_湖北江南专用特种汽车有限公司 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 国际船舶网 - 船厂、船舶、造船、船舶设备、航运及海洋工程等相关行业综合信息平台 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 - 杭州标识标牌|文化墙|展厅|导视|户内外广告|发光字|灯箱|铭阳制作公司 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 纳米二氧化硅,白炭黑,阴离子乳化剂-臻丽拾科技 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | 我爱古诗词_古诗词名句赏析学习平台 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 冰晶石|碱性嫩黄闪蒸干燥机-有机垃圾烘干设备-草酸钙盘式干燥机-常州市宝康干燥 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 深圳标识制作公司-标识标牌厂家-深圳广告标识制作-玟璟广告-深圳市玟璟广告有限公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 淘趣英语网 - 在线英语学习,零基础英语学习网站 | 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 特种阀门-调节阀门-高温熔盐阀-镍合金截止阀-钛阀门-高温阀门-高性能蝶阀-蒙乃尔合金阀门-福建捷斯特阀门制造有限公司 | 商用绞肉机-熟肉切片机-冻肉切丁机-猪肉开条机 - 广州市正盈机械设备有限公司 | 浙江红酒库-冰雕库-气调库-茶叶库安装-医药疫苗冷库-食品物流恒温恒湿车间-杭州领顺实业有限公司 | 山东led显示屏,山东led全彩显示屏,山东LED小间距屏,临沂全彩电子屏-山东亚泰视讯传媒有限公司 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 派财经_聚焦数字经济内容服务平台| 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 国资灵活用工平台_全国灵活用工平台前十名-灵活用工结算小帮手 | 电机保护器-电动机综合保护器-浙江开民| 液氮罐(生物液氮罐)百科-无锡爱思科 | 不发火防静电金属骨料_无机磨石_水泥自流平_修补砂浆厂家「圣威特」 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 | 沈飞防静电地板__机房地板-深圳市沈飞防静电设备有限公司 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 首页-瓜尔胶系列-化工单体系列-油田压裂助剂-瓜尔胶厂家-山东广浦生物科技有限公司 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 |