效果图:
注意效果图中,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这个属性去动态根据条件设置样式