el-table 设置一列的颜色

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=