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 :active-name="activeName">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'two'
      };
    }
  };
</script>

:::

多种风格

除了上例中的风格外，我们还提供了标签和卡片两种风格。

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

<el-tabs type="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>

<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>

:::

可关闭的标签

:::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>

:::

Tabs Attributes

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

Tabs Events

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

Tab-pane Attributes

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

4.4 KiB Raw Blame History Unescape Escape