程序员scholar
  • Element-UI
  • 导航组件
scholar
2024-08-12
目录

标签页组件 (Tabs)

# 标签页组件 (Tabs)

Element UI 的 Tabs 组件用于分隔内容上有关联但属于不同类别的数据集合，通过标签页的方式展现不同内容。Tabs 组件在内容分组和导航中非常有用，特别是在需要展示多个模块内容的场景中。

提示

Tabs 标签页组件官方文档：https://element.eleme.cn/#/zh-CN/component/tabs (opens new window)

# 1. 基本用法

基本语法：使用 <el-tabs> 标签创建一个标签页容器，在容器内使用 <el-tab-pane> 标签创建每个标签页。通过 v-model 或 value 绑定选中的标签页。

<template>
  <el-tabs v-model="activeTab" @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 {
      activeTab: 'first' // 当前激活的选项卡
    };
  },
  methods: {
    handleClick(tab) {  // 标签页点击事件处理函数
      console.log('点击了标签:', tab.label);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  • v-model 绑定：通过 v-model 绑定选中选项卡的 name，可以实现选项卡的动态切换。
  • label 属性：设置选项卡的标题内容。
  • name 属性：为每个选项卡设置唯一的标识符，用于与 v-model 绑定值进行对应。
  • image-20240810203904513

# 2. Tabs 属性

参数 说明 类型 可选值 默认值
value / v-model 绑定值，选中选项卡的 name string — 第一个选项卡的 name
type 风格类型 string card/border-card —
closable 标签是否可关闭 boolean — false
addable 标签是否可增加 boolean — false
editable 标签是否同时可增加和关闭 boolean — false
tab-position 选项卡所在位置 string top/right/bottom/left top
stretch 标签的宽度是否自撑开 boolean — false
before-leave 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 Function(activeName, oldActiveName) — —
  • type 属性：可以设置选项卡的风格类型，例如 card 风格显示为卡片样式。
  • closable 属性：允许选项卡关闭时，显示关闭按钮。
  • tab-position 属性：设置选项卡的位置，可以在顶部、右侧、底部或左侧。

# 3. Tabs 事件

Tabs 组件提供了一些事件用于响应用户的操作：

事件名称 说明 回调参数
tab-click tab 被选中时触发 被选中的标签 tab 实例
tab-remove 点击 tab 移除按钮后触发 被删除的标签的 name
tab-add 点击 tabs 的新增按钮后触发 —
edit 点击 tabs 的新增按钮或 tab 被关闭后触发 targetName, action
  • tab-click 事件：当用户点击标签页时触发，回调参数是被选中的标签实例。
  • edit 事件：当用户新增或关闭标签页时触发，action 参数表示具体的操作类型（新增或关闭）。

# 4. Tab-pane 属性

<el-tab-pane> 组件的属性用于配置单个标签页的行为和显示效果：

参数 说明 类型 可选值 默认值
label 选项卡标题 string — —
disabled 是否禁用 boolean — false
name 与选项卡绑定值 value 对应的标识符 string — 该选项卡在选项卡列表中的顺序值
closable 标签是否可关闭 boolean — false
lazy 标签是否延迟渲染 boolean — false
  • disabled 属性：可以禁用某个选项卡，禁用后用户无法点击切换。
  • lazy 属性：当设置为 true 时，标签页内容在第一次激活时才会渲染，可以提升初次加载性能。

# 5. 常见场景示例

# 选项卡样式

将 type 属性设置为 card 可以使选项卡显示为标签风格，常用于需要在卡片内展示内容的场景。

image-20240810214149342

<template>
  <el-tabs v-model="activeName" 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.label);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 卡片化

通过将 type 属性设置为 border-card，可以实现卡片化的标签页，这种风格适用于信息展示或数据管理的场景。

image-20240810214201485

<template>
  <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>
</template>
1
2
3
4
5
6
7
8

# 标签页位置

通过 tab-position 属性设置标签的位置，支持 top、right、bottom、left 四种方向。

image-20240810214258618

<template>
  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    <el-radio-button label="top">上方</el-radio-button>
    <el-radio-button label="right">右侧</el-radio-button>
    <el-radio-button label="bottom">下方</el-radio-button>
    <el-radio-button label="left">左侧</el-radio-button>
  </el-radio-group>

  <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <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 {
  data() {
    return {
      tabPosition: 'left' // 设置默认的标签位置
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 自定义标签页

通过具名 slot 自定义标签页的内容，可以在标签页的标题中添加图标或其他自定义内容。

image-20240810214312820

<template>
  <el-tabs type="border-card">
    <!-- 自定义标签页内容 -->
    <el-tab-pane>
      <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
      我的行程内容
    </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>
1
2
3
4
5
6
7
8
9
10
11
12

# 可关闭的标签页

在某些情况下，你可能需要用户能够关闭某些标签页，使用 closable 属性即可实现。

<template>
  <el-tabs v-model="activeTab" type="card" closable @tab-remove="handleRemove">
    <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-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'first'
    };
  },
  methods: {
    handleRemove(targetName) {
      console.log('关闭了标签:', targetName);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 可增加的标签页

如果你希望用户可以动态添加标签页，可以使用 addable 或 editable 属性。

<template>
  <el-tabs v-model="activeTab" type="card" addable @tab-add="handleAdd" @edit="handleEdit">
    <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
      tabs: [
        { label: '标签 1', name: '1' },
        { label: '标签 2', name: '2' },
      ]
    };
  },
  methods: {
    handleAdd() {
      const newTabIndex = this.tabs.length + 1;
      const newTabName = newTabIndex.toString();
      this.tabs.push({ label: `标签 ${newTabIndex}`, name: newTabName });
      this.activeTab = newTabName;
    },
    handleEdit(targetName, action) {
      if (action === 'remove') {
        this.tabs = this.tabs.filter(tab => tab.name !== targetName);
        if (this.activeTab === targetName && this.tabs.length) {
          this.activeTab = this.tabs[0].name;
        }
      }
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 动态增减标签页

通过 editable 属性，可以动态增减标签页。常用于管理动态内容的场景，例如工作流、配置管理等。

image-20240810214338781

<template>
  <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
    <!-- 动态渲染标签页 -->
    <el-tab-pane
      :key="item.name"
      v-for="(item, index) in editableTabs"
      :label="item.title"
      :name="item.name"
    >
      {{item.content}}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      editableTabsValue: '2', // 设置默认激活的标签页
      editableTabs: [
        { title: 'Tab 1', name: '1', content: 'Tab 1 内容' },
        { title: 'Tab 2', name: '2', content: 'Tab 2 内容' }
      ],
      tabIndex: 2 // 用于生成新的标签页
    };
  },
  methods: {
    // 处理标签页新增和删除的逻辑
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: '新标签页',
          name: newTabName,
          content: '新标签页内容'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 自定义增加标签页触发器

你可以自定义新增标签页的触发器，灵活控制标签页的增加行为。

image-20240810214407423

<template>
  <div style="margin-bottom: 20px;">
    <el-button size="small" @click="addTab(editableTabsValue)">添加标签页</el-button>
  </div>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="(item, index) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{item.content}}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      editableTabsValue: '2', // 设置默认激活的标签页
      editableTabs: [
        { title: 'Tab 1', name: '1', content: 'Tab 1 内容' },
        { title: 'Tab 2', name: '2', content: 'Tab 2 内容' }
      ],
      tabIndex: 2 // 用于生成新的标签页
    };
  },
  methods: {
    // 添加新标签页的逻辑
    addTab(targetName) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: '新标签页',
        name: newTabName,
        content: '新标签页内容'
      });
      this.editableTabsValue = newTabName;
    },
    // 删除标签页的逻辑
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }


        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# 动态标签页内容渲染

当标签页较多或内容加载较重时，使用 lazy 属性可以提高性能，使标签页内容在第一次激活时才渲染。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="标签 1" name="first">静态内容</el-tab-pane>
    <el-tab-pane label="标签 2" name="second" lazy>第一次激活才渲染的内容</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'first'
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
导航菜单 (NavMenu)
面包屑组件 (Breadcrumb)

← 面包屑组件 (Breadcrumb)→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar