elementui子组件表单对话框和父组件表格数据实战交互

工作业务：

父组件表格显示，新增编辑按钮弹出子组件对话框进行数据操作

 

<template>
  <div :class="$style.warpper">
    <el-form
      :inline="true"
      :model="queryParams"
      label-position="left"
      label-width="68px"
      class="demo-form-inline"
    >
      <el-form-item label="单位">
        <el-input
          v-model="queryParams.deptName"
          clearable
          placeholder="请输入单位"
        ></el-input>
      </el-form-item>
      <el-form-item label="月份">
        <el-date-picker
          v-model="queryParams.date"
          type="monthrange"
          range-separator="至"
          format="yyyy-MM"
          value-format="yyyy-MM"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData()">查询</el-button>
        <el-button type="primary" @click="addClick()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="dataSource"
      :height="'calc(100vh - 184px)'"
      border
      style="overflow: auto"
    >
      <el-table-column prop="deptName" label="单位" align="center">
      </el-table-column>
      <el-table-column prop="costDate" label="年月" align="center">
      </el-table-column>
      <el-table-column
        prop="planPowerCost"
        label="动力费（计划）"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="powerCost" label="动力费（实际）" align="center">
      </el-table-column&g