Ant Design of Vue中a-table组件斑马线

        当使用Ant Design of Vue前端UI中的表格组件a-table时，Ant官方默认是没有像eleme UI中表格组件el-table的stripe(斑马线)属性的。

        设置antdv中a-table组件的斑马线的方法有：

①CSS样式设置

/* 表格斑马样式 **/
/deep/.ant-table-tbody tr:nth-child(2n)
{
  background-color:#d9d4d4;
}

注：此①方法可能会不起效！

②JS函数设置

  // 对表格行进行斑马行格式显示
  renderStripe () {
	const table = document.getElementsByClassName('ant-table-row')
	if (table.length > 0) {
	  const rowList = [...table]
	  for (let i = 0; i < rowList.length; i++) {
		const row = rowList[i]
		const index = rowList.indexOf(row)
		if (index % 2 != 0) {
		  row.style.backgroundColor = '#d9d4d4'
		} else {
		  row.style.backgroundColor = '#ffffff'
		}
	  }
	}
  }

在updated或者mounted中延时调用！

updated() {
  this.renderStripe()
}

注：此②方法，如果a-table组件中columns列定义了fixed: 'left'或fixed: 'right'，则会出现斑马线错乱现象，特别的难看，没有之一，如图所示：

最终解决办法：使用a-table组件的rowClassName来处理

先定义两个斑马线样式：

.odd {
  background-color: #ffffff;
}
.even {
  background-color: #d9d4d4;
}

再在a-table组件定义处理：

:rowClassName="(record, index) => index % 2 == 0 ? 'odd' : 'even'"

最终a-table组件的斑马线都不会错乱！