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;
}