使标签页充当元素ui

问题描述

我正在使用元素ui，并且我有一个tabs元素，我希望其中一个标签像链接而不是标签一样起作用，例如：

我想，当我对外部链接点击打开一个新的浏览器标签页的链接，但我不希望它像一个标签，这意味着，当我的用户选项卡上，然后我点击外部链接，用户标签将始终显示为一个，而不是隐藏它，然后选择“外部链接”标签。

我试图在tabs元素内添加一个el-link元素，但是它不能那样工作，所以我认为External link应该保留为el-tab-pane，然后忽略它的行为以显示标签的内容并选择它，但是我不知道该怎么做。

这是我的代码：

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="External link" name="third"></el-tab-pane>
  </el-tabs>

这是jsfiddle：

http://jsfiddle.net/z2g53bs1/6/

如果你们有任何想法或解决方案，我将不胜感激。

谢谢。

解决方法

可以使用插槽来自定义 tab-pane 元素标签的内容 - https://element-plus.org/#/en-US/component/tabs#tab-pane-slots

这样您就可以在其中添加 a 标签。仍然无法解决阻止将活动标签更改为 External link。您可以向 el-tab-pane 添加禁用标志并自定义样式。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="External link" name="third">
      <template #label>
        <a href="https://google.com" target="_blank">External link</a>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

用于处理点击可将您转到新页面：

   watch: {
    activeName(newValue,oldValue) {
       if (newValue == 'third') {
         window.open("https://www.google.com","_blank")
         this.activeName = oldValue
       }
     }
  }

javascript vue.js