記錄Ant-Vue-table中customCell改變單元格樣式

‘mo發表於2020-10-22
Vue

Ant-Design-Vue table中使用customCell改變單元格樣式

自己記錄一下自己對customCell的使用
在ant-design-vue中的table中突然有了個根據某種規則把那個單個資料標紅的業務需求

官方文件中：
customCell官方文件
在官方中的引用：
customCell用法

使用

首先在html中引入，把customCell繫結自己自定義的一個方法renderTdBackground()

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

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

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

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

rendersjbBackground(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這一列，被標紅警示
效果圖

相關文章