Ant Design Vue使用rowClassName实现行内样式根据变量的变化而改变！

需求

测试表格

当检验状态变为检测中时，行内文字变为灰色，背景颜色变为红色色

思路

基本逻辑判断，当数据满足条件时使用rowClassName给<a-table>增加类名，然后设置相应样式

代码

首先给<atable>设置属性:rowClassName="setRowClassName"

<a-table
            :key="1" 
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            class="j-table-force-nowrap"
            @change="handleTableChange"
            :rowClassName="setRowClassName" //增加此项，其他属性为个人项目所需
          >

然后在methods中增加方法

methods: {
	    setRowClassName (record) {
	  //状态为1即成功,输出类名
	  return record.status === 1 ? 'undetected' : ''
	},
}

最后定义需要增加的样式

.undetected {
  color: #d4d4d4;
  background-color: rgb(235, 152, 152);
}

效果