antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

本文主要是介绍antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

斑马条纹

对于element-ui是有个stripe斑马条纹的属性的，最终呈现的效果如下：

antd-table中是没有这个属性的，但是可以通过rowClassName：可以给对应行添加指定类名。

实现方法：

<a-table:rowClassName="getRowClassName"size="small":dataSource="tableData":rowKey="(row) => row.id"bordered:scroll="{ y: 430 }":pagination="false":columns="columns"
></a-table>

getRowClassName(row,index){if (index % 2 == 0) {return 'evenCls';}
}

/deep/.ant-table-body > table > .ant-table-tbody > tr.evenCls > td {background: #fff9e6;
}
/deep/.ant-table-body > table > .ant-table-tbody > tr:hover > td {background: #fff;
}

最终效果图：

单选——最简单的方式

<a-tablestyle="margin-top: 10px":dataSource="tableData":rowKey="(row) => row.id":scroll="{ x: 1000, y: 500 }"bordered:pagination="pagination"@change="changeTable":columns="columns":row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}"
></a-table>

onSelectChange(selectedRowKeys) {this.selectedRowKeys = selectedRowKeys;
},

完成！！！

这篇关于antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---