激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

Element-ui實(shí)現(xiàn)多標(biāo)簽頁(yè)

發(fā)布時(shí)間：2024-04-08 12:28:50 瀏覽量：227次

實(shí)現(xiàn)類似于瀏覽器打開多個(gè)網(wǎng)頁(yè)的效果，可同時(shí)查看網(wǎng)站的多個(gè)頁(yè)面。

1.添加tabs標(biāo)簽頁(yè)

其中<p v-html=item.content></p>是為了防止Html轉(zhuǎn)義，使其能夠在頁(yè)簽中顯示網(wǎng)頁(yè)而不是字符串。

<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
  <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
  >
    <p v-html=item.content></p>



  </el-tab-pane>
</el-tabs>

2.data中添加默認(rèn)頁(yè)面，這樣不至于打開網(wǎng)站之后是空白。

editableTabsValue: '1',

editableTabs: [
  {
  title: '員工管理',
  name: '1',
  content: "<iframe ref='1' width='100%' height='850px' src='page/member/list.html'></iframe>"
  }

],
tabIndex: 1

3.methods中添加js腳本，用來(lái)關(guān)閉和添加頁(yè)簽

關(guān)閉頁(yè)簽

removeTab(targetName) {
  let tabs = this.editableTabs;
  let activeName = this.editableTabsValue;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }

  this.editableTabsValue = activeName;
  this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}

導(dǎo)航中的單擊事件中添加頁(yè)簽，如果已添加則無(wú)需添加直接打開

//動(dòng)態(tài)添加標(biāo)簽頁(yè)
//首先判斷是否已經(jīng)打開
let tabs = this.editableTabs;
let findActive = 0
tabs.forEach((tab, index) => {
  if (tab.name == item.id) {
    this.editableTabsValue = item.id
    findActive = 1
  }
});
if (findActive == 0)
{
  this.editableTabs.push({
    title: item.name,
    name: item.id,
    content: "<iframe ref=" + item.id + " width='100%' height='850px' " + " src=" + item.url + "></iframe>"
  });
  this.editableTabsValue = item.id;
}
//////

導(dǎo)航的html如下

<el-scrollbar wrap-class="scrollbar-wrapper">
  <el-menu
          :default-active="defAct"
          :unique-opened="false"
          :collapse-transition="false"
          background-color="#343744"
          text-color="#bfcbd9"
          active-text-color="#f4f4f5"
  >
    <div v-for="item in menuList" :key="item.id">
      <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item
                v-for="sub in item.children"
                :index="sub.id"
                :key="sub.id"
                @click="menuHandle(sub,false)"
        >
          <i class="iconfont" :class="sub.icon"></i>
          <span slot="title">{{sub.name}}</span>
        </el-menu-item
        >
      </el-submenu>
      <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
        <i class="iconfont" :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>


    </div>
  </el-menu>
</el-scrollbar>

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定