Element UI后台页面弹出层嵌入其他页面的实践

前言

我们开发后台系统，有时候会出现一个页面的弹出层弹出其他其他页面内容的情况，这时候我整理一个比较好的实践。

案例

假设A页面是招聘职位列表页，B页面是应聘简历列表页。

现在我希望A页面的每个职位，都有按钮能弹出一个层，显示B页面的内容，而且只显示该职位的投递简历列表。

每个页面的样子

页面至少有搜索区和内容区两部分。

引入B页面

import DeliverResume from ... 从略

components: {...} 从略

A页面

1. 传prop

要给弹层里的B页面传入一个prop queryJobId，值是resumeDialog.queryJobId。

      resumeDialog: {
        visible: false,
        queryJobId: null,
      }

2. 模板

在弹之前，需要先给resumeDialog.queryJobId赋值。

B页面

1. props

  props: {
    queryJobId: {
      type: Number,
    },
  },

2. 隐藏搜索区

应使用v-if="!queryJobId"来隐藏搜索区，因为弹层的内容已经是搜索结果，不应再允许继续搜索，如果想继续搜索，应直接访问B页面。

3. watch queryJobId

  watch: {
    queryJobId(newVal) {
      this.queryParams.jobId = newVal;
      this.handleQuery();
    },
  },

4. created

无脑赋值给queryParams.jobId，然后执行检索。即便正常访问B页面，这句代码适用。

  created() {
    if (this.queryJobId) {
      this.queryParams.jobId = this.queryJobId;
      this.handleQuery();
    } else {
      this.getList();
    }
  }