antd-vue - - - - - a-select结合i18n使用(踩坑问题)

antd-vue - - - - - a-select结合i18n使用(踩坑问题)

  • 1. 当前代码 & 效果
  • 2. 解决办法
  • ====

1. 当前代码 & 效果

<a-select
  v-model:value="formState.quickSwitching"
  :options="quickSwitchingOptions"
  @search="handleSearch"
  @change="handleChange"
></a-select>

options配置

    // 快速选择
    const quickSwitchingOptions = ref([
      {
        value: "please",
        label: computed(() => i18n.global.tm("dataService.please")),
      },
      {
        value: "day",
        label: computed(() => i18n.global.tm("dataService.today")),
      },
      {
        value: "week",
        label: computed(() => i18n.global.tm("dataService.thisWeek")),
      },
      {
        value: "month",
        label: computed(() => i18n.global.tm("dataService.thisMonth")),
      },
    ]);

language的配置

  dataService: {
    please: "请选择",
    today: "本日",
    thisWeek: "本周",
    thisMonth: "本月"
  }

初展示中文没有问题,但是在切换语言模式为其他语言时,select的option并没有跟着变化
在这里插入图片描述

2. 解决办法

使用select的另一种写法:

  <a-select
    v-model:value="formState.quickSwitching"
    @change="quickChange"
  >
    <a-select-option
      v-for="option in quickSwitchingOptions"
      :key="option.value"
      :value="option.value"
    >
      {{ option.label }}
    </a-select-option>
  </a-select>

如此即可正常切换
在这里插入图片描述

====

注意:
尽量使用.tm()格式,如下:
i18n.global.tm("****.**")

使用.t()会遇到各种莫名的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/676678.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux.用户

使用su - 切换用户 切换root时要输入密码&#xff0c;但是看不到 创建用户组 groupadd用户组名&#xff0c;用getent查看有哪些组 getent group 创建用户 在root身份中使用gentent passwd 可以查当前的用户信息 使用getent group查看有哪些组 使用chmod修改权限 快捷方法…

S4 BP 维护

