vue + elementui 通过父子组件实现弹框

最新推荐文章于 2024-06-17 10:08:09 发布

weixin_46370867

最新推荐文章于 2024-06-17 10:08:09 发布

阅读量1.6k

点赞数

分类专栏： element Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/115731764

版权

Vue 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

element

7 篇文章 1 订阅

订阅专栏

在子组件中编写弹窗，在父组件中引用弹窗

文章目录

编写子组件

效果图：
在这里插入图片描述
代码：

<template>
  <ModalComponent
    name="import-set"
    title="设置"
    size="85%"
    width="250px"
    @opened="handleOpenModal"
    @close="handleCloseMOdal"
  >
    <div class="cont">
      <!-- 弹框 -->
      <div class="father">
        <span>学院</span>
        <el-switch
          v-model="gridData.college"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>

      <div class="father">
        <span>系</span>
        <el-switch v-model="gridData.xi" @click="handleClick()" class="child">
        </el-switch>
      </div>

      <div class="father">
        <span>年级</span>
        <el-switch
          v-model="gridData.grade"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>

      <div class="father">
        <span>行政班级</span>
        <el-switch
          v-model="gridData.class"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>
    </div>
  </ModalComponent>
</template>

<script>
import ModalComponent from "@/components/modal/index";
export default {
  data() {
    return {
      // 设置
      gridData: {
        college: true,
        xi: true,
        grade: true,
        class: true,
      },
    };
  },
  methods: {
    // 打开弹窗
    // 传参数e，为了写子节点之类的
    handleOpenModal(e) {
      console.log(e);
    },
    // 关闭弹窗
    // 关联
    handleCloseMOdal() {
      // this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）
      // gridData是需要传递的参数
      this.$emit("change", this.gridData);
    },
    // 开关
    handleClick() {},
  },
  components: {
    ModalComponent,
  },
};
</script>

<style lang="scss" scoped>
.cont {
  width: 200px;
  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid $--color-border;
    padding: $grid 0;
    .child {
      margin-left: auto;
      margin-top: $grid;
    }
  }
}
</style>

编写父组件

效果：
在这里插入图片描述
自组件弹窗中的开关可以控制父组件中下拉选项和表格内容的显示与隐藏
比如：
弹框：

父组件：

把学院关掉，就不会显示学院的内容了

把子组件的弹窗引入到父组件中

引入子组件

import ImportSet from "./modal/set";

方法

methods: {
    // 设置
    handleSet() {
    // import-set 是子组件的name属性值
      this.$change.openModal("import-set");
    },
},

注册子组件

components: {
    // 设置
    ImportSet,
  },

使用子组件

 <!-- 设置 -->
 <!-- @change="handleSetChange" 用change与子组件的值关联起来 -->
<ImportSet @change="handleSetChange"></ImportSet>

通过$emit把子组件的值传入到父组件中

通过handleCloseMOdal方法把子组件的值传入到父组件中

handleCloseMOdal() {
      // this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）
      // gridData是需要传递的参数
      this.$emit("change", this.gridData);
    },

父组件接收子组件传来的值

父组件会通过handleSetChange方法接收接收子组件传来的值
定义接收的方法

<ImportSet @change="handleSetChange"></ImportSet>

编写handleSetChange方法

// 关联设置弹窗
    // 形参e的实参是 子组件中handleCloseMOdal传的参数 this.$emit("change", this.gridData) 中的 this.gridData
    handleSetChange(e) {
      // this.gridData 父组件的gridData
      // 把子组件的 this.gridData 传递给父组件的 this.gridData
      this.gridData = e;
      console.log("父组件的gridData");
      console.log(this.gridData);
    },

通过v-if条件确定数据的显示与隐藏

<el-dropdown v-if="gridData.college">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            学院<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>大学1</el-dropdown-item>
            <el-dropdown-item>大学2</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.xi">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            系<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>软件技术</el-dropdown-item>
            <el-dropdown-item>数字媒体</el-dropdown-item>
            <el-dropdown-item>语文系</el-dropdown-item>
            <el-dropdown-item>数学系</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.grade">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            年级<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>19级</el-dropdown-item>
            <el-dropdown-item>18级</el-dropdown-item>
            <el-dropdown-item>17级</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.class">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            行政班<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>一班</el-dropdown-item>
            <el-dropdown-item>二班</el-dropdown-item>
            <el-dropdown-item>三班</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

