Ant Design of Vue 之 实现table表格组件实现隔行变色

背景

项目中需要基于ant vue 组件库 实现table 表格的隔行变色，具体如图。

具体实现

1.主要是通过/deep/实现，/deep/主要的运用的场景是在调用别人的组件时，想要修改部分的样式，但又不想影响组件在其他地方的使用。/deep/也可以替换成>>>。

 /deep/ .ant-table-tbody .ant-table-row:nth-child(2n) {
		background: #00060B;
	}

2.第二种通过rowClassName表格行类目实现。效果如下图所示

<a-table :columns="tableColumn" bordered="" :rowclassname="rowClassName" align="center" :data-source="tableData">
</a-table>

rowClassName(record, index) {
		let className = 'light'
		if (index % 2 === 1) className = 'dark'
		return className
	}

------------------------------------

然后再写css样式。

/deep/ .light {
	background: blue !important;
}
/deep/  .dark {
	background: #262626 !important;
}