vue中动态改变表格列表的css类名，样式

80 阅读 0 评论 53 点赞

我是靠谱客的博主真实板凳，最近开发中收集的这篇文章主要介绍vue中动态改变表格列表的css类名，样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述

  <template slot-scope="scope">
              <span :class="scope.row.organization_id ? '' : 'isnull'">
              //改变两种颜色的时候可以用三目运算符
                {{ scope.row.organization_applyment_state === '4' ? scope.row.organization_id : '审核成功后生成' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态"
              prop="auditStatus"   
             :filters="deal" 
             :filter-multiple="false"
             :column-key="'type'">
            <!-- <template slot-scope="scope">
                <span :class="judgeStatus(scope.row.organization_applyment_state).class">
                    {{judgeStatus(scope.row.organization_applyment_state).value}}
                </span>
                <span></span>
            </template> -->
            <template slot-scope="scope">
                <span :class="jutStatus(scope.row.auditStatus)" >
                   //改变多个颜色是可以添加方法，return出去改变样式
                   {{scope.row.auditStatus}}
                </span>
                <span></span>
            </template>

js部分

jutStatus(status){
        console.log(status)
        if(status=="审核通过"){
            return "info"
        }else if(status=="审核失败"){
            return "error"
        }else if(status=="审核中"){
            return "success"
        }else if(status=="已保存草稿"){
            return "preservation"
        }
    },
    优化版
      jutStatus(stas){
        console.log(stas)
         let result = 'normalRoom'
        switch(stas){
          case 审核通过:
        result = 'redRoom'
          break
        case 审核失败:
          result = '审核中'
          break
        case 2003:
          result = '已保存草稿m'
          break
        }
           return result
      }