一、高亮某一行

1.table屬性rowClassName

 1 <a-table
 2         class="alerm"
 3         size="small"
 4         ref="table"
 5         rowKey="id"
 6         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
 7         :columns="columns"
 8         :dataSource="loadData"
 9         :scroll
 
="{x:200}"
10         bordered
11         :rowClassName="setRowClassName"
12       >
13 </a-table>

2.在methods方法中

1 setRowClassName (record) {
2       if (record.alarmLevelName === '嚴重') {
3         return 'rowcolor'
4       } else {
5         return 'rowcolor2'
6       }
7     }

3.樣式

<style>
.alerm .rowcolor{
  color: red;
}
.alerm .rowcolor2{
  background: blue;
}
 
</style>

注意：style不能加scoped，否則無效

4.實現

二、高亮某一格

1.在table中slot實現

<a-table
      size="small"
      ref="table"
      rowKey="id"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxdisabled}"
      :columns="columns"
      :pagination="pagination"
      :dataSource
 
="loadData"
      :scroll="{x:200}"
      bordered
    >
      <span slot="alarmLevelName" slot-scope="text, record">

        <span
          v-if="record.alarmLevelName === '嚴重'"

          style="background-color:red;padding:2px10px;"

        >{{ record.alarmLevelName }}</span>

        <span v-else>{{ record. alarmLevelName }}</span>

      </span>
    </a-table>

columns: [
        {
          title: '報警編號',
          align: 'center',
          dataIndex: 'code',
          width: '150px',
          ellipsis: true
        },
        ..............
        {
          title: '報警級別',
          align: 'center',
          dataIndex: 'alarmLevelName',
          width: '150px',
          ellipsis: true,
          scopedSlots: { customRender: 'alarmLevelName' }
        }
      ],

2.效果圖