📊 数据展示优化 - 快速参考指南

30 秒快速查找你需要的样式类和用法

🎯 常用样式类速查表

文字样式类

类名	效果	使用场景
`.data-highlight`	15px 加粗，主色	重要数据（姓名、标题）
`.amount-text`	15px 加粗，蓝色	金额数字
`.amount-text.positive`	绿色	正数金额
`.amount-text.negative`	红色	负数金额
`.number-emphasis`	16px 加粗，主色	数字强调
`.text-ellipsis-line`	单行省略	长标题文本
`.text-ellipsis-2-lines`	两行省略	中等长度描述
`.text-ellipsis-3-lines`	三行省略	较长描述
`.data-title`	16px 加粗	卡片标题
`.data-description`	14px 次要色	描述文字
`.data-meta`	12px 浅色	元信息（时间等）

状态标签类

类名	颜色	使用场景
`.status-success`	绿色	成功、已完成、正常
`.status-warning`	橙色	警告、待处理
`.status-danger` `.status-error`	红色	危险、错误、已拒绝
`.status-info`	蓝色	信息、进行中
`.status-pending`	灰色	待处理、待开始
`.status-processing`	青色	正在处理
`.status-disabled`	浅灰	已禁用、已注销
`.vip-tag`	金色渐变	VIP 标识
`.hot-tag`	红色渐变+动画	热门标识
`.new-tag`	绿色渐变	新品标识

布局容器类

类名	效果	使用场景
`.data-card`	圆角卡片	数据展示卡片
`.data-card-header`	卡片头部	卡片标题区
`.data-card-content`	卡片内容	卡片主体
`.data-row`	Flex 行布局	数据行
`.data-label`	标签样式	数据标签
`.data-value`	值样式	数据值

空状态类

类名	效果	使用场景
`.custom-empty-state`	空状态容器	表格空状态
`.empty-icon`	大图标	空状态图标
`.empty-text`	主文字	空状态主文字
`.empty-hint`	提示文字	空状态提示

🚀 快速复制代码

1. 表格空状态

<el-table :data="list">
  <template #empty>
    <div class="custom-empty-state">
      <el-icon class="empty-icon"><Document /></el-icon>
      <div class="empty-text">暂无数据</div>
      <div class="empty-hint">您可以尝试调整筛选条件</div>
    </div>
  </template>
  <!-- 表格列 -->
</el-table>

2. 状态标签

<!-- 成功 -->
<el-tag class="status-success" size="small" effect="light">
  已完成
</el-tag>

<!-- 警告 -->
<el-tag class="status-warning" size="small" effect="light">
  待审核
</el-tag>

<!-- 危险 -->
<el-tag class="status-danger" size="small" effect="light">
  已拒绝
</el-tag>

<!-- VIP -->
<el-tag class="vip-tag" size="small">
  VIP 会员
</el-tag>

3. 长文本省略

<!-- 单行省略 -->
<span class="text-ellipsis-line" :title="row.name">
  {{ row.name }}
</span>

<!-- 两行省略 -->
<div class="text-ellipsis-2-lines" :title="row.description">
  {{ row.description }}
</div>

4. 数字强调

<!-- 关键数字 -->
<span class="number-emphasis">999</span>

<!-- 金额 -->
<span class="amount-text">¥199.00</span>

<!-- 正数金额 -->
<span class="amount-text positive">+50.00</span>

<!-- 负数金额 -->
<span class="amount-text negative">-30.00</span>

5. 表格列对齐

<!-- 文字左对齐（默认） -->
<el-table-column prop="name" label="名称" />

<!-- 数字右对齐 -->
<el-table-column prop="amount" label="金额" align="right" />

<!-- 状态居中 -->
<el-table-column prop="status" label="状态" align="center">
  <template #default="{ row }">
    <el-tag class="status-success" size="small" effect="light">
      {{ row.status }}
    </el-tag>
  </template>
</el-table-column>

6. 数据卡片

