el-table 设置一列的颜色

最新推荐文章于 2025-05-09 17:10:09 发布

sy_yan

最新推荐文章于 2025-05-09 17:10:09 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/sy_yan/article/details/109314843

在Vue项目的el-table组件中，设置某一列颜色可通过template动态控制class，实现数据颜色变化。针对直接写死column和大量列通过循环生成的情况，核心在于根据条件为单元格添加不同的class。示例代码分别展示了简单情况和复杂情况（涉及多重循环及在column数组中定义判断条件）的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table 设置一列的颜色

在日常使用 el-table 中有两种形式一种是直接写死 column 另一种是大量的列通过for循环遍历出来的

两种方法无论哪一种其实核心思想都是通过 template 控制不同的class 将对应的样式渲染出来从而实现数据的颜色的转变核心为class

直接上代码

第一种简单情况
在这里插入图片描述

   <el-table-column align="center" label="同比">
        <template slot-scope="scope">
          <span :class="scope.row.ordAvgYearly < 0 ? 'font-class-red' : 'font-class-green'">{{
            scope.row.ordAvgYearly
          }}</span>
        </template>
      </el-table-column>
       .font-class-red {

第二种情况多重循环column复杂情况
在这里插入图片描述

<el-table-column
    v-for="column in columnsLeft"
    :key="column.key"
    :min-width="column.minWidth"
    :prop="column.key"
    :label="column.label"
    :width="column.width"
  >
	      <el-table-column
	        v-for="col in column.children"
	        :key="col.key"
	        :prop="col.key"
	        :label="col.label"
	        :width="col.width"
	      >
	        <template slot-scope="scope">
	          <span
	            :class="col.color ? scope.row[col.key] < 0 ? 'font-class-red' : 'font-class-green': ''"
	          >{{ scope.row[col.key] }}</span>
	        </template>
	      </el-table-column>
  </el-table-column>


data() {
return {
	columns: [
        {
          label: '终端揽件成本（元）',
          minWidth: '100',
          children: [
            { key: 'collCost', label: '成本金额' },
            { key: 'collAvgCost', label: '单均成本' },
            { key: 'collAvgYearly', label: '同比', color: true },
            { key: 'collAvgMonthly', label: '环比', color: true }
          ]
        },
        {
          label: '接货仓成本（元）',
          minWidth: '100',
          children: [
            { key: 'jhcCost', label: '成本金额' },
            { key: 'jhcAvgCost', label: '单均成本' },
            { key: 'jhcAvgYearly', label: '同比' },
            { key: 'jhcAvgMonthly', label: '环比' },
            { key: 'jhcPackageAvgCost', label: '接货仓包裹均成本金额' },
            { key: 'jhcPackageAvgYearly', label: '同比', color: true },
            { key: 'jhcPackageAvgMonthly', label: '环比', color: true }
          ]
        },
}
}
 .font-class-red {
    color: red !important;
  }
  .font-class-green {
    color: green !important;
  }
  .font-class-yellow {
    color:yellow !important;
  }

第二种情况复杂的原因是需要展示颜色的判断条件在column的数组中，而不在数据里面所以需要 class里面作两个判断

<template slot-scope="scope">
    <span
       :class="col.color ? scope.row[col.key] < 0 ? 'font-class-red' : 'font-class-green': ''"
     >{{ scope.row[col.key] }}</span>
 </template>