根据数据状态动态渲染不同颜色的卡片列表

老规矩，少废话先看效果

最近接到需求，列表不想用table形式展示，想用卡片形式展示，下面贴上实现代码

这个逻辑理清楚后，实现起来没什么难度。

HTML部分

 <el-row :gutter="10">
      <el-col v-for="(item,index) in yearLists" :key="index" :lg="8" :xl="6">
        <div class="item">
          <div :class="getClass(item.stateid)" @click="goYearDetail(item)">
            <div class="content">
              <p class="jiaob">{{ item.stateid|getType }}</p>
              <p class="unit">{{ item.subname }}</p>
              <p class="title">{{ item.name }}</p>
              <p class="time">创建时间：{{ item.createtime|escape }}</p>
              <el-button class="btnDetails" size="small" type="primary">详情</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

过滤器部分

 filters: {
 //时间
    escape(time) {
      const currentTime = new Date()
      const valueTime = new Date(time)
      const valueDay = valueTime.getDate()
      const currenDay = currentTime.getDate()
      if (
        valueTime.getFullYear() === currentTime.getFullYear() &&
        valueTime.getMonth() === currentTime.getMonth() &&
        valueDay + 2 > currenDay
      ) {
        return currenDay === valueDay ? '今天' : '昨天'
      } else {
        //
        return time.substr(0, 10)
      }
    },
    
    //状态
    getType(id) {
      switch (id) {
        case '1':
          return '制定中'
        case '4':
          return '审核中'
        case '5':
          return '已通过'
        case '6':
          return '被驳回'
      }
    }
  },

动态获取class

 getClass(id) {
      switch (id) {
        case '1':
          return 'item_make'
        case '4':
          return 'item_submit'
        case '5':
          return 'item_fulfil'
        case '6':
          return 'item_reject'
        default:
          return 'item_make'
      }
    },

style部分

//共用部分
.item {
  
}

//动态渲染部分
.item_make {

}
.item_submit {

}
.item_fulfil {

}
.item_reject {

}