<div class="data-card">
  <div class="data-card-header">
    <div class="data-card-title">订单详情</div>
    <el-tag class="status-success" size="small">已完成</el-tag>
  </div>
  <div class="data-card-content">
    <div class="data-row">
      <span class="data-label">订单编号</span>
      <span class="data-value">20241025001</span>
    </div>
    <div class="data-row">
      <span class="data-label">订单金额</span>
      <span class="amount-text">¥199.00</span>
    </div>
  </div>
</div>

7. 开关样式优化

<el-switch
  v-model="row.status"
  :active-value="1"
  :inactive-value="0"
  active-color="var(--success-color)"
  inactive-color="var(--border-dark)"
  @change="handleStatusChange(row)"
/>

📋 表格列优化模板

序号列

<el-table-column type="index" label="序号" width="60" />

ID 列

<el-table-column prop="id" label="ID" width="80" align="center" />

头像列

<el-table-column prop="avatar" label="头像" width="80">
  <template #default="{ row }">
    <el-avatar :src="row.avatar" />
  </template>
</el-table-column>

图片列

<el-table-column prop="imageUrl" label="图片" width="150">
  <template #default="{ row }">
    <el-image
      :src="row.imageUrl"
      fit="cover"
      class="banner-image"
      :preview-src-list="[row.imageUrl]"
    />
  </template>
</el-table-column>

标题列（带省略）

<el-table-column prop="title" label="标题" min-width="150">
  <template #default="{ row }">
    <span class="data-highlight text-ellipsis-line" :title="row.title">
      {{ row.title }}
    </span>
  </template>
</el-table-column>

描述列（带省略）

<el-table-column prop="description" label="描述" min-width="200">
  <template #default="{ row }">
    <span class="data-description text-ellipsis-2-lines" :title="row.description">
      {{ row.description || '-' }}
    </span>
  </template>
</el-table-column>

状态列（标签）

<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.status === 1 ? 'status-success' : 'status-danger'" 
      size="small"
      effect="light"
    >
      {{ row.status === 1 ? '正常' : '禁用' }}
    </el-tag>
  </template>
</el-table-column>

金额列

<el-table-column prop="amount" label="金额" width="120" align="right">
  <template #default="{ row }">
    <span class="amount-text">¥{{ row.amount }}</span>
  </template>
</el-table-column>

数量列

<el-table-column prop="count" label="数量" width="80" align="center">
  <template #default="{ row }">
    <span class="number-emphasis">{{ row.count }}</span>
  </template>
</el-table-column>

VIP 列

<el-table-column prop="vipLevel" label="VIP" width="130" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.isVip ? 'vip-tag' : ''" 
      :type="row.isVip ? '' : 'info'" 
      size="small"
      effect="light"
    >
      {{ row.vipLevel || '普通用户' }}
    </el-tag>
  </template>
</el-table-column>

时间列

<el-table-column prop="createdAt" label="创建时间" width="170">
  <template #default="{ row }">
    <span class="data-meta">{{ row.createdAt }}</span>
  </template>
</el-table-column>

开关列

<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-switch
      v-model="row.status"
      :active-value="1"
      :inactive-value="0"
      active-color="var(--success-color)"
      @change="handleStatusChange(row)"
    />
  </template>
</el-table-column>

操作列

<el-table-column label="操作" width="200" fixed="right">
  <template #default="{ row }">
    <el-button type="primary" size="small" link @click="handleView(row)">
      详情
    </el-button>
    <el-button type="success" size="small" link @click="handleEdit(row)">
      编辑
    </el-button>
    <el-button type="danger" size="small" link @click="handleDelete(row)">
      删除
    </el-button>
  </template>
</el-table-column>

🎨 Element Plus 组件属性推荐

el-tag 推荐用法

<!-- 浅色效果（推荐） -->
<el-tag size="small" effect="light">标签</el-tag>

<!-- 自定义颜色 -->
<el-tag class="status-success" size="small" effect="light">
  成功
</el-tag>

el-table 推荐属性

<el-table
  v-loading="loading"
  :data="list"
  stripe
  border
  highlight-current-row
>
  <template #empty>
    <!-- 自定义空状态 -->
  </template>
</el-table>

el-button 推荐用法

