element

6.0 KiB

Raw Blame History

Tabs 标签页

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

基础用法

基础的、简洁的标签页。

:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <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'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

:::

选项卡样式

选项卡样式的标签页。

:::demo 只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

<template>
  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <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'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

:::

可关闭

可以关闭标签页。

:::demo 通过设置 closable 属性来打开 Tabs 的可关闭标签效果, closable 也可以设置在 Tab Panel 中实现部分标签页的可关闭效果。

<template>
  <el-tabs type="card" closable @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>

:::

动态增加标签页

展示如何通过触发器来动态增加标签页

:::demo

<div style="margin-bottom: 20px;">
  <el-button size="small" @click="tabs.push({ name: 'Tab ' + ++tabIndex, title: 'new Tab', content: 'new Tab content' })">add tab</el-button>
</div>
<el-tabs type="card" closable>
  <el-tab-pane v-for="(item, index) in tabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
</el-tabs>

:::

Tabs Attributes

参数	说明	类型	可选值	默认值
type	风格类型	string	card/border-card	—
closable	标签是否可关闭	boolean	—	false
active-name(deprecated)	选中选项卡的 name	string	—	第一个选项卡的 name
value	绑定值，选中选项卡的 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'
closable	标签是否可关闭	boolean	—	false

6.0 KiB Raw Blame History Unescape Escape