vue实现弹出框内嵌页面展示并添加tab切换展示实时加载

<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
  <template slot-scope="scope">
    <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
      <span>{{ scope.row.dictType }}</span>
    </router-link>
  </template>
</el-table-column>

created() {
    const dictId = this.$route.params && this.$route.params.dictId;
    this.getType(dictId);
    this.getTypeList();
  },

  {
    path: '/system/dict-data',
    component: Layout,
    hidden: true,
    permissions: ['system:dict:list'],
    children: [
      {
        path: 'index/:dictId(\\d+)',
        component: () => import('@/views/system/dict/data'),
        name: 'Data',
        meta: { title: '字典数据', activeMenu: '/system/dict' }
      }
    ]
  },

<el-dialog :title="filterTitle" :visible.sync="filterDialogVisible" v-if="filterDialogVisible" width="1100px"
      append-to-body>
  <el-tabs v-model="filterTabValue" type="border-card" :lazy="true" @tab-click="filterTabClick">
    <el-tab-pane label="内容1" name="hotel">
      <!--  酒店过滤页面    -->
      <HotelFilter :agentId="agentId" v-if="isHotel"></HotelFilter>
    </el-tab-pane>
    <el-tab-pane label="内容2" name="keyword">
      <Keyword :agentId="agentId" v-if="isKeyword"></Keyword>
    </el-tab-pane>
  </el-tabs>
</el-dialog>

//设置页面
filterRuleAdd(row) {
  this.agentId = row.agentId;
  this.filterDialogVisible = true;
  this.filterTitle = "渠道名称：" + row.agentName;
  this.filterTabValue = "hotel";
  this.isHotel = true;
},
//禁用配置切换
filterTabClick() {
  if (this.filterTabValue == "hotel") {
    this.isHotel = true;
    this.isKeyword = false;
  } else if (this.filterTabValue == "keyword") {
    this.isKeyword = true;
    this.isHotel = false;
  }
},