解决antd 表头排序sorter显示的tooltip只有英文

最新推荐文章于 2024-03-04 17:23:48 发布
最新推荐文章于 2024-03-04 17:23:48 发布
阅读量2.3k 收藏 10
点赞数 8
分类专栏： react-antd 文章标签： reactjs html5 node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44510613/article/details/105921841
版权
本文介绍了在使用antd设计库时，如何解决表格表头排序提示框显示英文的问题。通过查看antd源码，发现可以在Table组件的locale属性中进行配置，或者全局设置组件的locale来实现中文显示，简化了修改过程。
摘要由CSDN通过智能技术生成

我们发现使用antd-design的时候，表头排序提示框是英文的。

只有英文
而我们的antd官网并没有提示如何配置表头提示的排序。。。。。
在这里插入图片描述
不过有这个：
在这里插入图片描述
给了提示如何筛选和空数据文案，就是没有提示排序配置…瞬间感觉很坑。
本人很讨厌提示是这种默认的英文,不改过来睡不着觉。如是我查antd的源码,发现：
在这里插入图片描述
然后试着在Tabel组件的locale属性中配置:
在这里插入图片描述
大功告成.
在这里插入图片描述
当然,上面这种方法显得麻烦,antd官方提示了我们应该怎样全局组件配置中文:
在这里插入图片描述
这样真正解决所有问题,简单化.

全端小菜鸟
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd table单元格中的Tooltip
agua001的博客
07-27 2772
1、需求：鼠标移入当前单元格，展示所在单元格所有的信息展示（数据结构如下：） 2、效果如下（只展示一项，并没有全部展示）： 3、修改(slot=“title” 里也进行循环)： <span slot="keyValues" slot-scope="record" class="factoryBox"> <span v-for="(item, index) in record.keyValues" :key="index"> <a-tooltip placeme
antd 排序后修改鼠标悬浮在表头的提示文本
IT_dabai的博客
04-26 1736
在使用antd 进行开发的时候发现了个问题 当我在对表格进行排序后，悬浮在表头上时提示的是英文，这看起来多不舒服！！！ 解决办法 在花费大量时间查阅了antd官方文档后，还是没发现解决办法，最后看到 可以知道，我们能够通过设置local属性进行修改提示文本，但文档中却没有给出对象中具体对应的键值，最后去网上查到了 设置完成后，成功！！！ ...
使用ant design vue插件里面table组件的排序功能的时候，鼠标悬停提示文字是英文，怎么去自动设置这个提示文字，或者怎么把它变成中文
最新发布
lb_888888的博客
03-04 458
公司需求，使用这个插件去做一个管理系统，在做到排序功能的时候，发现鼠标悬停标题头提示的是英文，当时看着不顺眼，查阅了很多地方，甚至改动源码，都达不到效果，直到找到api里面的一个参数。我使用的是vue2+js，加了这个参数后，显示如下图。
ant-design-vue3的table使用总结
学习使我快乐_玉祥
09-12 8665
根据windows文件管理器，我们肉眼可见需要四个字段：name文件名、type文件类型、update修改日期、size大小[{title: '名称',},{width: 220,title: '修改日期', dataIndex: 'date',key: 'date',ellipsis: true, resizable: true,},{title: '类型',},
react+antd使用过程中总结的一些组件
weixin_43933139的博客
05-06 874
显示loading–mySpin 如何使用 {mySpin({ spinning: checking, tip: "校验中" })} /** * @param params.spinning 是否显示loading * @param params.tip 提示文字,默认加载中 * @description 需要父盒子使用相对定位position:relative */ export function mySpin(params) { const { spinning = false, tip
antd table 自定义排序图标
sun13212715744的博客
09-17 998
在上述示例中，我们创建了一个名为CustomSortIconsTable的函数组件，该组件包含一个Ant Design的Table。我们使用sorter属性来指定自定义的排序逻辑，然后使用sortDirections属性来指定排序的方向（升序和降序）。要在Ant Design的Table组件中自定义排序图标，可以使用sorter和sortDirections属性来实现自定义排序逻辑和图标。在这个示例中，我们检查了名字是否是“John Brown”，如果是，则根据年龄的条件显示升序或降序图标。
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
antd table按表格里的日期去排序操作
01-18
根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去...
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
表格单元格自定义ToolTip组件
11-24
表格单元格自定义ToolTip组件，适用所有Flex组件的自定义提示
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 ...
antd的Table后端排序(列升降序)的坑
热门推荐
hzxOnlineOk的博客
03-04 1万+
antd Table列升降序需要有个sorter属性 由于分页是后端分页,因此,排序也必须用后端排序(因为前端获取到的数据只有一页,无法正确排序) sorter: (a, b) => { // 啥也不写,不需要前端排序,写了sorter才会出现排序图标}, 这里会碰到一个坑,接口请求回来的数据明明已经排序正确了,传给dataSource也是正常的,为什么渲染出来的是错的? 因为前端又不...
vue3 基于Ant DesignVue Select Table封装下拉选择表格组件(2023-08-25 TAntdSelectTable组件组件新增上下键盘高亮选择回车选中功能)
wocwin的博客
08-24 2462
vue3+ Ant-Design-Vue a-select 下拉表格组件(Select 内嵌Table---基于Ant DesignVue Select Table封装下拉选择表格组件)2023-08-25 TAntdSelectTable组件组件新增上下键盘高亮选择回车选中功能
Antd Table表头加Icon和气泡提示的坑
hzxOnlineOk的博客
07-25 5602
对于Antd Table组件的columns数组来说，它需要接受2个属性（filterDropdown，filterIcon）才能在表头某个属性旁展示图标Icon： columns: [{ title: '表达式', dataIndex: 'formulaTenderAmount', key: 'formulaTenderAmount', width: 150, plac...
解决 ant design 组件显示英文的问题
weixin_72099243的博客
03-10 1208
然后去使用 ConfigProvider 包裹住 <App / > 组件进行配置。这是因为你使用了组件库但是没有配置国际化导致的！直接在根 index.js 中去进行引入。
React 使用antd table 实现分页表格功能
Zybdads的博客
09-20 1791
React 使用antd table 实现表格分页等功能
在react工程中使用antd组件时，组件显示语言英文切换的方式
weixin_48192626的博客
07-28 1685
antd组件所显示的语言是本工程所采用的默认语言，修改方法为在入口文件src/index.js中引入zhCN,然后在render中使用，如下图 import zhCN from 'antd/es/locale/zh_CN'; ReactDOM.render( <ConfigProvider locale={zhCN}> <App /> </ConfigProvider>, document.getElementById('root') ); .
使用vue ant design 分页以及表格分页改为中文
liantaiyou的博客
11-03 4634
<template> <div id="app"> <a-config-provider :locale="locale"> <router-view /> </a-config-provider> </div> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
vue antd table设置 sorter: true，导致表头高度不一致
07-12
这是因为当排序功能开启时，表头会显示排序图标，而排序图标会占据一定的高度，从而导致表头的高度不一致。 解决这个问题的方法是使用自定义表头的方式，通过自定义表头的样式来控制高度。你可以通过以下步骤来实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值