iview 某个单元格指定样式

235 阅读1分钟

vue中用的iview框架,对table表格的某个单元格指定样式,如图所示,红色字体,以免后边再遇到,记录一下

image.png

通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式

//this.tableData 赋值后设置字段 `cellClassName` 
this.tableData.forEach((item) => {
  this.$set(item, 'cellClassName', {}) // 创建一个空对象作为cellClassName属性值

  // 授权失败的授权状态和时间的字体红色
  if(item.accessStatus == '0'){
    item.cellClassName.accessStatusName = 'redColor'
  }
})

<style scoped lang="less">
  /deep/ .ivu-table .redColor {
   //字体红色
    color: red
  }
</style>