欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-08 17:08:50
...
  1. 首先给t每个tabs标签页下的iframe绑定ref,ref的值与el-tab-pane的name属性的值一致
  2. 通过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()
      },