前台输入Tcode:BP 问候填写金税开票信息使用的开户行名称,注释填写金税开票信息使用的开户行代码 屏幕下滑按需填写其他数据,如:街道2,街道3,街道/门牌号,街道4,街道5,区域,邮编、城市、国家、地区、语言,电话(发票地址里的电话(必须是客户开票资料里提供的电话,会…

k8s部署(单点或)高可用consul集群

在 Kubernetes 集群上部署一个高可用的 Consul 集群&#xff0c;确保一个节点挂了之后不会影响已注册到 Consul 的服务。利用 StatefulSet 和无头服务 HeadLess 的选举机制来实现 Consul 集群的高可用性&#xff0c;数据持久化方式选择HostPath&#xff0c;通过 nodeSelector 节…

HTML基本元素包含HTML表单验证

可将以下代码复制另存为一个HTML文件浏览器打开自己去看看实际使用效果 <!DOCTYPE html> <html> <head> <meta charset"utf-8"><title>测试</title> </head> <body> <h1>很多事</h1> <h1><b&…

视频融合共享平台LntonCVS视频监控业务平台可视化智慧仓储应用方案

对于当前许多大型工厂和物流基地来说&#xff0c;仓库是存放物品的重要场所。仓储存放着大量货物&#xff0c;并且配备有大量辅助设备&#xff0c;因此需要全方位的监管以避免发生安全事故&#xff0c;造成财产损失。传统的人工巡检方式已经无法满足现有大规模监管的要求&#…

【第九课】空间数据基础与处理——空间参考处理

一、前言 地图图层中的所有元素都具有特定的地理位置和范围&#xff0c;这使得它们能够定 位到地球表面上相应的位置。精确定位地理要素对于制图和 GIS来说都至关 重要&#xff0c;而要正确地描述要素的位置和形状&#xff0c;需要引入一个用于定义位置的框 架———空间参考。…

从MLP到卷积

1.从MLP到卷积层 最近要做多通道的实验&#xff0c;所以重新将处理图像的基础模型回顾一下&#xff0c;什么是卷积&#xff1f;卷积本质是是一种特殊的全连接层。 1.1怎么w的权重从一个值变成了4维呢?可以这样理解&#xff0c;在此举一个例子&#xff1a; 其实本质可以看成&…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

NEJM新英格兰医学期刊文献在家如何查阅下载

今天收到的求助文献中有一篇是NEJM新英格兰医学期刊中的一篇文献&#xff0c;篇名“Osimertinib after Chemoradiotherapy in Stage III EGFR -Mutated NSCLC” 首先我们先简单了解一下NEJM新英格兰医学期刊&#xff1a; NEJM新英格兰医学期刊&#xff1a;New England Journa…

c# - - - winform 右下角气球提示通知

c# - - - winform 右下角气球提示通知 winform 右下角气球提示通知 1.1 winform 右下角气球提示通知 在工具箱中点击 NotifyIcon 控件&#xff0c;拖动到 Form1 窗体上添加这个控件。 在“提示”按钮的点击事件中写气球提示通知内容。 public partial class Form1 : Form {…

如何利用CXL技术突破内存墙?-2

为了解决这些问题&#xff0c;业界正积极寻求新的技术和标准&#xff0c;比如Compute Express Link (CXL)&#xff0c;它旨在通过提供标准化的高速互连来提高内存带宽、降低延迟&#xff0c;并简化内存扩展的软件集成&#xff0c;从而有效地打破内存墙的限制。 通过使用CXL&am…

i.MX8MP平台开发分享(RDC资源分配控制器篇)

1.spec RDC 配置信息被发送到结构端口、内存垫片、信号控制器和外设&#xff0c;以根据域分配控制访问。 结构使用与每个端口相关的域标识符&#xff0c;将此信息与总线事务一起包含在内。当从属加密垫圈遇到总线事务时&#xff0c;它会将事务域 ID 与 RDC 提供的允许域列表进…

同一个tomcat不同端口运行不同项目

第一步&#xff1a;修改 server.xml 文件 修改 tomcat 安装目录下 conf/server.xml 文件&#xff0c;需要几个端口就添加几个 Service 节点。 配置 2 个端口&#xff1a;9131 和 9133&#xff0c;于是增加两个 Service 节点。 每个 Service 节点的 name 属性值要设置不同的值…

2024最火爆的6款洗地机推荐,洗地机品质优秀品牌推荐

洗地机将吸尘、拖地、扫地三大功能合一&#xff0c;通过高效吸尘系统迅速吸走灰尘和杂物。内置清洁水箱和智能拖布设计&#xff0c;使其在拖地时能够根据地面材质和清洁需求&#xff0c;自动调节湿度和清洁力度&#xff0c;实现最佳清洁效果。无论是硬地板还是地毯&#xff0c;…

WHAT - 前端开发人员日常提效工具和应用程序

目录 Mac代码编辑器和IDE1. Visual Studio Code (VS Code)2. WebStorm3. VimVim 的优势常用命令&#xff1a;普通模式&#xff08;Normal Mode&#xff09;常用命令&#xff1a;插入模式&#xff08;Insert Mode&#xff09;常用命令&#xff1a;命令行模式&#xff08;Command…

接口自动化-预期值和实际值怎么写?

测试类当中 怎么做接口自动化&#xff0c;返回值校验&#xff0c;就是需要返回值的预期值和实际值进行对比 实际值如下 怎么拿到预期值$.msg?用正则表达式-提取值 建新的类-来编写用正则表达式拿到预期值 源码pattern 使用的compile的方法&#xff0c;传入的是字符串正则表…

[原创][Delphi多线程]TThreadedQueue的经典使用案例.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…

Spi Pwm Tim 对比分析

spi SPI时序图 (spi是主从机 所以主机需要从机数据 需要主极先喊从机 把从机喊答应了 才能开始读从机的数据&#xff09; cpol时钟极性 和cpha时钟相位分析 1.cpha为高&#xff0c;cpol为高&#xff0c;则偶数上升沿有效 2.cpha为高&#xff0c;cpol为低&#xff0c;则偶数…

安装Subversion和配置 svn服务端

Subversion是一个免费/开源的版本控制系统(VCS),也被称为SVN。它能够对文件和目录以及它们的修改进行跨时间的管理,允许用户恢复数据的旧版本或检查数据的修改历史。Subversion建立在二进制文件区别算法基础上,对文本和二进制文件都有一致的操作方式,并将它们压缩存放在版…

大容量异步电机直接转矩(DTC)控制matlab仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; DTC简介 直接转矩控制的基本思想就是利用逆变器所产生的空间电压矢量来控制定子磁链的旋转速度&#xff0c;通过控制定子磁链的走停来改变定子磁链的平均旋转速度的大小&#xff0c;从而改变磁通角的大小进而…