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这一列，被标红警示