项目中用到,记录一下更改 antd 中 table 行 hover颜色 .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td{background-color:#ccc;}.ant-table-body .ant-table-row-hover{background:#ccc;}.ant-table-body .ant-table-row-hover>td{background:#ccc;}...
.oddRow{& > td{background-color:#fff;}}.evenRow{& > td{background-color:#f8f9fa;}}.selectedRow{& > td{background-color:#d7e4f7;}}.ant-table-tbody > .selectedRow > .ant-table-cell-row-hover{background-color:#d7e4f7;} js constgetRowClassName=(record,index)=>{letclassName='';...
setRowClassName(record) {returnrecord.id ===this.physicalSurveyCurrRowId ? 'clickRowStyl' : ''} CSS:设置自定义行的悬浮样式 .ant-table-tbody{.clickRowStyl:hover { td { background-color: #00b4ed; }} } 都能达到目的,按需要选择。
.default-row:hover > td.ant-table-cell-row-hover { background-color: wheat; } }</style> 2. customHeaderRow: 可以设置表格头的样式,返回对象,里面包含多个属性,class,style,onClick... 使用: <template> <div> <h3>表格样式设置</h3> <a-table class="container":columns="columns":data-source=...
antd-table 根据表格数据中的颜色值,更改表格行的背景色。目前table属性只提供rowClassName进行样式修改,并不能满足要求,而是根据后端返回的颜色值进行修改,如果的render方法里面进行单元格的自定义的话,自定义标签设置的颜色会覆盖表格的hover的高亮颜色 What does the proposed API look like? antd-table 能够根据表格...
antd vue table合并行后hover样式 Antd Vue表的合并行经常会出现hover样式的问题,最常见的解决办法是给渲染的每一行添加自定义的`rowClassName`属性。例如: ```js <a-table rowClassName={(record, index) => (index % 2 ? 'event-row' : 'odd-row')} ... ``` 然后在对应的CSS中添加对应的类,像...
32px;}.ant-table-tbody{>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)...
antd-vue a-table改变鼠标悬停背景色 table tbody tr:hover>td{background:#E7F1FF!important;} 本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
important; color: #fff !important; 这里设置 hover 时行样式和击时行样式一样,为了不让行击后,该行悬停时,出现其他不一样的样式。如果不想设置成一样,可以单独设置行击时的hover 样式和行击时的样式一样。/ 给表格悬停样式和当前击行选中样式.ant-table-row &.row-selection background-color: b 9、...
color: 'error', icon: 'ic:outline-delete-outline', popConfirm: { title: '确定删除该数据吗?', confirm: del.bind(null, record), }, }, ]" /> </template> </BasicTable> 以上代码,只是封装,不看也行,重点在下面的2个配置。 <script lang="ts" setup> ...