Tag 标签

用于标记和选择。

基础用法

由 type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。

<template>
  <el-tag>Tag 1</el-tag>
  <el-tag class="ml-2" type="success">Tag 2</el-tag>
  <el-tag class="ml-2" type="info">Tag 3</el-tag>
  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
</template>

可移除标签

设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 默认的标签移除时会附带渐变动画。 如果不想使用，可以设置 disable-transitions 属性，它接受一个 Boolean，true 为关闭。 当 Tag 被移除时会触发 close 事件。

<template>
  <el-tag
    v-for="tag in tags"
    :key="tag.name"
    class="mx-1"
    closable
    :type="tag.type"
  >
    {{ tag.name }}
  </el-tag>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const tags = ref([
  { name: 'Tag 1', type: '' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。

<template>
  <el-tag
    v-for="tag in dynamicTags"
    :key="tag"
    class="mx-1"
    closable
    :disable-transitions="false"
    @close="handleClose(tag)"
  >
    {{ tag }}
  </el-tag>
  <el-input
    v-if="inputVisible"
    ref="InputRef"
    v-model="inputValue"
    class="ml-1 w-20"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
    + New Tag
  </el-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'
const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.

<template>
  <el-row>
    <el-tag class="mx-1" size="large">Large</el-tag>
    <el-tag class="mx-1">Default</el-tag>
    <el-tag class="mx-1" size="small">Small</el-tag>
  </el-row>
  <el-row class="mt-4">
    <el-tag class="mx-1" size="large" closable>Large</el-tag>
    <el-tag class="mx-1" closable>Default</el-tag>
    <el-tag class="mx-1" size="small" closable>Small</el-tag>
  </el-row>
</template>

主题

Tag 组件提供了三个不同的主题：dark、light 和 plain。

通过设置 effect 属性来改变主题，默认为 light。

<template>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2">Dark</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
    >
      {{ item.label }}
    </el-tag>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
      closable
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1">Light</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </el-tag>
    <el-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="light"
      closable
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1">Plain</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </el-tag>
    <el-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="plain"
      closable
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from 'element-plus'
type Item = { type: TagProps['type']; label: string }
const items = ref<Array<Item>>([
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' },
])
</script>

圆形标签 > 2.1.7

Tag 可以向按钮组件一样变为完全圆形。

<template>
  <div class="flex flex-wrap gap-2 my-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex flex-wrap gap-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="light"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex flex-wrap gap-2 my-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="plain"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from 'element-plus'
type Item = { type: TagProps['type']; label: string }
const items = ref<Array<Item>>([
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' },
])
</script>

可选中的标签

有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。

check-tag 的基础使用方法，check-tag 提供的 API 非常简单。

<template>
  <div>
    <el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
    <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checked = ref(false)
const onChange = (status: boolean) => {
  checked.value = status
}
</script>

Tag 属性

Tag 事件

Tag 插槽

CheckTag 属性

CheckTag 事件

CheckTag 插槽

源代码

组件 • 文档

贡献者

云游君

三咲智子

JeremyWuuuuu

류한경

msidolphin

Delyan Haralanov

blackie

Aex

波比小金刚

btea

Alan Wang

on the field of hope

Hades-li

小孩可可爱爱

renovate[bot]

C.Y.Kun

qiang