效果图:
注意效果图中,table的表格每一栏颜色都要不一样
代码实现:
页面结构:
<a-table :columns="columns" :loading="tableLoading" :data-source="tableData" rowKey='id' size="middle"
:rowClassName="rowClassName">
<template slot="operate" slot-scope="text, record">
<p class="detailP" @click="openModel(text, record)">详情 </p>
</template>
</a-table>
方法:
rowClassName(record, index) {
return index % 2 == 0 ? "first" : "second";
},
样式:
/deep/.ant-table-tbody .first {
background-color: #061236 !important;
}
/deep/.ant-table-tbody .second {
background-color: #071641 !important;
}
关键点:通过rowClassName这个属性去动态根据条件设置样式