dialog 弹框传参问题

vue使用 dialog 弹框传参问题

父页面

父页面调用的子组件

	<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);
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值