ant Design of vue 实现table每栏动态根据条件设置背景颜色（table栏每一栏颜色自定义）

本文主要是介绍ant Design of vue 实现table每栏动态根据条件设置背景颜色（table栏每一栏颜色自定义），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

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

这篇关于ant Design of vue 实现table每栏动态根据条件设置背景颜色（table栏每一栏颜色自定义）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---