ant-design vue table表格高亮某一行 某一格

一、高亮某一行

1.table屬性 rowClassName

<a-table
        class="alerm"
        size="small"
        ref="table"
        rowKey="id"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :columns="columns"
        :dataSource="loadData"
        :scroll="{x:200}"
        bordered
        :rowClassName="setRowClassName"
      >
</a-table>

2.在methods方法中

setRowClassName (record) {
      if (record.alarmLevelName === '嚴重') {
        return 'rowcolor'
      } else {
        return 'rowcolor2'
      }
    }

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: 2px 10px;"

        >{{ 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.效果圖