[vue]element table 列的数据样式根据值得改变而改变

根据某个字段判断该列数据的样式，比如数据过期的，数据内容变成红色
table处代码

<el-table-column align="center" width="150">
            <template slot="header">
              <span>目前进度</span>
              <br>
              <span>截止日期</span>
            </template>
            <template slot-scope="{row}">
              <div :class="row.is_expired ? 'expired' : ''">
                {{ row.now_plan_time ? row.now_plan_time : '-' }}
              </div>
            </template>
          </el-table-column>

样式这么设置

<style lang="scss" scoped>
  .expired{
  color: #dd1100;
  }
</style>