Ant Design Vue使用rowClassName实现行内样式根据变量的变化而改变!
需求测试表格当检验状态变为检测中时,行内文字变为灰色,背景颜色变为红色色思路基本逻辑判断,当数据满足条件时使用rowClassName给<a-table>增加类名,然后设置相应样式代码首先给<atable>设置属性:rowClassName="setRowClassName"<a-table:key="1"ref="table"size="middle"bor
·
需求
测试表格
当检验状态变为检测中时,行内文字变为灰色,背景颜色变为红色色
思路
基本逻辑判断,当数据满足条件时使用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);
}
效果
更多推荐
已为社区贡献1条内容
所有评论(0)