ant design vue 中 table row 单行高亮样式展示

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