版权声明:本文为博主原创文章,未经博主允许不得转载。博主地址:http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/81156792
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81156792
博主地址是:http://blog.csdn.net/freewebsys
1,问题
使用弹出窗口,只是进行显示和隐藏功能。
每次再创建新窗口的时候会保存上次的校验信息。
但是vue 是按照组件方式显示的,再新创建按钮的时候是不能访问dialog组件的。
2,通过before-close 事件解决
编写:
<el-dialog title="用户编辑" :visible.sync="dialogVisible" :before-close="closeDialogFunc">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form label-width="100px" :model="dataForm" :rules="dataFormRules" ref="dataForm">
<el-form-item label="用户名" prop="userName"><el-input v-model="dataForm.userName" placeholder="类型"/></el-form-item>
<el-form-item label="密码" prop="password"><el-input v-model="dataForm.password" placeholder="类型"/></el-form-item>
<el-form-item label="昵称" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
<el-form-item label="角色" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
<el-form-item label="状态" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
<el-form-item label="类型" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialogFunc">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>
.....
关闭事件可以访问到 dataForm 组件,【新建】按钮不行
methods: {
closeDialogFunc: function(){
this.$refs['dataForm'].resetFields()
this.dialogVisible = false
},
....
更多dailog窗口的参数参考官方文档:
http://element-cn.eleme.io/#/zh-CN/component/dialog
3,总结
vue 使用的是组件化开发,遇到一个问题,每个组件里面的东西不能互相访问。
虽然是再一个页面里面的,但是发现,【新建】按钮是访问不了 dailog的属性的。
用了 this.$refs[‘dataForm’] 也是返回 空,只能再dailog里面使用:before-close 的事件处理了。但也是解决了,再有问题就需要组件间相互通讯了。
https://cn.vuejs.org/v2/guide/components.html
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81156792