Ant-Design-Vue table中使用customCell改变单元格样式

自己记录一下自己对customCell的使用
在ant-design-vue中的table中突然有了个根据某种规则把那个单个数据标红的业务需求

官方文档中：

在官方中的引用：

使用

首先在html中引入，把customCell绑定自己自定义的一个方法renderTdBackground()

<a-table
  ref="table"
  size="middle"
  rowKey="id"
  bordered
  :pagination="false"
  :columns="columns"
  :dataSource="dataSource"
  :loading="loading">
</a-table>

在columns中需要的那一列定义customCell

const columns = [
...
{ 
  title: '时间(s)',
  dataIndex: 'time', 
  key:'time',
  align: "center", 
  width: 100, 
  customCell:this.renderTimeBackground
},
...
]

在methods中定义renderTdBackground()和renderTimeBackground()方法

renderTimeBackground(record){
	return this.renderTdBackground(record,1)
},

这里多加了个flag参数是我的columns中不仅仅一个time需要改变单元格样式
当时间超时timeOver == 1的时候，说明time超时了，需要标红这个单元格

renderTdBackground(record,flag){
  if(flag == 1){
    if(record.timeOver == 1){
      return {
        style: {
          'background-color': 'rgb(255,150,150)',
        },
      }
    }
  }
},

效果

180这一列就是time这一列，被标红警示