父页面
父页面调用的子组件
<worktypeschedule
ref="personDetail">
</worktypeschedule>
父页面引入子组件
import worktypeschedule from './testschedule0.vue'
父页面定义参数传递类型
detailParams:{}
通过button按钮打开子页面
showdetail(row) {
console.log(row);
// 参数
this.detailparams = {
// 这里传递的是表格的两个列参数
earecode: row.earecode,
testdate: row.testdate
}
// 使用 $refs.personDetail 调用子页面的showDateschedule方法,
// 并把 detailparams 参数传与子页面
this.$refs.personDetail.showDateschedule(this.detailparams)
},
子页面
子页面()
<el-dialog
width="45%"
height=" 360px"
title="考试日程"
:visible.sync="detailInnerVisible"
append-to-body>
<el-table
ref="multipleTable"
:span-method="objectSpanMethod"
:data="paperlist"
style="width: 100%; margin-top: 20px"
:header-cell-style="headClass"
border
>
<el-table-column
type="index"
width="80"
label="序号"
align="center"
>
</el-table-column>
<el-table-column
prop="worktypename"
label="工种" show-overflow-tooltip
align="center"
>
</el-table-column>
<el-table-column
label="级别" show-overflow-tooltip
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.grade == 1">一级</span>
<span v-if="scope.row.grade == 2">二级</span>
<span v-if="scope.row.grade == 3">三级</span>
<span v-if="scope.row.grade == 4">四级</span>
<span v-if="scope.row.grade == 5">五级</span>
</template>
</el-table-column>
<el-table-column
prop="percount"
label="人数" show-overflow-tooltip
align="center"
>
</el-table-column>
</el-table>
</el-dialog>
使用props,接收父页面传递的参数
props: { detailParams: Object },
绑定的 data 数据
detailInnerVisible:false,
canshu:{},
父页面传递的参数接收
// 父页面传递参数接收
showDateschedule(detailParams) {
console.log(detailParams);
this.detailInnerVisible = true
this.canshu = detailParams
console.log(this.canshu);
},