Tabs 标签页

该组件主要是为了弥补el-tabs不支持右侧插槽的问题

基础用法

页签1

页签2

页签3

页签4

查看代码

<template>
  <gi-tabs v-model="value" :options="options">
    <template #extra>
      <el-space>
        <el-button type="primary">保存</el-button>
        <el-button>返回</el-button>
      </el-space>
    </template>
  </gi-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('1')
const options = [
  { label: '页签1', name: '1' },
  { label: '页签2', name: '2' },
  { label: '页签3', name: '3', disabled: true },
  { label: '页签4', name: '4' }
]
</script>

卡片类型

默认卡片边框卡片

页签1

页签2

页签3

页签4

页签5

页签6

页签7

页签8

页签9

页签10

页签11

页签12

页签13

页签14

页签15

查看代码

<template>
  <el-radio-group v-model="tabsType">
    <el-radio value="">默认</el-radio>
    <el-radio value="card">卡片</el-radio>
    <el-radio value="border-card">边框卡片</el-radio>
  </el-radio-group>
  <gi-tabs v-model="value" :options="options" :type="tabsType" style="margin-bottom: 10px">
    <template #extra>
      <el-space>
        <el-button type="primary">保存</el-button>
        <el-button>返回</el-button>
      </el-space>
    </template>
  </gi-tabs>
</template>

<script setup lang="ts">
import type { TabsProps } from 'element-plus'
import { ref } from 'vue'

const value = ref('1')
const options = [
  { label: '页签1', name: '1' },
  { label: '页签2', name: '2' },
  { label: '页签3', name: '3' },
  { label: '页签4', name: '4' },
  { label: '页签5', name: '5' },
  { label: '页签6', name: '6' },
  { label: '页签7', name: '7' },
  { label: '页签8', name: '8' },
  { label: '页签9', name: '9' },
  { label: '页签10', name: '10' },
  { label: '页签11', name: '11' },
  { label: '页签12', name: '12' },
  { label: '页签13', name: '13' },
  { label: '页签14', name: '14' },
  { label: '页签15', name: '15' }
]

const tabsType = ref<TabsProps['type']>('')
</script>

使用插槽

全部

5

待审批

10

已审批

15

草稿

6

查看代码

<template>
  <gi-tabs v-model="activeName" :options="options" type="card" inner @tab-change="handleTabChange">
    <template #extra>
      <el-space>
        <el-button type="primary">保存</el-button>
        <el-button>返回</el-button>
      </el-space>
    </template>
    <template #label="{ data }">
      <el-space :size="4">
        <span>{{ data.label }}</span>
        <el-tag type="primary" size="small">{{ countObj[data.name] }}</el-tag>
      </el-space>
    </template>
  </gi-tabs>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const activeName = ref('b')
const options = [
  { label: '全部', name: 'a' },
  { label: '待审批', name: 'b' },
  { label: '已审批', name: 'c' },
  { label: '草稿', name: 'd' }
]

const countObj = ref<Record<string, number>>({ a: 5, b: 10, c: 15, d: 6 })

const handleTabChange = (name: string) => {
  ElMessage.info(`当前选中的标签页的值是：${name}`)
}
</script>

小型尺寸

默认卡片边框卡片

全部

5

待审批

10

已审批

15

草稿

6

查看代码

<template>
  <el-radio-group v-model="tabsType">
    <el-radio value="">默认</el-radio>
    <el-radio value="card">卡片</el-radio>
    <el-radio value="border-card">边框卡片</el-radio>
  </el-radio-group>
  <gi-tabs v-model="activeName" :options="options" :type="tabsType" inner size="small" @tab-change="handleTabChange">
    <template #extra>
      <el-space>
        <el-button type="primary" size="small">保存</el-button>
        <el-button size="small">返回</el-button>
      </el-space>
    </template>
    <template #label="{ data }">
      <el-space :size="2">
        <span>{{ data.label }}</span>
        <el-tag type="danger" size="small" round style="transform: scale(0.8);">{{ countObj[data.name] }}</el-tag>
      </el-space>
    </template>
  </gi-tabs>
</template>

<script setup lang="ts">
import type { TabsProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const tabsType = ref<TabsProps['type']>('')
const activeName = ref('a')
const options = [
  { label: '全部', name: 'a' },
  { label: '待审批', name: 'b' },
  { label: '已审批', name: 'c' },
  { label: '草稿', name: 'd' }
]

const countObj = ref<Record<string, number>>({ a: 5, b: 10, c: 15, d: 6 })

const handleTabChange = (name: string) => {
  ElMessage.info(`当前选中的标签页的值是：${name}`)
}
</script>

API

Props

参数	说明	类型	默认值
size	尺寸	small | medium	medium
options	选项列表	OptionItem[]	-
inner	内嵌模式，消除左右内边距	boolean	false

Slots

名称	说明
default	自定义内容
label	参数: { data }

TIP

继承 el-tabs 的所有属性