Vue+elementUI弹出框的使用(demo代码详细分析)

hello你好我是辰兮很高兴能来阅读,本篇整理一下Vue+elementUI的弹出框相关用法,留给自己,也分享给初学者,一起进步!

Vue+elementUI表格组件使用请参考:Vue+elementUI表格组件使用


本篇是Vue+elementUI的弹框使用案例前端代码解析

因为开始写Vue项目很容易遇到弹出异常弹出,前期老是有的弹出无法正常关闭。

后来了解后就是一个Vue中子传父,父传子的问题

Vue+elementUI弹出框的使用(demo代码详细分析)

首先了解弹出框的显示 :visible.sync这个

Vue+elementUI弹出框的使用(demo代码详细分析)

在主页面导入相关要弹出的弹窗,并绑定相关的值和方法(根据自己的需要)

<template>
<el-container style="margin: 0px">
...........................
<system-add :dialogFormVisibleAdd="dialogFormVisibleAdd" :addForm="addForm" @addDialogClose="addDialogClose" @refresh="refresh"></system-add>

<!--编辑弹出框-->
<system-edit :dialog-form-visible-edit="dialogFormVisibleEdit" :editForm="editForm" @refresh="refresh" @editDialogClose="editDialogClose"></system-edit>

<!-- 版本升级-->
<system-up-version ref="upVersion" :dialogFormVisibleUpdate="dialogFormVisibleUpdate" :up-version="upVersion" @upDialogClose="upDialogClose" @refresh="refresh"></system-up-version>

<!--系统删除-->
<SystemDelete :dialogDelete="dialogDelete" :sSysCode="sSysCode" @deleteDialogClose="deleteDialogClose" @refresh="refresh"></SystemDelete>
</el-container>
</template>

主页面一定要导入这些弹框组件 检查清楚,然后将弹出状态设置为false
Vue+elementUI弹出框的使用(demo代码详细分析)

方法当我们点击相关按钮的时候我们要将弹出框的显示状态设置为true,这样弹出框即可弹出

Vue+elementUI弹出框的使用(demo代码详细分析)

1.如添加按钮 弹出框设置为true

2.如编辑按钮要将这一行要编辑的数据带出

所以要 this.editForm = Object.assign({}, row); 将这一行的数据赋值给某一个对象,其实row本身就代表这一行的对象参考如下3

3.移除按钮 要传某一个code 所以将这一行对象的code赋值给绑定在这个弹框上的数据 等等…

row.sSysCode就代表当前行对象的某一个属性,你要什么属性就自己点出来

Vue+elementUI弹出框的使用(demo代码详细分析)

父传子,用props组件接受 如下接受来自父组件的dialogFormVisibleAdd参数,如上我们点击添加按钮后将这个参数设置为了true,所以弹框父组件传来true弹框动态绑定,显示为true 弹框打开
Vue+elementUI弹出框的使用(demo代码详细分析)
子传父this.$emit(‘addDialogClose’);
Vue+elementUI弹出框的使用(demo代码详细分析)

父组件上面绑定了这个方法 就会自动调用执行这个方法 首先添加了页面会自动刷新一下最新的列表 然后将弹出框的状态设置为关闭 这样一个完整的流程就做好了

            <system-add :dialogFormVisibleAdd="dialogFormVisibleAdd" :addForm="addForm" @addDialogClose="addDialogClose" @refresh="refresh"></system-add>

Vue+elementUI弹出框的使用(demo代码详细分析)

   //自己定义的一个刷新页面的方法
refresh() {
this.getSystemList();
}

像增删改这样的操作页面是肯定要实现同步刷新的,简单的做一个调用方法即可实现。

总结:关于Vue+elementUI项目弹出框就是组件的使用,引用组件就是父传子,子传父等问题,好好练习和反思大家一起进步!


The best investment is to invest in yourself.

Vue+elementUI弹出框的使用(demo代码详细分析)

2020.09.17 愿你们奔赴在自己的热爱里!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue+elementUI弹出框的使用(demo代码详细分析)

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue+elementUI弹出框的使用(demo代码详细分析)
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