VueJs中的el-dialog的坑[1]
2019-03-12 本文已影响0人
无拘无束的思想家
- VueJs中的el-dialog的坑[1]
- 需要实现的功能
- 1.直接从页面A到页面C
- 2.从页面A到页面B
- 3.再从页面B跳转到页面C
需要实现的功能
假设有三个页面A,B和页面C，我们有这样一个需求，可以从页面A直接带参数传给页面C，还需满足一定条件，先从A传到B，然后再从B到C（这里的B和C都是对话框，并且弹出C时，需要将B给隐藏掉）
页面A的名字叫：con_apply_tz.vue
页面B的名字叫：con_apply_ywht.vue
页面C的名字叫：con_tree.vue
1.直接从页面A到页面C
就直接通过 Vue 的父子传参的方式，没有什么可以说的：
页面A：
<template>
<div>
<csc-single-table
:pageDef="pageDef"
:entity="entity"
@view="view"
@create="create"
@disab="disab"
@update="update"
@pageQuery="doPageQuery"
@doEdit="doEdit"
@doDelete="doDelete"
:disableQueryForm="disableQueryForm"
:disableRowButtons="disableRowButtons" >
</csc-single-table>
<!--直接引入页面C-->
<conTree :paramsInfo="paramsInfo" v-if="paramsInfo.conTreeVisiable" ></conTree>
<!--引入页面B,其中页面B并不是一个对话框,这里需要注意的是openConTree这个回调函数调用的时机-->
<el-dialog
width="95%"
height="90%"
:visible.sync="paramsConApplyTz.isShowYWHT"
append-to-body
>
<conApplyYwht :paramsConApplyTz="paramsConApplyTz" @openConTree="openConTree"
v-if="paramsConApplyTz.isShowYWHT" >
</conApplyYwht>
</el-dialog>
</div>
</template>
页面A 的js代码
<script>
import CscSingleTable from '@/components/CscSingleTable/CscSingleTable'
import conTree from '@/views/csm/con_info/con_tree'
import conApplyYwht from '@/views/crt/con_apply/con_apply_ywht'
// 合同模块也是需要引入用户的，以后需要根据用户查询对应的合同（高级查询）
export default {
data() {
return {
paramsInfo:{//使用父子传参的方式传递参数，父组件向子组件传递多个参数
conTreeVisiable:false
},
paramsConApplyTz:{
isShowYWHT:false
},
//下面省略了一大部分的数据
xxxxxxxxxxxxxx
}
},
components: {
CscSingleTable,
conTree,
conApplyYwht
}, // 这个没有问题
methods: {
doPageQuery(listQuery) {
getApproveCons(listQuery).then(response => {
this.entity = response.data
this.$store.dispatch('setListLoading', false)
}).catch((error) => {
console.log(error)
})
},
// 行事件
doEdit(row) {
console.log('row ....')
},
view(row) {
console.log('view 合同...')
if(0==row.length){
alert("请选择一笔生效合同。")
return false
}
this.paramsInfo={
conTreeVisiable:true,
contractId:row.contractId,
contractType:'02',
proFlag:'-1'
}
},
create(row) {
console.log('create合同...'+JSON.stringify(row))
if(0==row.length){
alert("请选择一笔生效合同。")
return false
}
this.paramsConApplyTz={
isShowYWHT:true,
partyId:this.partyId, //注意，这个partyId是写死的
type:'02'
}
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
openConTree(param){
console.log("[openConTree] invoke..."+JSON.stringify(param))
this.paramsConApplyTz.isShowYWHT=false;
this.paramsInfo=param;
}
},
mounted() {
this.doPageQuery() // 这个方法是调用上面的方法从后台获取数据，会发送异步请求
}
}
</script>
页面C
定义一个 接受父页面传过来参数的属性对象 paramsInfo
这里需要注意的一点是必须要将props属性定义在components 之下
props:{
paramsInfo: {//接收父组件传递过来的参数
},
},
然后在页面上面调用
created() {
console.log("this.paramsInfo is "+JSON.stringify(this.paramsInfo))
this.dialogVisible = this.paramsInfo.conTreeVisiable
console.log("this.dialogVisible----------->"+this.paramsInfo.conTreeVisiable)
param=this.paramsInfo
console.log(JSON.stringify(param))
this.initData(param)
},
其中需要说明的事情是，页面C本身就是一个el-dialog对象，并且通过dialogVisible来控制页面C这个dialog显示与否
<template>
<!--pay_tree.jsp:分发加载菜单栏信息-->
<div class="conTree">
<el-button @click="open" type="primary">打开</el-button>
<el-dialog
:visible.sync="dialogVisible"
width="100%"
:fullscreen="fullScreen"
:before-close="handleGoodsDetailInfoClose">
页面的一些信息。。。。。。。
</el-dialog>
</div>
</template>
2.从页面A到页面B
页面B的核心代码:
<template>
<!--isShowYWHT这个用于判断是否显示 业务合同明细页面-->
<div v-show=isShowYWHT>
<csc-single-table
:pageDef="pageDef"
:entity="entity"
@create="create"
@pageQuery="doPageQuery"
@doDelete="doDelete"
:disableQueryForm="disableQueryForm"
:disableRowButtons="disableRowButtons"
>
</csc-single-table>
</div>
</template>
页面B的Js代码
props: {
paramsConApplyTz:{ //用于接受父组件页面A con_apply_tz.vue传来的参数
//con_apply_tz传递过来的参数放在这里
}
},
data() {
return {
paramsInfo:{//使用父子传参的方式传递参数，父组件向子组件传递多个参数
},
isShowYWHT:false,
}
},
created(){
let param =this.paramsConApplyTz
this.isShowYWHT=this.paramsConApplyTz.isShowYWHT //通过这行代码可以控制页面B的显示与否
console.log("页面跳转成功："+JSON.stringify(param))
},
3.再从页面B跳转到页面C
这里的步骤需要说明一下，是通过页面B，create(）这个方法被调用完成之后，通过页面A上的回调函数openConTree（），这个函数做了两件事：
1.将页面B给关闭，通过将isShowYWHT 这个值设置为false可以做到。
2.将参数传给页面C，参数param中包含了页面C中是否控制显示的变量 conTreeVisiable,通过将这个变量设置为true,既能够实现页面跳转，同时也可以将 参数传递给子页面C
页面A上的回调函数：
openConTree(param){
console.log("[openConTree] invoke..."+JSON.stringify(param))
this.paramsConApplyTz.isShowYWHT=false;
this.paramsInfo=param;
}
页面B的相关业务逻辑
create(row) {
createConInfo(row).then(response1 => {
let res = response1.data
if(res.msg!=''&&res.msg!=null){
alert(res.msg)
return false
}
console.log("con_tree visiable "+JSON.stringify(this.paramsConApplyTz))
this.paramsInfo={
conTreeVisiable:true,
contractId:res.conInfo.contractId,
contractType:'02',
amountDetailId:row.amountDetailId,
proFlag:'1',
processInstId:res.processInstId
}
console.log("con_tree visiable2 "+JSON.stringify(this.paramsInfo))
console.log("创建完成，调用父页面中的回调函数openConTree....")
this.$emit('openConTree',this.paramsInfo);
}).catch((error) => {
console.log(error)
})
},
原文：https://blog.csdn.net/u014028392/article/details/88424347
