antd中table hover上去的背景色样式修改

最新推荐文章于 2023-10-12 16:18:42 发布
最新推荐文章于 2023-10-12 16:18:42 发布
阅读量6.1k 收藏 4
点赞数 6
分类专栏： antd css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41077029/article/details/109387056
版权 
   .ant-table-tbody{
   	  > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
        background:#E5F2FF!important;
      }
   }
   .ant-table-fixed{
	.ant-table-row-hover, .ant-table-row-hover>td{
	    background: #E5F2FF!important;
	 }
	}
马娟
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
antd-data-table：组合antd的Table和Form来执行数据的搜索，显示和操作工作的组件
02-03
antd数据表 一个组合了antd的Table和Form来进行数据的搜索，显示和操作的组件。 特征 摆脱： 处理分页 处理表格行选择 编写搜索字段表单项组件 编写行动作组件 只需关注： 进行数据获取请求并返回数据 如有必要，呈现特定的数据字段 编写插件来操作一个或多个数据对象 安装 $ yarn add antd-data-table --save 最简单的数据表 import { DataTable } from 'antd-data-table' const searchFields : SearchField [ ] = [ { label : 'ID' , name : 'id' , type : 'input' , payload : { props : { placeholder : 'placeholder' } } } , { label : 'Select' , name : 'select' , type : 'select' , pay
在antd Table中插入可编辑的单元格实例
01-21
最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图 补充知识：React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求： 实现功能说明： 点击添加按钮，在表格中添加新的空白行（如下图所示），在点击提交的时候获取空白行的数据 在构造函数内定义： co
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font-family:微软雅黑, Open Sans, 宋体; font-weight: bold; } 代码： <div style={{textAlign: 'center',backgroundColor:'#17
React+AntDesign在Table表格内关于单元格设置缺省处理，hover时显示
Alanrnzearn的博客
09-23 1338
需求说明： 从后端返回的一组数组，需要显示在表格内容区域一行显示4个，且每个应用之间需要用竖线隔开，前后各2个空格，且若应用权限显示的名称过长，最好可以省略，hover时显示完整的应用名称。 具体效果显示图： 具体操作说明： 1. 从后台返回的是一组数组，要先将数组内容一个个显示，所以要先用到map方法，将数组里面的内容遍历显示。 2. 控制溢出隐藏显示通过调整css样式修改控制，而hover隐藏内容显示则是使用它的title属性，通过title将隐藏的内容通过鼠标悬停时可以直接显示看到。 3. 具体添加
antd react table改变table中每一行hover样式
anchor_1的博客
08-08 893
修改antd table样式
ant Design table表格 hover行样式修改
ling_kedu的博客
09-09 9319
1.找到table表格，点击tr（序号1），然后再单击hover（序号2），使北京市固定显示 2.点击第一个td（序号3），保持hover状态，找到默认背景色 3.复制出 .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: #e6f7ff; } 4.然后css样式全局更改就可以了 ...
antd vue 自定义Table 行hover
最新发布
weixin_43203545的博客
10-12 545
antd vue 自定义Table 行hover
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
w319502537的博客
02-23 6261
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
antd Table 列hover高亮
知之为知之，不知为不知
02-26 1528
效果图： 代码： js: css:
ant design table样式修改合集
Akukudeteng的博客
11-05 9335
目录 1. 改变列头颜色 2. 修改选中某行时的文字颜色 常见问题合集： table的列数据排序，sorter无效不起作用？ 1. 改变列头颜色 代码部分： index.js: import styles from '../index.less'; index.less: :global(.ant-table-thead> tr >th) { color: royalblue; text-align: center...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
Antd中Table的列表，行悬浮样式修改
appleXiaodu的博客
07-22 7923
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td { background-color: #F1F6FD!important; } .ant-table-body .ant-table-row-hover{ background: #F1F6FD!important; } .ant-table-body .a...
Antd Design Vue中 修改table表格鼠标移入的行样式
weixin_45678513的博客
03-30 2589
/deep/ .ant-table-tbody{ > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{ background:none !important; //这里是将鼠标移入时的背景色取消掉了 } } 不生效的，注意添加/deep/，！important这些。 ...
Ant design vue 样式调整（包含导航栏、a-table表格、分页）
xiaohua616的博客
07-08 1672
以下样式均为`ant design vue`样式调整，进行一些界面上的优化
Antd a-table表格样式修改
pretend88的博客
01-05 2138
a-table表格样式修改
完美解决 Ant design vue 鼠标悬浮在列表某一行改变颜色
xiaohua616的博客
05-06 1878
当鼠标悬浮在列表中的某一行时，改变当前行的背景颜色
antd下拉选择框，hover和选中时背景颜色修改
马娟的博客
10-30 8257
.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled),.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled){ background-color:#E5F2FF; }
react antd 中table使用rowClassName实现行样式添加背景色
06-08
在 React Ant Design 中，使用 `rowClassName` 属性可以为表格的每一行添加样式。具体实现方法如下： ...最后将该函数作为 `rowClassName` 属性传递给 `Table` 组件，即可实现为表格的每一行添加背景色的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值