antd使用table显示数据出现模糊效果bug

原创 已于 2022-06-12 10:20:03 修改 · 972 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #react.js

于 2021-10-14 10:23:48 首次发布
本文介绍了两种解决Ant Design组件样式模糊的方法。第一种是升级antd库到最新版本，第二种是在CSS样式表中复写antd的spin组件样式，通过设置filter:blur(0px)!important;来消除模糊效果。这两种方案都有效避免了antd样式问题。

解决方法一：

更改版本，主要是因为antd版本过老，换个版本就好了（这个是百度的，我用最新版的就没问题）

请添加图片描述

解决方法二：

复写ant样式，随便找一个css格式的样式表中加入下列代码：

.ant-spin-container {
	filter: blur(0px) !important;
}

这我就不解释了…

antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
前边不显示+，并且详细信息默认展开 在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //...
使用antd框架时，字体模糊的问题
HZZOU的博客
12-26 1718
最近在写react+antd的项目练手，在使用antd的Card卡片组件时发现在谷歌浏览器手机调试模式时出现字体模糊，使用真机调试也是这样，使用-webkit-font-smoothing也无效，最后逐一排查，发现是Card组件的样式ant-card类上的position:relative属性的影响！看了一下它的子级又没有绝对定位，所以用不上。要覆盖的话，在ant-card类的父级没有定的情况下使...
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1601
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
antd bug记录
weixin_44459098的博客
06-11 219
项目场景： 使用antd中form组件和表单控件 问题描述： 如果在Form.Item中不直接使用表单控件，而是用其他组件将表单控件包裹起来时，提交的时候获取到的数据不正确： <Form.Item> {getFieldDecorator('date', { initialValue: this.props.searchValue.date, })( <ConfigProvider locale={zhCN}> <RangePicker
解决同时使用antd俩个不同版本的样式错乱问题
吴小迪的博客
04-10 2427
本文讲的是vue项目中用ant-design-vue，react用antd的话也是类似的道理。如果大家实在弄不来的话可以给笔者留言（看到了会协助你进行解决），然后笔者后面追加一个react的解决过程。
jtable 表头设置高度后，拖动后文字模糊
neweastsun的专栏
08-06 1901
設定 jtable header height   0人 設定的指令很簡單，就是使用 setPreferredSize 函數。 JTable.getTableHeader().setPreferredSize(new Dimension(0, 50));   JTable.getTableHeader().setPreferredSize(
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
antd-table-react.zip
07-13
这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向滚动的表格来说尤其有用。下面我们将深入探讨 antd-table 的核心特性、...
antd去掉表格边框
qq_44663724的博客
05-31 3253
.ant-table.ant-table-small { border: none; } .ant-table.ant-table-small .ant-table-tbody > tr > td { border: none; }
antd——table样式：表头和表体错位问题
热门推荐
yehaocheng520的博客
12-27 1万+
今天测试遇到一个问题，如下图所示：使用ant design vue的框架搭建的表格中，出现表头和表体出现错位的问题。 解决方法如下： 1.设置scroll——:scroll="{ y: 500, x: 1400 }" 主要是横向要设置，也就是x，y方向设置是为了固定表头。 2.设置columns——列宽度 <a-table :rowKey="(r, i) => i" :scroll="{ y: 500, x: 1400 }" :columns="column
antd——table样式：表头和表体错位问题——max-content的用法
yehaocheng520的博客
05-30 7504
antd——table样式：表头和表体错位问题——max-content的用法
后端如何实现多条件模糊搜索？我们使用antd的Table表格时如果出现key值不唯一报错的我们如何解决？
A_lose的博客
06-27 3254
那么我们可以通过query、body、params方法可以获取到前端传过来的参数，我们再通过是否存在将它添加到一个对象中，我们查找数据使用find查找，将对象传入以实现多条件模糊搜索。我们前边可以看到，我们前端进行获取数据的时候使用到了for遍历，给数据中每个对象添加一个key值，这样就可以避免我们table报key值错误问题了。如果存在我们将它添加到我们的空对象里面 这里使用到了$regex是为了模糊搜索，否则就必须精准搜索。但是我们想要实现多条件的，那么我们应该判断前端是否输入了某个需要搜索的数据。
Ant Design of Vue去掉加载遮罩
qq_38810813的博客
07-13 2086
.ant-spin-container::after { background: transparent!important; //这个比较重要 这个就是决定颜色的 } .ant-spin-blur { //下面这些就是一些辅助属性 比如透明度 opacity: 1!important; clear:none!important; overflow: auto!important; } ...
element-plus el-table 显示不全或者不显示
仰望星空的博客
08-25 3933
解决element-plus el-table 显示不全或者不显示
vue element Table 表格 自定义表头显影模糊查询封装组件
最新发布
weixin_45712370的博客
04-10 583
自定义表头+分页+模糊查询组件封装 C+V直接用
element-table实际项目遇见的问题总结
weixin_43913004的博客
01-13 587
【代码】element-table实际项目遇见的问题总结。
C# WinForm在高分辨率下界面模糊问题的解决
weixin_41855675的博客
03-06 1645
c#界面模糊处理方法
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值