1:需要在组件中引入改组件

<script>
import { urlPath } from "@/libs/util";
import { getUserInfo } from "@/libs/util";
import expandRow from "../modal/expandRow.vue";
import { Modal, Message, AnchorLink } from "iview";
import viewerExtend from "@/components/viewerExtend/viewerExtend.vue";

2:根据项目需要在modal中配置不同的参数

    <Modal
      loading
      v-model="auditModalShow"
      footer-hide
      class="auditModal"
      title="学员详情"
      width="90%"
      scrollable
      fullscreen
      mask-closable
    >
      <audit
        :str="modalId"
        :rowId="rowId"
        :auditPath="auditPath"
        v-on:cancel="auditModalShow=false"
        v-on:success="auditSuccess"
      ></audit>
    </Modal>

3: v-on:cancel 和 v-on:success是方法 v-on:success=“auditSuccess” auditSuccess是函数,需要定义

    //这里接受子组件传来的值
    auditSuccess(data) {
      if (data.code == 40000) {
        Message.success("保存成功!");
        this.auditModalShow = true;
        this.reload();
      } else {
        Message.error(data.msg);
      }
    },

4:子组件通过$emit的方法向父组件传值

   onDtlsSave() {
      let params = {
        id: this.rowId,
        audit_status: this.dtlsObj.audit_status,
        audit_notes: this.dtlsObj.audit_notes
      };
      Modal.confirm({
        title: "提示信息",
        content: "确认提交?",
        onOk: () => {
          this.$refs["formValidate"].validate(valid => {
            if (valid) {
              this.postRequest(
                this.QKPX_API_HOST,
                "leave_apply/leave_audit",
                params
              ).then(res => {
                //向度组件传值父组件通过success接收
                let data = res.data;
                this.$emit("success", data);
              });
            }
          });

5:这样就完成了

Logo

前往低代码交流专区

更多推荐