antd-table:通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累
2023-12-18 13:18:10
斑马条纹
对于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-table
style="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;
},
完成!!!
文章来源:https://blog.csdn.net/yehaocheng520/article/details/135057017
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!