element/examples/docs/zh-CN/tabs.md

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

:::demo Tabs 组件提供了选项卡功能，只需要使用el-tabs和子元素el-tab-pane即可，在两个元素中，我们分别提供了一系列的属性来方便使用，el-tab-pane中label决定了选项卡标题，标签内部写入内容即可。在下例中我们在el-tabs中设置了active-name属性，接受一个String值，表明选中的选项卡，在el-tab-pane中可以设置对应的name属性，如果没有设置name，则默认值为顺序的1/2/3/4。例子选中选项卡2，如果不设置name，将active-name设为2，可以达成相同效果。

<template>
  <el-tabs :active-name="activeName">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first'
      };
    }
  };
</script>

:::

选项卡样式

选项卡样式的标签页。

:::demo 只需要设置type属性即可，如果需要标签风格，将其设置为card。

<template>
  <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

:::

可关闭

可以关闭标签页。

:::demo 在el-tabs中设置closable属性，接受一个Boolean，设置为true时为可关闭。

<template>
  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

:::

卡片化

卡片化的标签页。

:::demo 将type设置为border-card。

<el-tabs type="border-card">
  <el-tab-pane label="用户管理">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>

:::

自定义标签页

可以通过 label-content 属性来实现自定义标签页的内容

:::demo label-content 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。

<el-tabs type="border-card">
  <el-tab-pane label="我的行程" :label-content="renderTab">我的行程</el-tab-pane>
  <el-tab-pane label="消息中心">消息中心</el-tab-pane>
  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
<script>
  export default {
    methods: {
      renderTab(h, tab) {
        return <span><i class="el-icon-date"></i> {tab.label}</span>;
      }
    }
  }
</script>

:::

Tabs Attributes

参数	说明	类型	可选值	默认值
type	风格类型	string	card/border-card	—
closable	标签是否可关闭	boolean	—	false
active-name	选中选项卡的 name	string	—	第一个选项卡的 name

Tabs Events

事件名称	说明	回调参数
tab-click	tab 被选中的钩子	被选中的标签 tab 实例
tab-remove	tab 被删除的钩子	被删除的标签 tab 实例

Tab-pane Attributes

参数	说明	类型	可选值	默认值
label	选项卡标题	string	—	—
label-content	选项卡的标题的渲染 Function	Function(h, tab:vueInstance)	-	-
disabled	是否禁用	boolean	-	false
name	与选项卡 activeName 对应的标识符，表示选项卡别名	string	—	该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'