实现elementUI的tabs标签页切换时每个标签页下的iframe自动重载

最新推荐文章于 2024-08-02 11:00:31 发布

九号窗口

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量5.3k

点赞数 2

分类专栏： PC vue 总结文章标签： vue vue.js elementUI tabs

本文链接：https://blog.csdn.net/weixin_43734732/article/details/103846292

版权

总结同时被 3 个专栏收录

78 篇文章 1 订阅

订阅专栏

vue

47 篇文章 3 订阅

订阅专栏

34 篇文章 1 订阅

订阅专栏

首先给t每个tabs标签页下的iframe绑定ref，ref的值与el-tab-pane的name属性的值一致
通过tab-click方法取到当前选中标签页的iframe，然后执行刷新

      <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
        <el-tab-pane label="xxx" name="1">
          <iframe ref='1' width="100%" height="480px" :src=orderSurveyUrl></iframe ref='1'>
        </el-tab-pane>
        <el-tab-pane label="xxx" name="2">
          <iframe ref='2' width="100%" height="480px" :src=standardDeliverUrl></iframe>
        </el-tab-pane>
        <el-tab-pane label="xxx" name="3">
          <iframe ref='3' width="100%" height="480px" :src=hispb></iframe>
        </el-tab-pane>
        <el-tab-pane label="xxx" name="4">
          <iframe ref='4' width="100%" height="480px" :src=gatheringUrl></iframe>
        </el-tab-pane>
      </el-tabs>

      handleClick(tab, event) {
        console.log(tab.name);
        console.log(this.$refs[tab.name])
        this.$refs[tab.name].contentWindow.location.reload()
      },