整体代码参考

子组件

<template>
  <ModalComponent
    name="import-set"
    title="设置"
    size="85%"
    width="250px"
    @opened="handleOpenModal"
    @close="handleCloseMOdal"
  >
    <div class="cont">
      <!-- 弹框 -->
      <div class="father">
        <span>学院</span>
        <el-switch
          v-model="gridData.college"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>

      <div class="father">
        <span>系</span>
        <el-switch v-model="gridData.xi" @click="handleClick()" class="child">
        </el-switch>
      </div>

      <div class="father">
        <span>年级</span>
        <el-switch
          v-model="gridData.grade"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>

      <div class="father">
        <span>行政班级</span>
        <el-switch
          v-model="gridData.class"
          @click="handleClick()"
          class="child"
        >
        </el-switch>
      </div>
    </div>
  </ModalComponent>
</template>

<script>
import ModalComponent from "@/components/modal/index";
export default {
  data() {
    return {
      // 设置
      gridData: {
        college: true,
        xi: true,
        grade: true,
        class: true,
      },
    };
  },
  methods: {
    // 打开弹窗
    // 传参数e，为了写子节点之类的
    handleOpenModal(e) {
      console.log(e);
    },
    // 关闭弹窗
    // 关联
    handleCloseMOdal() {
      // this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）
      // gridData是需要传递的参数
      this.$emit("change", this.gridData);
    },
    // 开关
    handleClick() {},
  },
  components: {
    ModalComponent,
  },
};
</script>

<style lang="scss" scoped>
.cont {
  width: 200px;
  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid $--color-border;
    padding: $grid 0;
    .child {
      margin-left: auto;
      margin-top: $grid;
    }
  }
}
</style>

父组件：

<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <div class="top-content">
        <el-button type="primary" disabled>新建学生</el-button>
        <el-button type="primary" @click="handleOpenImport">批量导入</el-button>

        <el-dropdown v-if="gridData.college">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            学院<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>大学1</el-dropdown-item>
            <el-dropdown-item>大学2</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.xi">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            系<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>软件技术</el-dropdown-item>
            <el-dropdown-item>数字媒体</el-dropdown-item>
            <el-dropdown-item>语文系</el-dropdown-item>
            <el-dropdown-item>数学系</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.grade">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            年级<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>19级</el-dropdown-item>
            <el-dropdown-item>18级</el-dropdown-item>
            <el-dropdown-item>17级</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="gridData.class">
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            行政班<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>一班</el-dropdown-item>
            <el-dropdown-item>二班</el-dropdown-item>
            <el-dropdown-item>三班</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown>
          <span
            class="el-dropdown-link"
            style="padding: 10px; border: 1px solid #000; border-radius: 5px"
          >
            学籍状态<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>未注册</el-dropdown-item>
            <el-dropdown-item>在籍</el-dropdown-item>
            <el-dropdown-item>休学</el-dropdown-item>
            <el-dropdown-item>已离校</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <div class="demo-input-size">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input1"
          >
          </el-input>
        </div>
      </div>
      <!-- 三角 -->
      <div class="triangle"></div>
      <!-- 设置图标 -->
      <i
        class="el-icon-s-tools"
        style="
          float: right;
          cursor: pointer;
          margin-top: -35px;
          margin-right: 3px;
        "
        @click="handleSet"
      ></i>
    </div>
    <!-- 中间 -->
    <div class="center">
      <el-button type="primary" class="password" plain>重置密码</el-button>
      <el-button type="primary" class="edit" plain @click="handelbatchedit"
        >批量编辑</el-button
      >
      <!-- 表格 -->
      <el-table
        class="table"
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          prop="selectall"
          label="全选"
          width="100"
          type="selection"
        >
        </el-table-column>

        <el-table-column align="center" prop="name" label="姓名" width="100">
        </el-table-column>

        <el-table-column
          align="center"
          prop="studentid"
          label="学号"
          width="100"
        >
        </el-table-column>

        <el-table-column
          prop="college"
          label="学院"
          width="100"
          align="center"
          v-if="gridData.college"
        >
        </el-table-column>

        <el-table-column
          prop="xi"
          label="系"
          width="100"
          align="center"
          v-if="gridData.xi"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="professional"
          label="专业"
          width="100"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="administrative"
          label="行政班"
          width="100"
          v-if="gridData.class"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="grade"
          label="年级"
          width="100"
          v-if="gridData.grade"
        >
        </el-table-column>

        <el-table-column align="center" prop="gender" label="性别" width="100">
        </el-table-column>

        <el-table-column align="center" prop="phone" label="手机" width="100">
        </el-table-column>

        <el-table-column
          align="center"
          prop="status"
          label="学籍状态"
          width="100"
        >
        </el-table-column>

        <el-table-column align="center" prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="passwordreset(scope.row)"
              type="text"
              size="medium"
              >密码重置</el-button
            >
            <el-button type="text" size="medium" @click="handleedit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 批量导入 -->
    <ImportModal></ImportModal>
    <!-- 编辑 -->
    <ImportEdit></ImportEdit>
    <!-- 批量编辑 -->
    <ImportBatchedit></ImportBatchedit>
    <!-- 设置 -->
    <ImportSet @change="handleSetChange"></ImportSet>
  </div>
