1. 确定antd表格需要横向滚动的场景和需求 在antd表格中,当表格的列数较多,导致内容超出容器的宽度时,就需要设置横向滚动条来允许用户查看所有列的内容。 2. 在antd表格组件中查找相关的横向滚动属性或配置 在antd的Table组件中,可以通过scroll属性来设置横向滚动。scroll属性接受一个对象,其中x属性用于设置横向滚动的...
1. 查看滚动条类名 使用浏览器的开发者工具可以查看到Antd的Table组件中滚动条的类名,例如可以找到横向滚动条的类名为`.ant-table-body .ant-table-scroll .ant-table-scroll-horizontal`。 2. 编写样式 在React组件中编写CSS样式,对滚动条的类名进行样式定制,例如: ```css .ant-table-body .ant-table-scro...
.ant-table的样式中设了scrollbar-color,只要把这里的样式设为scrollbar-color: auto; 然后再改.ant-table-body里面滚动条的样式,就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .ant-table-body{ &::-webkit-scrollbar { background: rgba(0,0,0,0); width:4px; height:4px; ...
如果你发现样式不一样,可以看一下自己是不是设置了-webkit-scrollbar-样式魔改过。antd 使用了更标准的scrollbar-样式配置以支持暗色模式下的滚动条样式。而-webkit-scrollbar-为非标样式配置。当两者共存是会优先使用前者。 如若如此,可以考虑覆盖全局样式哈~...
在每次请求数据完成之后,设置滚动条位置。 table的ref 名字设置为scrollTable this.$nextTick(() => { setTimeout(() => { this.$refs.scrollTable.$el.querySelector('.an
/deep/.ant-table-body{&::-webkit-scrollbar{//整体样式 height:12px;}&::-webkit-scrollbar-thumb{//滑动滑块条样式 border-radius:2px;-webkit-box-shadow:inset005px rgba(0,0,0,0.2);background:#eff1f7;}&::-webkit-scrollbar-track{//轨道的样式-webkit-box-shadow:0;border-radius:0;backgr...
/* 假滚动条使用绝对定位,所以手动修改一下 .ant-table-wrapper 的 position */ position: relative; /* 隐藏掉 .ant-table-body 的默认滚动条 */ .ant-table-body::-webkit-scrollbar { width: 0; height: 0; } } } </style> 最后来看一下挂上假滚动条后默认的效果。一般情况下默认样式看起来就不...
prefixCls为项目做的样式隔离 项目名前缀 .${prefixCls}-table-body{/**important 为解决乾坤框架内样式优先度被冲掉问题 */scrollbar-width:auto;scrollbar-color:auto;&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent!important;}&::-webkit-scrollbar...
antd 的TreeSelect 如何添加横向滚动条 // 文件目录下使用下面的命令,快速在编辑器中打开该项目 code ./ 1. 2. pwd // 查看当前文件的路径,eg:abc文件 // eg:/c/Users/t-likaipeng/Desktop/abc 1. 2. ng-zorro-antd的时候,有配置化的选项;不用自己加参数。