本文主要是介绍antd table组件点击表格行变色,单双行颜色不同,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
项目需求,采用ant design table展示数据,需要点击行变色,表格行之间有颜色区分(斑马色)
效果图:
<a-table:columns="tableLabel"//表头:data-source="tableData"//表格数据:customRow="rowClick"//点击事件:rowClassName="setRowClassName"//设置每行样式:scroll="{ x: 1632,y:675}"//横纵向滚动条/>
// 点击表格行,执行操作(双击也可以在这里写)rowClick(record, index) {return {on: {click: () => {// console.log(record);this.currentRow = record;//自己定义个变量,用于保存点击行的数据},},};}// 行样式设置setRowClassName(record, index) {let rowColor = (index % 2 === 0) ? "evenRowStyl" : "";//判断单双行,赋予不同样式return record === this.currentRow ? "clickRowStyl" : rowColor;//赋予点击行样式}
```css
//点击行的样式
.clickRowStyl {background-color: #bbbbff !important;
}
//偶数行的样式
.evenRowStyl {background-color: #aad4fd46 !important;
}.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {background: #bbbbff;
}
//鼠标移入样式
.ant-table-tbody>tr:hover>td {background: #bbbbff !important
}
这篇关于antd table组件点击表格行变色,单双行颜色不同的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!