school-developer/src/components/StatusTag

StatusTag 组件

状态标签组件，用于显示状态值对应的标签文本，支持自定义样式和颜色。

功能特性

• ✅ 支持标签样式和纯文本样式两种显示模式
• ✅ 支持自定义类型映射（typeMap）和颜色映射（colorMap）
• ✅ 内置默认样式（'1' → warning/dark，'0' → primary/light）
• ✅ 外部传入优先，支持覆盖默认样式

Props

参数	说明	类型	默认值	必填
value	当前状态值	string | number	''	是
options	选项列表，格式：[{label: '是', value: '1'}, {label: '否', value: '0'}]	Option[]	[]	是
showTag	是否显示标签样式（有边框和背景），false 为纯文本样式	boolean	true	否
typeMap	自定义类型映射，用于标签模式，如：{'1': {type: 'warning', effect: 'dark'}}	Record<string | number, { type: string; effect?: string }>	{}	否
colorMap	自定义颜色映射，用于纯文本模式，如：{'1': '#E6A23C'}	Record<string | number, string>	{}	否

Option 接口

interface Option {
	label: string; // 显示文本
	value: string | number; // 选项值
}

默认样式

组件内置了默认的样式映射，无需传入 typeMap 或 colorMap 即可使用：

• 值 '1' 或 1：

  • 标签模式：warning 类型 + dark 效果（橙色深色）
  • 纯文本模式：var(--el-color-warning)（橙色）

• 值 '0' 或 0：

  • 标签模式：primary 类型 + light 效果（蓝色浅色）
  • 纯文本模式：var(--el-color-primary)（蓝色）

• 其他值：

  • 标签模式：info 类型 + light 效果（灰色）
  • 纯文本模式：默认文本颜色

使用示例

基础用法

<template>
	<StatusTag :value="scope.row.tied" :options="YES_OR_NO" />
</template>

<script setup>
import StatusTag from '/@/components/StatusTag/index.vue';

const YES_OR_NO = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' },
];
</script>

纯文本模式（无边框和背景）

<StatusTag :value="scope.row.tied" :options="YES_OR_NO" :show-tag="false" />

自定义类型映射

<StatusTag
	:value="scope.row.status"
	:options="statusOptions"
	:type-map="{
		'1': { type: 'success', effect: 'dark' },
		'0': { type: 'danger', effect: 'light' },
	}"
/>

自定义颜色映射（纯文本模式）

<StatusTag
	:value="scope.row.status"
	:options="statusOptions"
	:show-tag="false"
	:color-map="{
		'1': '#67C23A',
		'0': '#F56C6C',
	}"
/>

完整示例

<template>
	<el-table :data="tableData">
		<el-table-column label="是否退休" width="100" align="center">
			<template #default="scope">
				<StatusTag :value="scope.row.tied" :options="YES_OR_NO" />
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import global from '/@/components/tools/commondict.vue';

const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'));
const YES_OR_NO = global.YES_OR_NO;
</script>

注意事项

1. 必须传入 options：组件不提供默认选项，必须通过 options prop 传入选项列表
2. 值匹配：组件会自动匹配字符串和数字类型的值（如 '1' 和 1 会被视为相同）
3. 样式优先级：外部传入的 typeMap 和 colorMap 会覆盖默认样式
4. 未匹配值：如果 value 在 options 中找不到对应项，会显示 '-'

样式说明

标签模式（showTag: true）

使用 Element Plus 的 el-tag 组件，支持所有 el-tag 的类型和效果：

• type: success | info | warning | danger | primary
• effect: dark | light | plain

纯文本模式（showTag: false）

使用纯文本显示，通过 CSS 颜色控制样式，支持任何颜色值（CSS 变量、十六进制、RGB 等）。