</template>

<script>
import ImportModal from "./modal/index";
import ImportEdit from "./modal/edit";
import ImportBatchedit from "./modal/batchedit";
import ImportSet from "./modal/set";
export default {
  data() {
    return {
      input1: "",
      // 设置
      // 子组件把gridData值 传给了 父组件，为什么父组件还要写gridData
      // 因为 v-if会用到gridData中的属性，所以属性是一定要有的，属性值可以没有，如：college: true, 可以写为 college: "",
      gridData: {
        college: "",
        xi: true,
        grade: true,
        class: true,
      },
      // 表格
      tableData: [
        {
          name: "张三",
          studentid: "196300001",
          college: "河北软件",
          xi: "软件技术",
          professional: "前端开发",
          administrative: "一班",
          grade: "19级",
          gender: "女",
          phone: "15711111111",
          status: "在",
        },
      ],
    };
  },
  methods: {
    // 关联设置弹窗
    // 形参e的实参是 子组件中handleCloseMOdal传的参数 this.$emit("change", this.gridData) 中的 this.gridData
    handleSetChange(e) {
      // this.gridData 父组件的gridData
      // 把子组件的 this.gridData 传递给父组件的 this.gridData
      this.gridData = e;
      console.log("父组件的gridData");
      console.log(this.gridData);
    },
    handleOpenImport() {
      this.$change.openModal("import-modal", { name: "123" });
    },

    // 编辑
    handleedit() {
      this.$change.openModal("import-edit", { name: "123" });
    },
    // 批量编辑
    handelbatchedit() {
      this.$change.openModal("import-batchedit", { name: "123" });
    },
    // 设置
    handleSet() {
      this.$change.openModal("import-set", { name: "123" });
    },
    handleSelectionChange() {},
    // 开关
    handleClick() {
      console.log("111");
    },
  },
  components: {
    // 批量导入
    ImportModal,
    // 编辑
    ImportEdit,
    // 批量编辑
    ImportBatchedit,
    // 设置
    ImportSet,
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 10 * $grid;
  background-color: $--color-white;
  margin-top: -10px;
  border-radius: 8px;
  //  三角
  .triangle {
    width: 0;
    height: 0;
    border-top: $grid * 5 solid $--color;
    border-left: $grid * 5 solid transparent;
    margin-top: -$grid * 5;
    float: right;
  }

  .top-content {
    //  width: 100%;
    height: $grid * 5;
    margin-left: $grid;
    //  background-color: red;
    line-height: $grid * 10;
    .el-dropdown-link {
      margin-left: $grid;
    }

    .demo-input-size {
      display: inline-block;
      width: $grid * 20;
      margin-left: $grid;
      margin-top: -$grid * 10;
    }
  }
}

.center {
  background-color: $--color-white;
  margin-top: 10px;
  .password {
    margin-top: 2 * $grid;
    margin-left: 2 * $grid;
  }
  .table {
    margin-top: 4 * $grid;
  }
}
</style>

weixin_46370867

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue + elementui 通过父子组件实现弹框

文章目录子组件父组件子组件<template> <ModalComponent name="import-set" title="设置" size="85%" width="250px" @opened="handleOpenModal" @close="handleCloseMOdal" > <div class="cont">  <div
复制链接

扫一扫