<!-- 表格内操作按钮 -->
<el-button type="primary" size="small" link>操作</el-button>

<!-- 工具栏按钮 -->
<el-button type="primary" icon="Plus">新增</el-button>

💡 常见场景快速方案

场景 1：用户状态显示

<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-tag 
      v-if="row.status === 1" 
      class="status-success" 
      size="small" 
      effect="light"
    >
      正常
    </el-tag>
    <el-tag 
      v-else-if="row.status === 0" 
      class="status-danger" 
      size="small" 
      effect="light"
    >
      禁用
    </el-tag>
    <el-tag 
      v-else 
      class="status-disabled" 
      size="small" 
      effect="light"
    >
      注销
    </el-tag>
  </template>
</el-table-column>

场景 2：订单状态显示

<el-table-column prop="orderStatus" label="订单状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-pending': row.orderStatus === 1,
        'status-processing': row.orderStatus === 2,
        'status-success': row.orderStatus === 3,
        'status-danger': row.orderStatus === 4
      }"
      size="small"
      effect="light"
    >
      {{ getOrderStatusText(row.orderStatus) }}
    </el-tag>
  </template>
</el-table-column>

场景 3：审核状态显示

<el-table-column prop="auditStatus" label="审核状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-pending': row.auditStatus === 0,
        'status-success': row.auditStatus === 1,
        'status-danger': row.auditStatus === 2
      }"
      size="small"
      effect="light"
    >
      {{ row.auditStatus === 0 ? '待审核' : row.auditStatus === 1 ? '已通过' : '已拒绝' }}
    </el-tag>
  </template>
</el-table-column>

场景 4：支付状态显示

<el-table-column prop="payStatus" label="支付状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-warning': row.payStatus === 0,
        'status-success': row.payStatus === 1,
        'status-danger': row.payStatus === 2
      }"
      size="small"
      effect="light"
    >
      {{ row.payStatus === 0 ? '待支付' : row.payStatus === 1 ? '已支付' : '已取消' }}
    </el-tag>
  </template>
</el-table-column>

场景 5：是否/真假值显示

<el-table-column prop="isCompleted" label="是否完成" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.isCompleted ? 'status-success' : 'status-warning'" 
      size="small"
      effect="light"
    >
      {{ row.isCompleted ? '是' : '否' }}
    </el-tag>
  </template>
</el-table-column>

🔍 快速检查清单

优化一个列表页面时，确保完成以下项目：

添加自定义空状态
标题文字使用 .data-highlight
长文本添加省略 .text-ellipsis-line
状态字段改用彩色标签
标签添加 effect="light"
数字使用 .number-emphasis
金额使用 .amount-text
VIP 使用 .vip-tag
开关添加自定义颜色
需要居中的列添加 align="center"
操作按钮使用 size="small" link

📞 需要帮助？

查看 data-display.css 完整样式定义
参考 UserList.vue 和 BannerList.vue 示例
阅读 数据展示优化说明.md 详细文档

快速参考，即查即用！ 🚀📊

数据展示优化-快速参考.md 12 KB Постоянная ссылка История Исходник

📊 数据展示优化 - 快速参考指南

🎯 常用样式类速查表

文字样式类

状态标签类

布局容器类

空状态类

🚀 快速复制代码

1. 表格空状态

2. 状态标签

3. 长文本省略

4. 数字强调

5. 表格列对齐

6. 数据卡片

7. 开关样式优化

📋 表格列优化模板

序号列

ID 列

头像列

图片列

标题列（带省略）

描述列（带省略）

状态列（标签）

金额列

数量列

VIP 列

时间列

开关列

操作列

🎨 Element Plus 组件属性推荐

el-tag 推荐用法

el-table 推荐属性

el-button 推荐用法

💡 常见场景快速方案

场景 1：用户状态显示

场景 2：订单状态显示

场景 3：审核状态显示

场景 4：支付状态显示

场景 5：是否/真假值显示

🔍 快速检查清单

📞 需要帮助？

数据展示优化-快速参考.md 12 KB

Постоянная ссылка История Исходник