首页 > 软件编程 > java > Vue.js字段内容设置表格颜色

基于Vue.js和Ant Design Vue实现根据字段内容动态设置表格颜色功能

2025-06-27 08:53:07 作者：码农阿豪@新空间

在前端开发中,表格Table是展示数据的常见组件,有时,我们需要根据表格中某些字段的内容动态设置样式,例如根据百分比数值显示不同的颜色,以提升数据的可读性和用户体验,本文将详细介绍如何基于Vue.js和Ant Design Vue实现这一功能,并结合实际代码示例进行解析

1. 需求分析

我们需要在表格中实现以下效果：

如果字段内容包含 (100%)，则文字显示为绿色（表示成功或完成）。
如果字段内容包含 (0%)，则文字显示为红色（表示失败或未完成）。
其他情况显示为橙色（表示部分成功或中间状态）。

示例数据：

7 (100%)    → 绿色
0 (0%)      → 红色
5 (50%)     → 橙色

2. 技术选型

前端框架：Vue.js（2.x / 3.x 均适用）
UI 组件库：Ant Design Vue（a-table）
辅助工具：dayjs（日期格式化）

3. 实现方案

3.1 使用 scopedSlots 自定义渲染

Ant Design Vue 的 a-table 提供了 scopedSlots 功能，允许我们自定义单元格的渲染方式。我们可以利用它来动态设置文字颜色。

关键代码：

columns: [
  {
    title: '安装包列表数',
    dataIndex: 'appListCount',
    scopedSlots: { customRender: 'percentage' } // 使用自定义 slot
  }
]

3.2 动态计算颜色

在 Vue 的 methods 中定义一个方法 getPercentageColor，根据字段内容返回对应的颜色。

基础实现：

methods: {
  getPercentageColor(value) {
    if (value.includes('(100%)')) return 'green';
    if (value.includes('(0%)')) return 'red';
    return 'orange';
  }
}

优化版本（更健壮的匹配）：

getPercentageColor(value) {
  if (typeof value !== 'string') return 'orange'; // 非字符串默认橙色
  
  // 使用正则匹配，兼容可能的空格或格式变化
  if (/\(\s*100\s*%\)/.test(value)) return 'green';
  if (/\(\s*0\s*%\)/.test(value)) return 'red';
  
  return 'orange';
}

3.3 在模板中应用样式

在 a-table 的 template 中使用该方法动态绑定颜色：

<template slot="percentage" slot-scope="text">
  <span :style="{ color: getPercentageColor(text) }">{{ text }}</span>
</template>

4. 完整代码实现

以下是完整的 Vue 组件代码，包含表格、分页、动态颜色等功能：

<template>
  <a-modal
    title="抓取记录"
    :visible="visible"
    width="90%"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <a-table
      rowKey="id"
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
    >
      <!-- 状态列 -->
      <template slot="graspingStatus" slot-scope="text">
        <a-tag :color="getStatusColor(text)">
          {{ getStatusText(text) }}
        </a-tag>
      </template>

      <!-- 时间格式化 -->
      <template slot="time" slot-scope="text">
        {{ formatDateTime(text) }}
      </template>

      <!-- 百分比列颜色控制 -->
      <template slot="percentage" slot-scope="text">
        <span :style="{ color: getPercentageColor(text) }">{{ text }}</span>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import dayjs from 'dayjs';
import { getGraspingRecords } from '@/api/ad-api/media';

export default {
  name: 'GraspingRecordModal',
  data() {
    return {
      loading: false,
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 条记录`
      },
      columns: [
        { title: '任务ID', dataIndex: 'graspingTaskId' },
        { title: '总日志数', dataIndex: 'totalCount' },
        { 
          title: '状态', 
          dataIndex: 'graspingStatus',
          scopedSlots: { customRender: 'graspingStatus' }
        },
        { 
          title: '抓取时间', 
          dataIndex: 'graspingTime',
          scopedSlots: { customRender: 'time' }
        },
        { 
          title: '设备ID数', 
          dataIndex: 'deviceIdCount',
          scopedSlots: { customRender: 'percentage' }
        },
        // 其他列...
      ]
    };
  },
  props: {
    visible: { type: Boolean, default: false },
    mediaAdId: { type: [Number, String], required: true }
  },
  watch: {
    visible(val) {
      if (val) {
        this.pagination.current = 1;
        this.fetchData();
      } else {
        this.data = [];
        this.pagination.total = 0;
      }
    }
  },
  methods: {
    // 格式化时间
    formatDateTime(timeStr) {
      return timeStr ? dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss') : '-';
    },

    // 状态文本
    getStatusText(status) {
      const map = { 0: '失败', 1: '成功', 2: '部分成功' };
      return map[status] || '未知';
    },

    // 状态颜色
    getStatusColor(status) {
      const map = { 0: 'red', 1: 'green', 2: 'orange' };
      return map[status] || 'default';
    },

    // 动态计算百分比颜色
    getPercentageColor(value) {
      if (typeof value !== 'string') return 'orange';
      if (/\(\s*100\s*%\)/.test(value)) return 'green';
      if (/\(\s*0\s*%\)/.test(value)) return 'red';
      return 'orange';
    },

    // 分页变化
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.fetchData();
    },

    // 获取数据
    async fetchData() {
      this.loading = true;
      try {
        const { data: res } = await getGraspingRecords({
          mediaAdId: this.mediaAdId,
          page: this.pagination.current,
          pageSize: this.pagination.pageSize
        });

        if (res.code === '000000') {
          this.data = res.data.aaData || [];
          this.pagination.total = res.data.iTotalRecords || 0;
        } else {
          throw new Error(res.msg || '获取数据失败');
        }
      } catch (error) {
        console.error('获取抓取记录失败:', error);
        this.$message.error(error.message);
        this.data = [];
        this.pagination.total = 0;
      } finally {
        this.loading = false;
      }
    },

    // 关闭模态框
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
/* 可自定义样式 */
</style>

5. 扩展优化

5.1 支持更多格式

如果数据格式可能变化，例如 100% 不带括号，可以调整正则：

getPercentageColor(value) {
  if (typeof value !== 'string') return 'orange';
  if (/(\(\s*100\s*%\)|100%)/.test(value)) return 'green';
  if (/(\(\s*0\s*%\)|0%)/.test(value)) return 'red';
  return 'orange';
}

5.2 使用 CSS 类代替行内样式

<template slot="percentage" slot-scope="text">
  <span :class="getPercentageClass(text)">{{ text }}</span>
</template>

<style>
.green-text { color: green; }
.red-text { color: red; }
.orange-text { color: orange; }
</style>

getPercentageClass(value) {
  if (typeof value !== 'string') return 'orange-text';
  if (/\(\s*100\s*%\)/.test(value)) return 'green-text';
  if (/\(\s*0\s*%\)/.test(value)) return 'red-text';
  return 'orange-text';
}

6. 总结

本文介绍了如何基于 Vue.js 和 Ant Design Vue 实现表格字段的动态颜色渲染，核心要点包括：

使用 scopedSlots 自定义渲染，灵活控制单元格内容。
动态计算颜色，通过字符串匹配或正则表达式判断条件。
优化健壮性，兼容不同数据格式（如带/不带括号的百分比）。

这种方法不仅适用于百分比数据，还可以扩展至其他需要动态样式的场景，如状态标签、进度条等。

以上就是基于Vue.js和Ant Design Vue实现根据字段内容动态设置表格颜色功能的详细内容，更多关于Vue.js字段内容设置表格颜色的资料请关注脚本之家其它相关文章！