需求:将嵌套表格中的子表格表头的背景色改为粉色,但是主表格表头背景色不变
<BasicTable @register="registerTable" style="background-color: #fff;">
//主表内内容
........
<!-- 子表 -->
<template #expandedRowRender>
<a-table :columns="innerColumns" :pagination="false" :data-source="dataInner"
style="background-color: #F7F7F7;">
<template #bodyCell="{ column }">
<template v-if="column.dataIndex === 'Operation'">
//子表操作栏内容
........
</template>
</template>
</a-table>
</template>
</BasicTable>
1、给子表数据表头添加className
export const innerColumns = [
{
title: 'Method',
align:"center",
dataIndex: 'method',
className:'innerHeaderClass'
},
{
title: 'Type',
align:"center",
dataIndex: 'type',
className:'innerHeaderClass'
},
{
title:'Operation',
align:"center",
dataIndex: 'Operation',
className:'innerHeaderClass'
},
];
2、给该类名添加背景色
:deep(.ant-table-thead > tr > .innerHeaderClass ) {
background-color: #3D4978;
color: #fff;
}