Record customCell in Ant-Vue-table to change the cell style

In the process of writing the project, I encountered the same requirement:

After reading the usage of the official document, customRow is easy to use, but customCell is not easy to use. After searching for a long time, I found a solution.

customRow usage

customCell usage

First, introduce it in html, and bind customCell to a custom method cellStyle.

 <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :customCell="cellStyle"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
        @change="handleTableChange">

The column that needs to be defined in columns customCell

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

Define the cellStyle() method in methods

methods: {
    
    
    // 判断日期并加背景色
    // 单元格样式函数
    cellStyle(row, column) {
    
    
      // console.log("单元格样式函数" + JSON.stringify(row), column)
      var cell = JSON.stringify(row)

      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = (month > 9) ? month : ('0' + month);
      day = (day < 10) ? ('0' + day) : day;
      var today = year + '-' + month + '-' + day;
      console.log("单元格样式函数" + row.nextAssessDate, today)

      if (row.nextAssessDate < today) {
    
    
        return {
    
    
          style: {
    
    
            'background-color': 'red',
          }
        }
      }
    },

The final effect achieved, those that do not meet the conditions are marked red