ant design vue 中 table row 单行高亮样式展示
template
<a-table
ref="table"
:rowKey="record => record.enrollment.enrollment_no"
:columns="columns"
:data-source="data"
:showHeader="false"
:loading="loading"
:pagination="pagination"
:expandRowByClick="false"
:expandIconAsCell="false"
:expandIconColumnIndex="tabActiveKey === searchKey ? 1 : 2"
:expandIcon="(props)=>this.customExpandIcon(props)"
:rowClassName="setRowClassName"
>
</a-table>
【备注】:重点是 :rowClassName=“setRowClassName” 代码。
script
methods: {
setRowClassName (record) { // record 即为 本行的 渲染数据
if (record.enrollment_no === this.enrollmentNo) {
return 'rowcolor'
} else {
return 'rowcolor2'
}
}
}
style
<style>
.rowcolor {
background: #fae1e3;
}
.rowcolor2 {
background: #ffffff;
}
</style>
参考链接
https://www.cnblogs.com/chichuan/p/13470155.html