element

4.4 KiB

Raw Blame History

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>
    <el-tab-pane v-for="tab in tabs" :label="tab.label">{{tab.content}}</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        tabs: [
          {label: '用户管理', content: ''},
          {label: '配置管理', content: ''},
          {label: '角色管理', content: ''},
          {label: '定时任务补偿', content: ''}
        ]
      };
    }
  };
</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) {
        console.log(tab);
      }
    }
  };
</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) {
        console.log(tab);
      }
    }
  };
</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>

:::

Tabs Attributes

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

Tabs Events

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

Tab-pane Attributes

参数	说明	类型	可选值	默认值
label	选项卡标题	string	—	—
name	与选项卡 activeName 对应的标识符，表示选项卡别名	string	—	该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'

4.4 KiB Raw Blame History Unescape Escape